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.

About this App

About

Present info about your app, and link to terms & privacy pages.

Preview this Screen

Scan with your camera to preview on your phone:

Download Expo
Screen Code

-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import {
 Divider,
 Icon,
 ScreenContainer,
 Touchable,
 withTheme,
} from '@draftbit/ui';
import { Image, ScrollView, StyleSheet, Text, View } from 'react-native';
const REPLACE_SCREEN_NAME = props => {
 const { theme } = props;
 return (
   <ScreenContainer scrollable={true} hasSafeArea={true}>
     <ScrollView
       contentContainerStyle={styles.scrollViewAg}
       showsHorizontalScrollIndicator={false}
       showsVerticalScrollIndicator={true}
       bounces={true}
     >
       <View
         pointerEvents=""auto""
         accessible={true}
         importantForAccessibility=""auto""
         hitSlop={{}}
       >
         <View style={styles.viewUn}>
           <Image
             style={styles.imageY3}
             resizeMode=""cover""
             source={Images.ProfilePlaceholder}
           />
           <Text
             style={StyleSheet.flatten([
               styles.textTw,
               theme.typography.headline4,
               { color: theme.colors.strong },
             ])}
           >
             App Name
           </Text>
           <Text
             style={StyleSheet.flatten([
               styles.textMA,
               theme.typography.subtitle1,
               { color: theme.colors.medium },
             ])}
           >
             App Description
           </Text>
           <Touchable style={styles.touchableMy}>
             <View
               style={styles.viewYr}
               hitSlop={{}}
               importantForAccessibility=""auto""
               accessible={true}
               pointerEvents=""auto""
             >
               <Icon
                 style={styles.iconP5}
                 name=""MaterialCommunityIcons/twitter""
                 size={20}
                 color={theme.colors.primary}
               />
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.subtitle2,
                   { color: theme.colors.primary },
                 ])}
                 textBreakStrategy=""highQuality""
                 allowFontScaling={true}
                 ellipsizeMode=""tail""
                 accessible={true}
               >
                 @twitter
               </Text>
             </View>
           </Touchable>
           <Touchable style={styles.touchableL0}>
             <View
               style={styles.viewBb}
               accessible={true}
               importantForAccessibility=""auto""
               hitSlop={{}}
               pointerEvents=""auto""
             >
               <Icon
                 style={styles.iconNx}
                 name=""MaterialCommunityIcons/link-variant""
                 color={theme.colors.primary}
                 size={20}
               />
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.subtitle2,
                   { color: theme.colors.primary },
                 ])}
                 textBreakStrategy=""highQuality""
                 accessible={true}
                 allowFontScaling={true}
                 ellipsizeMode=""tail""
               >
                 Website
               </Text>
             </View>
           </Touchable>
         </View>
         <View
           style={styles.viewHn}
           accessible={true}
           importantForAccessibility=""auto""
           pointerEvents=""auto""
           hitSlop={{}}
         >
           <Touchable>
             <View
               style={styles.viewVu}
               pointerEvents=""auto""
               importantForAccessibility=""auto""
               hitSlop={{}}
               accessible={true}
             >
               <View
                 style={styles.view1T}
                 accessible={true}
                 importantForAccessibility=""auto""
                 hitSlop={{}}
                 pointerEvents=""auto""
               >
                 <View
                   style={styles.viewRr}
                   pointerEvents=""auto""
                   accessible={true}
                   hitSlop={{}}
                   importantForAccessibility=""auto""
                 >
                   <Icon
                     style={styles.iconHc}
                     size={34}
                     color={theme.colors.strong}
                     name=""MaterialCommunityIcons/alpha-t-box""
                   />
                 </View>
                 <View
                   pointerEvents=""auto""
                   accessible={true}
                   importantForAccessibility=""auto""
                   hitSlop={{}}
                 >
                   <Text
                     style={StyleSheet.flatten([
                       theme.typography.headline6,
                       { color: theme.colors.strong },
                     ])}
                     allowFontScaling={true}
                     ellipsizeMode=""tail""
                     textBreakStrategy=""highQuality""
                     accessible={true}
                   >
                     Terms & Conditions
                   </Text>
                 </View>
               </View>
               <Icon
                 style={styles.iconQ7}
                 color={theme.colors.strong}
                 size={24}
                 name=""Ionicons/ios-arrow-forward""
               />
             </View>
           </Touchable>
           <Divider
             style={styles.dividerWH}
             color={theme.colors.divider}
             height={1}
           />
           <Touchable>
             <View
               style={styles.viewMR}
               hitSlop={{}}
               importantForAccessibility=""auto""
               accessible={true}
               pointerEvents=""auto""
             >
               <View
                 style={styles.viewTo}
                 accessible={true}
                 hitSlop={{}}
                 pointerEvents=""auto""
                 importantForAccessibility=""auto""
               >
                 <View
                   style={styles.viewBC}
                   accessible={true}
                   importantForAccessibility=""auto""
                   pointerEvents=""auto""
                   hitSlop={{}}
                 >
                   <Icon
                     style={styles.iconYd}
                     size={34}
                     color={theme.colors.strong}
                     name=""MaterialCommunityIcons/alpha-p-box""
                   />
                 </View>
                 <View
                   importantForAccessibility=""auto""
                   pointerEvents=""auto""
                   hitSlop={{}}
                   accessible={true}
                 >
                   <Text
                     style={StyleSheet.flatten([
                       theme.typography.headline6,
                       { color: theme.colors.strong },
                     ])}
                     ellipsizeMode=""tail""
                     accessible={true}
                     textBreakStrategy=""highQuality""
                     allowFontScaling={true}
                   >
                     Privacy Policy
                   </Text>
                 </View>
               </View>
               <Icon
                 style={styles.icon0H}
                 color={theme.colors.strong}
                 name=""Ionicons/ios-arrow-forward""
                 size={24}
               />
             </View>
           </Touchable>
           <Divider
             style={styles.divider2I}
             height={1}
             color={theme.colors.divider}
           />
         </View>
       </View>
       <View
         style={styles.viewZD}
         hitSlop={{}}
         importantForAccessibility=""auto""
         accessible={true}
         pointerEvents=""auto""
       >
         <Text
           style={StyleSheet.flatten([
             theme.typography.caption,
             { color: theme.colors.medium },
           ])}
           allowFontScaling={true}
           ellipsizeMode=""tail""
           textBreakStrategy=""highQuality""
           accessible={true}
         >
           Version 1.01
         </Text>
       </View>
     </ScrollView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 viewYr: {
   flexDirection: 'row',
   alignItems: 'center',
 },
 viewBb: {
   alignItems: 'center',
   flexDirection: 'row',
 },
 viewRr: {
   width: 34,
   height: 34,
   marginRight: 14,
 },
 view1T: {
   maxWidth: '80%',
   width: '100%',
   alignItems: 'center',
   flexDirection: 'row',
 },
 viewVu: {
   paddingTop: 12,
   paddingBottom: 12,
   marginBottom: 12,
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
   width: '100%',
   marginTop: 12,
 },
 viewBC: {
   width: 34,
   height: 34,
   marginRight: 14,
 },
 viewTo: {
   flexDirection: 'row',
   maxWidth: '80%',
   width: '100%',
   alignItems: 'center',
 },
 viewMR: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
   width: '100%',
   marginTop: 12,
   paddingTop: 12,
   paddingBottom: 12,
   marginBottom: 12,
 },
 scrollViewAg: {
   justifyContent: 'space-between',
   flexGrow: 1,
 },
 viewUn: {
   paddingBottom: 14,
   paddingTop: 64,
   paddingLeft: 32,
   paddingRight: 32,
   alignItems: 'center',
 },
 imageY3: {
   marginBottom: 24,
   width: 120,
   height: 120,
 },
 iconP5: {
   width: 24,
   alignSelf: 'flex-start',
   height: 24,
   marginRight: 8,
 },
 iconNx: {
   marginRight: 8,
   height: 24,
   width: 24,
   alignSelf: 'flex-start',
 },
 iconHc: {
   width: 40,
   height: 40,
 },
 iconYd: {
   height: 40,
   width: 40,
 },
 viewHn: {
   paddingBottom: 14,
   paddingTop: 14,
   paddingRight: 32,
   paddingLeft: 32,
 },
 viewZD: {
   paddingTop: 14,
   paddingBottom: 34,
   paddingRight: 32,
   paddingLeft: 32,
   alignItems: 'center',
   marginTop: 44,
 },
 textTw: {
   textAlign: 'center',
   marginBottom: 6,
 },
 iconQ7: {
   width: 24,
   height: 24,
 },
 dividerWH: {
   height: 1,
 },
 icon0H: {
   width: 24,
   height: 24,
 },
 textMA: {
   textAlign: 'left',
 },
 touchableMy: {
   marginBottom: 6,
   marginTop: 12,
   flexWrap: 'wrap',
 },
 divider2I: {
   height: 1,
 },
 touchableL0: {
   flexWrap: 'wrap',
   marginTop: 2,
   marginBottom: 6,
 },
});
export default withTheme(REPLACE_SCREEN_NAME);

Screen Variants:

Additional Details

Changelog

No items found.

Request access to the private beta.