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.

App Profile

Profile

A screen for directory apps that lists information about a specific app entry.

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 {
 Button,
 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.scrollViewOq}
       showsHorizontalScrollIndicator={false}
       showsVerticalScrollIndicator={true}
       bounces={true}
     >
       <View style={styles.viewX6}>
         <Image
           style={styles.imageHN}
           resizeMode=""contain""
           source={Images.AppIconPlaceholder}
         />
         <View
           style={styles.viewN6}
           pointerEvents=""auto""
           accessible={true}
           importantForAccessibility=""auto""
           hitSlop={{}}
         >
           <Text
             style={StyleSheet.flatten([
               styles.textNs,
               theme.typography.headline4,
               { color: theme.colors.strong },
             ])}
           >
             App Name
           </Text>
           <Text
             style={StyleSheet.flatten([
               theme.typography.subtitle1,
               { color: theme.colors.medium },
             ])}
           >
             App Description
           </Text>
           <Button
             style={StyleSheet.flatten([
               styles.button17,
               { borderRadius: theme.borderRadius.global },
             ])}
             type=""solid""
             labelColor={theme.colors.null}
           >
             Download
           </Button>
         </View>
       </View>
       <View
         style={styles.viewUL}
         pointerEvents=""auto""
         accessible={true}
         importantForAccessibility=""auto""
         hitSlop={{}}
       >
         <Touchable style={styles.touchable0R}>
           <View
             style={styles.view0L}
             hitSlop={{}}
             importantForAccessibility=""auto""
             accessible={true}
             pointerEvents=""auto""
           >
             <Icon
               style={styles.icon8P}
               name=""MaterialIcons/account-circle""
               size={20}
               color={theme.colors.primary}
             />
             <Text
               style={StyleSheet.flatten([
                 styles.textN6,
                 theme.typography.subtitle2,
                 { color: theme.colors.primary },
               ])}
               textBreakStrategy=""highQuality""
               allowFontScaling={true}
               ellipsizeMode=""tail""
               accessible={true}
             >
               Maker
             </Text>
           </View>
         </Touchable>
         <Touchable style={styles.touchableZ2}>
           <View
             style={styles.view7B}
             accessible={true}
             importantForAccessibility=""auto""
             hitSlop={{}}
             pointerEvents=""auto""
           >
             <Icon
               style={styles.iconX8}
               name=""MaterialCommunityIcons/link-variant""
               color={theme.colors.primary}
               size={20}
             />
             <Text
               style={StyleSheet.flatten([
                 styles.textVi,
                 theme.typography.subtitle2,
                 { color: theme.colors.primary },
               ])}
               textBreakStrategy=""highQuality""
               accessible={true}
               allowFontScaling={true}
               ellipsizeMode=""tail""
             >
               Website
             </Text>
           </View>
         </Touchable>
       </View>
       <View
         style={styles.viewOb}
         hitSlop={{}}
         importantForAccessibility=""auto""
         accessible={true}
         pointerEvents=""auto""
       >
         <View
           style={styles.viewVw}
           pointerEvents=""auto""
           accessible={true}
           importantForAccessibility=""auto""
           hitSlop={{}}
         >
           <Image
             style={styles.imageQm}
             resizeMode=""contain""
             source={Images.AppScreenshotPlaceholder}
           />
         </View>
       </View>
       <View
         style={styles.viewGY}
         accessible={true}
         importantForAccessibility=""auto""
         pointerEvents=""auto""
         hitSlop={{}}
       >
         <View
           style={styles.view4Y}
           importantForAccessibility=""auto""
           pointerEvents=""auto""
           hitSlop={{}}
           accessible={true}
         >
           <Text
             style={StyleSheet.flatten([
               theme.typography.headline5,
               { color: theme.colors.strong },
             ])}
             ellipsizeMode=""tail""
             allowFontScaling={true}
             accessible={true}
             textBreakStrategy=""highQuality""
           >
             App Features
           </Text>
         </View>
         <View
           style={styles.view5O}
           pointerEvents=""auto""
           importantForAccessibility=""auto""
           hitSlop={{}}
           accessible={true}
         >
           <View
             style={styles.viewLe}
             accessible={true}
             importantForAccessibility=""auto""
             hitSlop={{}}
             pointerEvents=""auto""
           >
             <View
               importantForAccessibility=""auto""
               accessible={true}
               hitSlop={{}}
               pointerEvents=""auto""
             >
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.headline6,
                   { color: theme.colors.strong },
                 ])}
                 ellipsizeMode=""tail""
                 textBreakStrategy=""highQuality""
                 allowFontScaling={true}
                 accessible={true}
               >
                 Feature Title
               </Text>
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.subtitle2,
                   { color: theme.colors.medium },
                 ])}
                 allowFontScaling={true}
                 textBreakStrategy=""highQuality""
                 ellipsizeMode=""tail""
                 accessible={true}
               >
                 Feature Description
               </Text>
             </View>
           </View>
         </View>
         <Divider
           style={styles.divider8E}
           color={theme.colors.divider}
           height={1}
         />
         <View
           style={styles.viewJx}
           importantForAccessibility=""auto""
           pointerEvents=""auto""
           hitSlop={{}}
           accessible={true}
         >
           <View
             style={styles.viewAV}
             accessible={true}
             importantForAccessibility=""auto""
             hitSlop={{}}
             pointerEvents=""auto""
           >
             <View
               importantForAccessibility=""auto""
               pointerEvents=""auto""
               accessible={true}
               hitSlop={{}}
             >
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.headline6,
                   { color: theme.colors.strong },
                 ])}
                 accessible={true}
                 textBreakStrategy=""highQuality""
                 allowFontScaling={true}
                 ellipsizeMode=""tail""
               >
                 Feature Title
               </Text>
               <Text
                 style={StyleSheet.flatten([
                   theme.typography.subtitle2,
                   { color: theme.colors.medium },
                 ])}
                 accessible={true}
                 allowFontScaling={true}
                 ellipsizeMode=""tail""
                 textBreakStrategy=""highQuality""
               >
                 Feature Description
               </Text>
             </View>
           </View>
         </View>
         <Divider
           style={styles.dividerM2}
           height={1}
           color={theme.colors.divider}
         />
       </View>
       <View
         style={styles.viewE7}
         accessible={true}
         pointerEvents=""auto""
         importantForAccessibility=""auto""
         hitSlop={{}}
       >
         <View
           style={styles.viewR9}
           hitSlop={{}}
           pointerEvents=""auto""
           accessible={true}
           importantForAccessibility=""auto""
         >
           <Text
             style={StyleSheet.flatten([
               theme.typography.headline5,
               { color: theme.colors.strong },
             ])}
             textBreakStrategy=""highQuality""
             ellipsizeMode=""tail""
             allowFontScaling={true}
             accessible={true}
           >
             Developer
           </Text>
         </View>
         <Touchable>
           <View
             style={styles.view1C}
             hitSlop={{}}
             accessible={true}
             pointerEvents=""auto""
             importantForAccessibility=""auto""
           >
             <View
               style={styles.viewTB}
               hitSlop={{}}
               pointerEvents=""auto""
               accessible={true}
               importantForAccessibility=""auto""
             >
               <View
                 style={styles.viewBA}
                 importantForAccessibility=""auto""
                 hitSlop={{}}
                 accessible={true}
                 pointerEvents=""auto""
               >
                 <Image
                   style={styles.imageMY}
                   resizeMode=""contain""
                   source={Images.ProfilePicturePlaceholder}
                 />
               </View>
               <View
                 style={styles.viewH9}
                 pointerEvents=""auto""
                 importantForAccessibility=""auto""
                 hitSlop={{}}
                 accessible={true}
               >
                 <Text
                   style={StyleSheet.flatten([
                     theme.typography.headline6,
                     { color: theme.colors.strong },
                   ])}
                   allowFontScaling={true}
                   accessible={true}
                   ellipsizeMode=""tail""
                   textBreakStrategy=""highQuality""
                 >
                   Developer Name
                 </Text>
                 <Text
                   style={StyleSheet.flatten([
                     styles.textAj,
                     theme.typography.subtitle1,
                     { color: theme.colors.medium },
                   ])}
                   textBreakStrategy=""highQuality""
                   accessible={true}
                   ellipsizeMode=""tail""
                   allowFontScaling={true}
                 >
                   Company
                 </Text>
                 <Text
                   style={StyleSheet.flatten([
                     theme.typography.subtitle2,
                     { color: theme.colors.medium },
                   ])}
                   textBreakStrategy=""highQuality""
                   ellipsizeMode=""tail""
                   allowFontScaling={true}
                   accessible={true}
                 >
                   Bio
                 </Text>
               </View>
             </View>
             <Icon
               style={styles.icon7H}
               color={theme.colors.strong}
               name=""Ionicons/ios-arrow-forward""
               size={24}
             />
           </View>
         </Touchable>
       </View>
     </ScrollView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 view0L: {
   flexDirection: 'row',
   alignItems: 'center',
 },
 view7B: {
   alignItems: 'center',
   flexDirection: 'row',
 },
 viewVw: {
   alignItems: 'center',
 },
 view4Y: {
   alignItems: 'center',
   justifyContent: 'space-between',
   flexDirection: 'row',
   width: '100%',
 },
 viewLe: {
   width: '100%',
   alignItems: 'flex-start',
   flexDirection: 'row',
 },
 viewAV: {
   flexDirection: 'row',
   alignItems: 'flex-start',
   width: '100%',
 },
 viewR9: {
   width: '100%',
   flexDirection: 'row',
   justifyContent: 'space-between',
   alignItems: 'center',
 },
 viewBA: {
   width: 40,
   height: 40,
   marginRight: 14,
 },
 viewTB: {
   flexDirection: 'row',
   alignItems: 'flex-start',
   maxWidth: '80%',
   width: '100%',
 },
 view1C: {
   flexDirection: 'row',
   alignItems: 'flex-start',
   justifyContent: 'space-between',
   width: '100%',
   paddingBottom: 12,
   paddingTop: 12,
   marginTop: 12,
   marginBottom: 12,
 },
 scrollViewOq: {
   flexGrow: 1,
 },
 textNs: {
   marginBottom: 6,
 },
 viewX6: {
   paddingBottom: 14,
   paddingTop: 44,
   paddingLeft: 32,
   paddingRight: 32,
   alignItems: 'flex-start',
   flexDirection: 'row',
 },
 touchable0R: {
   marginBottom: 6,
   flexWrap: 'wrap',
 },
 imageHN: {
   width: 86,
   height: 86,
   marginRight: 24,
 },
 icon8P: {
   width: 24,
   alignSelf: 'flex-start',
   height: 24,
 },
 iconX8: {
   height: 24,
   width: 24,
   alignSelf: 'flex-start',
 },
 imageQm: {
   height: 600,
   width: 280,
 },
 imageMY: {
   width: 40,
   height: 40,
 },
 viewN6: {
   alignItems: 'flex-start',
 },
 textN6: {
   marginLeft: 8,
 },
 textVi: {
   marginLeft: 8,
 },
 viewUL: {
   paddingLeft: 32,
   paddingRight: 32,
   paddingTop: 14,
   paddingBottom: 14,
 },
 view5O: {
   paddingTop: 12,
   paddingBottom: 12,
   marginBottom: 12,
   flexDirection: 'row',
   alignItems: 'flex-start',
   justifyContent: 'space-between',
   width: '100%',
   marginTop: 12,
 },
 textAj: {
   marginBottom: 8,
 },
 viewH9: {
   paddingRight: 34,
 },
 touchableZ2: {
   flexWrap: 'wrap',
   marginTop: 2,
   marginBottom: 6,
 },
 icon7H: {
   width: 24,
   height: 24,
 },
 button17: {
   justifyContent: 'center',
   alignItems: 'center',
   marginTop: 24,
   height: 46,
 },
 viewOb: {
   paddingTop: 34,
   paddingBottom: 34,
   paddingRight: 32,
   paddingLeft: 32,
   alignItems: 'center',
 },
 divider8E: {
   height: 1,
 },
 viewJx: {
   marginBottom: 12,
   paddingBottom: 12,
   paddingTop: 12,
   flexDirection: 'row',
   alignItems: 'flex-start',
   justifyContent: 'space-between',
   width: '100%',
   marginTop: 12,
 },
 viewGY: {
   paddingBottom: 17,
   paddingTop: 34,
   paddingRight: 32,
   paddingLeft: 32,
 },
 viewE7: {
   paddingRight: 32,
   paddingBottom: 34,
   paddingTop: 17,
   paddingLeft: 32,
 },
 dividerM2: {
   height: 1,
 },
});
export default withTheme(REPLACE_SCREEN_NAME);

Screen Variants:

Additional Details

Changelog

No items found.

Request access to the private beta.