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.

Plan Options

Other

Card display of multiple plan options, each with checkout buttons

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, Icon, ScreenContainer, 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.scrollViewQ6}
       showsHorizontalScrollIndicator={false}
       bounces={true}
       showsVerticalScrollIndicator={true}
     >
       <View style={styles.viewXZ}>
         <Image
           style={styles.imageQ9}
           source={Images.DraftbitAppLogo}
           resizeMode=""contain""
         />
         <Text
           style={StyleSheet.flatten([
             styles.textJk,
             theme.typography.headline3,
             { color: theme.colors.strong },
           ])}
         >
           Choose a Plan
         </Text>
         <View
           style={StyleSheet.flatten([
             styles.viewA1,
             {
               borderColor: theme.colors.divider,
               borderRadius: theme.borderRadius.global,
               backgroundColor: theme.colors.background,
             },
           ])}
           pointerEvents=""auto""
           hitSlop={{}}
           importantForAccessibility=""auto""
           accessible={true}
         >
           <View
             style={styles.viewBa}
             pointerEvents=""auto""
             importantForAccessibility=""auto""
             hitSlop={{}}
             accessible={true}
           >
             <View
               style={styles.viewEh}
               hitSlop={{}}
               pointerEvents=""auto""
               accessible={true}
               importantForAccessibility=""auto""
             >
               <View
                 style={styles.viewC2}
                 accessible={true}
                 hitSlop={{}}
                 importantForAccessibility=""auto""
                 pointerEvents=""auto""
               >
                 <Icon
                   style={styles.icon8U}
                   size={34}
                   color={theme.colors.strong}
                   name=""MaterialCommunityIcons/arrow-right-drop-circle""
                 />
               </View>
               <View
                 style={styles.viewAy}
                 pointerEvents=""auto""
                 hitSlop={{}}
                 accessible={true}
                 importantForAccessibility=""auto""
               >
                 <Text
                   style={StyleSheet.flatten([
                     theme.typography.headline6,
                     { color: theme.colors.strong },
                   ])}
                   ellipsizeMode=""tail""
                   textBreakStrategy=""highQuality""
                   accessible={true}
                   allowFontScaling={true}
                 >
                   Start Free
                 </Text>
                 <Text
                   style={StyleSheet.flatten([
                     theme.typography.subtitle1,
                     { color: theme.colors.strong },
                   ])}
                   allowFontScaling={true}
                   accessible={true}
                   textBreakStrategy=""highQuality""
                   ellipsizeMode=""tail""
                 >
                   Try Draftbit for free
                 </Text>
               </View>
             </View>
           </View>
           <Button
             style={StyleSheet.flatten([
               styles.buttonMC,
               { borderRadius: theme.borderRadius.global },
             ])}
             type=""solid""
             color={theme.colors.null}
           >
             Sign Up Free
           </Button>
         </View>
         <View
           style={StyleSheet.flatten([
             styles.viewDk,
             {
               borderColor: theme.colors.divider,
               borderRadius: theme.borderRadius.global,
               backgroundColor: theme.colors.background,
             },
           ])}
           pointerEvents=""auto""
           hitSlop={{}}
           importantForAccessibility=""auto""
           accessible={true}
         >
           <View
             style={styles.viewEK}
             accessible={true}
             pointerEvents=""auto""
             importantForAccessibility=""auto""
             hitSlop={{}}
           >
             <View
               style={styles.viewXQ}
               accessible={true}
               importantForAccessibility=""auto""
               hitSlop={{}}
               pointerEvents=""auto""
             >
               <View
                 style={styles.viewS0}
                 pointerEvents=""auto""
                 hitSlop={{}}
                 importantForAccessibility=""auto""
                 accessible={true}
               >
                 <Icon
                   style={styles.icon6O}
                   size={34}
                   name=""MaterialCommunityIcons/plus-circle""
                   color={theme.colors.strong}
                 />
               </View>
               <View
                 style={styles.viewT0}
                 hitSlop={{}}
                 accessible={true}
                 importantForAccessibility=""auto""
                 pointerEvents=""auto""
               >
                 <Text
                   style={StyleSheet.flatten([
                     theme.typography.headline6,
                     { color: theme.colors.strong },
                   ])}
                   allowFontScaling={true}
                   textBreakStrategy=""highQuality""
                   ellipsizeMode=""tail""
                   accessible={true}
                 >
                   Upgrade
                 </Text>
                 <Text
                   style={StyleSheet.flatten([
                     theme.typography.subtitle1,
                     { color: theme.colors.strong },
                   ])}
                   textBreakStrategy=""highQuality""
                   allowFontScaling={true}
                   ellipsizeMode=""tail""
                   accessible={true}
                 >
                   Unlock all features
                 </Text>
                 <View
                   style={styles.viewZu}
                   pointerEvents=""auto""
                   accessible={true}
                   importantForAccessibility=""auto""
                   hitSlop={{}}
                 >
                   <View
                     style={styles.viewO0}
                     hitSlop={{}}
                     accessible={true}
                     importantForAccessibility=""auto""
                     pointerEvents=""auto""
                   >
                     <View
                       style={styles.viewDy}
                       importantForAccessibility=""auto""
                       pointerEvents=""auto""
                       accessible={true}
                       hitSlop={{}}
                     >
                       <Icon
                         style={styles.iconFk}
                         color={theme.colors.strong}
                         name=""Entypo/dot-single""
                         size={24}
                       />
                     </View>
                     <View
                       accessible={true}
                       pointerEvents=""auto""
                       hitSlop={{}}
                       importantForAccessibility=""auto""
                     >
                       <Text
                         style={StyleSheet.flatten([
                           theme.typography.body2,
                           { color: theme.colors.medium },
                         ])}
                         accessible={true}
                         ellipsizeMode=""tail""
                         textBreakStrategy=""highQuality""
                         allowFontScaling={true}
                       >
                         Unlocked feature
                       </Text>
                     </View>
                   </View>
                   <View
                     style={styles.viewYb}
                     hitSlop={{}}
                     accessible={true}
                     importantForAccessibility=""auto""
                     pointerEvents=""auto""
                   >
                     <View
                       style={styles.viewQt}
                       pointerEvents=""auto""
                       accessible={true}
                       importantForAccessibility=""auto""
                       hitSlop={{}}
                     >
                       <Icon
                         style={styles.iconIy}
                         name=""Entypo/dot-single""
                         color={theme.colors.strong}
                         size={24}
                       />
                     </View>
                     <View
                       accessible={true}
                       pointerEvents=""auto""
                       hitSlop={{}}
                       importantForAccessibility=""auto""
                     >
                       <Text
                         style={StyleSheet.flatten([
                           theme.typography.body2,
                           { color: theme.colors.medium },
                         ])}
                         allowFontScaling={true}
                         accessible={true}
                         ellipsizeMode=""tail""
                         textBreakStrategy=""highQuality""
                       >
                         Unlocked feature
                       </Text>
                     </View>
                   </View>
                   <View
                     style={styles.viewLR}
                     accessible={true}
                     hitSlop={{}}
                     pointerEvents=""auto""
                     importantForAccessibility=""auto""
                   >
                     <View
                       style={styles.view46}
                       hitSlop={{}}
                       pointerEvents=""auto""
                       importantForAccessibility=""auto""
                       accessible={true}
                     >
                       <Icon
                         style={styles.iconNi}
                         size={24}
                         color={theme.colors.strong}
                         name=""Entypo/dot-single""
                       />
                     </View>
                     <View
                       accessible={true}
                       importantForAccessibility=""auto""
                       hitSlop={{}}
                       pointerEvents=""auto""
                     >
                       <Text
                         style={StyleSheet.flatten([
                           theme.typography.body2,
                           { color: theme.colors.medium },
                         ])}
                         textBreakStrategy=""highQuality""
                         allowFontScaling={true}
                         ellipsizeMode=""tail""
                         accessible={true}
                       >
                         Unlocked feature
                       </Text>
                     </View>
                   </View>
                   <View
                     style={styles.viewJC}
                     accessible={true}
                     importantForAccessibility=""auto""
                     pointerEvents=""auto""
                     hitSlop={{}}
                   >
                     <View
                       style={styles.viewDD}
                       pointerEvents=""auto""
                       importantForAccessibility=""auto""
                       accessible={true}
                       hitSlop={{}}
                     >
                       <Icon
                         style={styles.iconA5}
                         name=""Entypo/dot-single""
                         size={24}
                         color={theme.colors.strong}
                       />
                     </View>
                     <View
                       hitSlop={{}}
                       accessible={true}
                       importantForAccessibility=""auto""
                       pointerEvents=""auto""
                     >
                       <Text
                         style={StyleSheet.flatten([
                           theme.typography.body2,
                           { color: theme.colors.medium },
                         ])}
                         allowFontScaling={true}
                         ellipsizeMode=""tail""
                         textBreakStrategy=""highQuality""
                         accessible={true}
                       >
                         Unlocked feature
                       </Text>
                     </View>
                   </View>
                 </View>
               </View>
             </View>
           </View>
           <Button
             style={StyleSheet.flatten([
               styles.buttonI9,
               { borderRadius: theme.borderRadius.global },
             ])}
             type=""solid""
           >
             Try Premium
           </Button>
         </View>
       </View>
     </ScrollView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 viewC2: {
   width: 34,
   height: 34,
   marginRight: 14,
 },
 viewEh: {
   flexDirection: 'row',
   alignItems: 'flex-start',
   width: '100%',
   maxWidth: '80%',
 },
 viewBa: {
   alignItems: 'flex-start',
   flexDirection: 'row',
   width: '100%',
   marginBottom: 24,
 },
 viewS0: {
   marginRight: 14,
   height: 34,
   width: 34,
 },
 viewDy: {
   marginRight: 8,
   height: 24,
   width: 24,
 },
 viewO0: {
   alignItems: 'flex-start',
   flexDirection: 'row',
   width: '100%',
   marginBottom: 2,
   marginTop: 2,
 },
 viewQt: {
   marginRight: 8,
   height: 24,
   width: 24,
 },
 view46: {
   marginRight: 8,
   height: 24,
   width: 24,
 },
 viewDD: {
   height: 24,
   marginRight: 8,
   width: 24,
 },
 viewXQ: {
   alignItems: 'flex-start',
   flexDirection: 'row',
   maxWidth: '80%',
   width: '100%',
 },
 viewEK: {
   marginBottom: 24,
   width: '100%',
   flexDirection: 'row',
   alignItems: 'flex-start',
 },
 scrollViewQ6: {
   flexGrow: 1,
 },
 viewXZ: {
   paddingBottom: 34,
   paddingTop: 64,
   paddingLeft: 32,
   paddingRight: 32,
   alignItems: 'center',
   alignContent: 'center',
 },
 imageQ9: {
   marginBottom: 46,
   width: 42,
   height: 42,
 },
 icon8U: {
   width: 34,
   height: 34,
   maxWidth: 34,
   maxHeight: 34,
 },
 icon6O: {
   height: 34,
   width: 34,
   maxHeight: 34,
   maxWidth: 34,
 },
 iconFk: {
   maxHeight: 24,
   width: 24,
   height: 24,
   maxWidth: 24,
 },
 iconIy: {
   width: 24,
   maxWidth: 24,
   height: 24,
   maxHeight: 24,
 },
 iconNi: {
   width: 24,
   maxWidth: 24,
   height: 24,
   maxHeight: 24,
 },
 iconA5: {
   maxWidth: 24,
   height: 24,
   maxHeight: 24,
   width: 24,
 },
 viewAy: {
   paddingRight: 34,
 },
 buttonMC: {
   height: 54,
   justifyContent: 'center',
   alignItems: 'center',
 },
 viewYb: {
   flexDirection: 'row',
   width: '100%',
   marginBottom: 2,
   marginTop: 2,
   alignItems: 'flex-start',
 },
 viewT0: {
   paddingRight: 34,
 },
 buttonI9: {
   justifyContent: 'center',
   height: 54,
   alignItems: 'center',
 },
 textJk: {
   marginBottom: 24,
   textAlign: 'center',
 },
 viewA1: {
   width: '100%',
   paddingTop: 24,
   paddingBottom: 24,
   paddingLeft: 24,
   paddingRight: 24,
   marginBottom: 24,
   marginTop: 24,
   borderBottomWidth: 1,
   borderTopWidth: 1,
   borderLeftWidth: 1,
   borderRightWidth: 1,
   justifyContent: 'center',
 },
 viewLR: {
   marginTop: 2,
   marginBottom: 2,
   width: '100%',
   flexDirection: 'row',
   alignItems: 'flex-start',
 },
 viewZu: {
   marginTop: 10,
 },
 viewJC: {
   flexDirection: 'row',
   marginTop: 2,
   marginBottom: 2,
   width: '100%',
   alignItems: 'flex-start',
 },
 viewDk: {
   width: '100%',
   paddingTop: 24,
   paddingBottom: 24,
   paddingLeft: 24,
   paddingRight: 24,
   marginBottom: 24,
   marginTop: 24,
   borderBottomWidth: 1,
   borderTopWidth: 1,
   borderLeftWidth: 1,
   borderRightWidth: 1,
   justifyContent: 'center',
 },
});
export default withTheme(REPLACE_SCREEN_NAME);

Screen Variants:

Additional Details

Changelog

No items found.

Request access to the private beta.