Live Preview with Expo
Scan the QR code with your camera. Don't have Expo yet? Enter your email or phone number and we'll send a link.
No items found.

Dating Profile

Profile

A beautifully designed profile with a profile photo, description, and interests.

Preview this Screen

Scan with your camera to preview on your phone:

Download Expo
Screen Code

-- CODE language-jsx --
import React from 'react';
import { Icon, ScreenContainer, Touchable, withTheme } from '@draftbit/ui';
import { Image, StyleSheet, Text, View } from 'react-native';
import { Fetch } from 'react-request';
const DatingProfileScreen = props => {
 const { theme } = props;
 return (
   <ScreenContainer hasSafeArea={true} scrollable={true}>
     <Fetch
       url={`https://example-data.draftbit.com/users/${encodeURIComponent(3)}`}
       headers={{
         Accept: 'application/json',
         'Content-Type': 'application/json',
       }}
     >
       {({ loading, error, data, refetch }) => {
         if (loading) {
           return null;
         }
         if (error) {
           return null;
         }
         if (!data) {
           return null;
         }
         return (
           <View
             accessible={true}
             importantForAccessibility="auto"
             hitSlop={{}}
             pointerEvents="auto"
           >
             <Image
               style={styles.ImageXv}
               resizeMode="stretch"
               source={{ uri: data['avatar'] }}
             />
             <View
               style={StyleSheet.flatten([
                 styles.Viewbb,
                 { backgroundColor: theme.colors.custom_rgba0_0_0_1 },
               ])}
               pointerEvents="auto"
               hitSlop={{}}
               importantForAccessibility="auto"
               accessible={true}
             >
               <View
                 style={styles.View_4w}
                 accessible={true}
                 importantForAccessibility="auto"
                 hitSlop={{}}
                 pointerEvents="auto"
               >
                 <View
                   style={styles.ViewPm}
                   accessible={true}
                   importantForAccessibility="auto"
                   hitSlop={{}}
                   pointerEvents="auto"
                 >
                   <Text
                     style={StyleSheet.flatten([
                       styles.TextxO,
                       theme.typography.headline4,
                       { color: theme.colors.strong },
                     ])}
                   >
                     {data && data['fullName']}
                   </Text>
                   <Icon
                     color={theme.colors.custom_rgb0_255_0}
                     size={18}
                     name="AntDesign/checkcircle"
                   />
                 </View>
                 <View
                   style={styles.Viewmz}
                   accessible={true}
                   importantForAccessibility="auto"
                   hitSlop={{}}
                   pointerEvents="auto"
                 >
                   <Touchable>
                     <Icon
                       color={theme.colors.medium}
                       size={30}
                       name="FontAwesome/twitter-square"
                     />
                   </Touchable>
                   <Touchable>
                     <Icon
                       color={theme.colors.medium}
                       size={30}
                       name="FontAwesome/google-plus-square"
                     />
                   </Touchable>
                   <Touchable>
                     <Icon
                       color={theme.colors.medium}
                       size={30}
                       name="FontAwesome/facebook-square"
                     />
                   </Touchable>
                 </View>
               </View>
               <View
                 style={styles.ViewsA}
                 accessible={true}
                 importantForAccessibility="auto"
                 hitSlop={{}}
                 pointerEvents="auto"
               >
                 <Text
                   style={StyleSheet.flatten([
                     styles.Textk6,
                     theme.typography.caption,
                     { color: theme.colors.primary },
                   ])}
                 >
                   About Me
                 </Text>
                 <Text
                   style={StyleSheet.flatten([
                     theme.typography.body2,
                     { color: theme.colors.strong },
                   ])}
                 >
                   {data && data['bio']}
                 </Text>
               </View>
               <View style={styles.ViewnV}>
                 <Text
                   style={StyleSheet.flatten([
                     styles.TextKt,
                     theme.typography.caption,
                     { color: theme.colors.primary },
                   ])}
                 >
                   Interests
                 </Text>
                 <View
                   style={styles.ViewZ0}
                   accessible={true}
                   importantForAccessibility="auto"
                   hitSlop={{}}
                   pointerEvents="auto"
                 >
                   <Touchable>
                     <View
                       style={StyleSheet.flatten([
                         styles.ViewXx,
                         {
                           backgroundColor: theme.colors.divider,
                           borderRadius: theme.borderRadius.global,
                         },
                       ])}
                     >
                       <Text
                         style={StyleSheet.flatten([
                           theme.typography.button,
                           { color: theme.colors.strong },
                         ])}
                       >
                         NBA
                       </Text>
                     </View>
                   </Touchable>
                   <Touchable>
                     <View
                       style={StyleSheet.flatten([
                         styles.Vieww5,
                         {
                           backgroundColor: theme.colors.divider,
                           borderRadius: theme.borderRadius.global,
                         },
                       ])}
                     >
                       <Text
                         style={StyleSheet.flatten([
                           theme.typography.button,
                           { color: theme.colors.strong },
                         ])}
                       >
                         Tacos
                       </Text>
                     </View>
                   </Touchable>
                   <Touchable>
                     <View
                       style={StyleSheet.flatten([
                         styles.ViewFq,
                         {
                           backgroundColor: theme.colors.divider,
                           borderRadius: theme.borderRadius.global,
                         },
                       ])}
                     >
                       <Text
                         style={StyleSheet.flatten([
                           theme.typography.button,
                           { color: theme.colors.strong },
                         ])}
                       >
                         Sci-Fi Movies
                       </Text>
                     </View>
                   </Touchable>
                 </View>
               </View>
             </View>
           </View>
         );
       }}
     </Fetch>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 View_4w: {
   paddingTop: 8,
   paddingBottom: 8,
 },
 ViewPm: {
   flexDirection: 'row',
   alignItems: 'center',
   marginBottom: 8,
 },
 ImageXv: {
   width: '100%',
   height: 400,
 },
 ViewFq: {
   marginRight: 8,
   paddingBottom: 8,
   paddingTop: 8,
   paddingRight: 16,
   paddingLeft: 16,
 },
 Vieww5: {
   marginRight: 8,
   paddingBottom: 8,
   paddingTop: 8,
   paddingRight: 16,
   paddingLeft: 16,
 },
 ViewXx: {
   marginRight: 8,
   paddingBottom: 8,
   paddingTop: 8,
   paddingRight: 16,
   paddingLeft: 16,
 },
 TextxO: {
   marginRight: 6,
 },
 TextKt: {
   marginTop: 16,
   marginTop: 1,
   textTransform: 'uppercase',
 },
 Textk6: {
   marginBottom: 8,
   textTransform: 'uppercase',
 },
 Viewbb: {
   paddingLeft: 16,
   paddingRight: 16,
   paddingTop: 16,
 },
 ViewsA: {
   paddingTop: 8,
   paddingBottom: 8,
   marginTop: 8,
 },
 ViewZ0: {
   flexDirection: 'row',
   marginTop: 16,
 },
 Viewmz: {
   flexDirection: 'row',
   flexWrap: 'wrap',
   justifyContent: 'space-between',
   width: 100,
 },
 ViewnV: {
   flexWrap: 'wrap',
   paddingTop: 8,
   paddingBottom: 8,
   marginTop: 8,
 },
});
export default withTheme(DatingProfileScreen);

Screen Variants:

Additional Details

Changelog

No items found.

Now in open beta!