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.

In-App Purchase

Other

Options for in-app purchases. Icon made by Freepik from www.flaticon.com.

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 { Container, 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={false} hasSafeArea={true}>
     <View style={styles.viewHl}>
       <Image style={styles.imageMi} resizeMode=""cover"" source={Images.Coin} />
       <Text
         style={StyleSheet.flatten([
           styles.textLD,
           theme.typography.headline3,
           { color: theme.colors.strong },
         ])}
       >
         800
       </Text>
       <Text
         style={StyleSheet.flatten([
           styles.textHi,
           { color: theme.colors.light },
         ])}
       >
         Total Coins
       </Text>
     </View>
     <Touchable>
       <View
         style={StyleSheet.flatten([
           styles.viewYI,
           { backgroundColor: theme.colors.divider },
         ])}
       >
         <Text style={{ color: theme.colors.medium }}>Buy coins</Text>
       </View>
     </Touchable>
     <ScrollView
       contentContainerStyle={styles.scrollView2L}
       showsHorizontalScrollIndicator={true}
       showsVerticalScrollIndicator={true}
       horizontal={false}
       bounces={true}
     >
       <View style={styles.viewVN}>
         <View style={styles.viewT0}>
           <Image
             style={styles.imageNC}
             resizeMode=""cover""
             source={Images.Coin}
           />
           <Text style={{ color: theme.colors.strong }}>100 coins</Text>
         </View>
         <Touchable>
           <Container
             style={StyleSheet.flatten([
               styles.containerRe,
               {
                 borderRadius: theme.borderRadius.global,
                 backgroundColor: theme.colors.primary,
               },
             ])}
             useThemeGutterPadding={true}
             elevation={0}
           >
             <Text
               style={StyleSheet.flatten([
                 styles.textRw,
                 { color: theme.colors.strongInverse },
               ])}
             >
               $0.99
             </Text>
           </Container>
         </Touchable>
       </View>
       <View style={styles.viewJy}>
         <View style={styles.viewVr}>
           <Image
             style={styles.imageZC}
             resizeMode=""cover""
             source={Images.Coin}
           />
           <Text style={{ color: theme.colors.strong }}>500 coins</Text>
         </View>
         <Touchable>
           <Container
             style={StyleSheet.flatten([
               styles.containerTi,
               {
                 borderRadius: theme.borderRadius.global,
                 backgroundColor: theme.colors.primary,
               },
             ])}
             useThemeGutterPadding={true}
             elevation={0}
           >
             <Text
               style={StyleSheet.flatten([
                 styles.textMe,
                 { color: theme.colors.strongInverse },
               ])}
             >
               $4.99
             </Text>
           </Container>
         </Touchable>
       </View>
       <View style={styles.viewXj}>
         <View style={styles.viewNM}>
           <Image
             style={styles.imageFp}
             resizeMode=""cover""
             source={Images.Coin}
           />
           <Text style={{ color: theme.colors.strong }}>2000 coins</Text>
         </View>
         <Touchable>
           <Container
             style={StyleSheet.flatten([
               styles.containerJO,
               {
                 borderRadius: theme.borderRadius.global,
                 backgroundColor: theme.colors.primary,
               },
             ])}
             useThemeGutterPadding={true}
             elevation={0}
           >
             <Text
               style={StyleSheet.flatten([
                 styles.textSN,
                 { color: theme.colors.strongInverse },
               ])}
             >
               $19.99
             </Text>
           </Container>
         </Touchable>
       </View>
       <View style={styles.viewQj}>
         <View style={styles.viewG5}>
           <Image
             style={styles.imageEh}
             resizeMode=""cover""
             source={Images.Coin}
           />
           <Text style={{ color: theme.colors.strong }}>5000 coins</Text>
         </View>
         <Touchable>
           <Container
             style={StyleSheet.flatten([
               styles.containerD1,
               {
                 borderRadius: theme.borderRadius.global,
                 backgroundColor: theme.colors.primary,
               },
             ])}
             useThemeGutterPadding={true}
             elevation={0}
           >
             <Text
               style={StyleSheet.flatten([
                 styles.textWG,
                 { color: theme.colors.strongInverse },
               ])}
             >
               $49.99
             </Text>
           </Container>
         </Touchable>
       </View>
       <View style={styles.viewHi}>
         <View style={styles.viewIi}>
           <Image
             style={styles.image3R}
             resizeMode=""cover""
             source={Images.Coin}
           />
           <Text style={{ color: theme.colors.strong }}>10000 coins</Text>
         </View>
         <Touchable>
           <Container
             style={StyleSheet.flatten([
               styles.containerSn,
               {
                 borderRadius: theme.borderRadius.global,
                 backgroundColor: theme.colors.primary,
               },
             ])}
             useThemeGutterPadding={true}
             elevation={0}
           >
             <Text
               style={StyleSheet.flatten([
                 styles.textUz,
                 { color: theme.colors.strongInverse },
               ])}
             >
               $99.99
             </Text>
           </Container>
         </Touchable>
       </View>
       <Text
         style={StyleSheet.flatten([
           styles.textHb,
           { color: theme.colors.light },
         ])}
       >
         If you have any questions or concerns, please contact us at
         help@example.com.
       </Text>
     </ScrollView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 containerRe: {
   paddingTop: 8,
   paddingBottom: 8,
   width: 100,
 },
 containerTi: {
   paddingTop: 8,
   paddingBottom: 8,
   paddingLeft: 24,
   paddingRight: 24,
   width: 100,
 },
 containerJO: {
   paddingTop: 8,
   paddingBottom: 8,
   paddingLeft: 24,
   paddingRight: 24,
   width: 100,
 },
 containerD1: {
   paddingTop: 8,
   paddingBottom: 8,
   paddingLeft: 24,
   paddingRight: 24,
   width: 100,
 },
 containerSn: {
   paddingTop: 8,
   paddingBottom: 8,
   paddingLeft: 24,
   paddingRight: 24,
   width: 100,
 },
 viewHl: {
   paddingBottom: 16,
   paddingTop: 16,
   alignItems: 'center',
 },
 viewYI: {
   paddingTop: 16,
   paddingBottom: 16,
   paddingLeft: 16,
 },
 viewT0: {
   flexDirection: 'row',
   paddingTop: 24,
   paddingBottom: 24,
   alignItems: 'center',
 },
 textRw: {
   textAlign: 'center',
 },
 viewVN: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
 },
 viewVr: {
   flexDirection: 'row',
   paddingTop: 24,
   paddingBottom: 24,
   alignItems: 'center',
 },
 textMe: {
   textAlign: 'center',
 },
 viewNM: {
   flexDirection: 'row',
   paddingTop: 24,
   paddingBottom: 24,
   alignItems: 'center',
 },
 textSN: {
   textAlign: 'center',
 },
 viewG5: {
   flexDirection: 'row',
   paddingTop: 24,
   paddingBottom: 24,
   alignItems: 'center',
 },
 textWG: {
   textAlign: 'center',
 },
 viewIi: {
   flexDirection: 'row',
   paddingTop: 24,
   paddingBottom: 24,
   alignItems: 'center',
 },
 textUz: {
   textAlign: 'center',
 },
 imageMi: {
   width: 50,
   height: 50,
 },
 imageNC: {
   width: 25,
   height: 25,
   marginRight: 16,
 },
 imageZC: {
   height: 25,
   width: 25,
   marginRight: 16,
 },
 imageFp: {
   height: 25,
   width: 25,
   marginRight: 16,
 },
 imageEh: {
   height: 25,
   width: 25,
   marginRight: 16,
 },
 image3R: {
   height: 25,
   width: 25,
   marginRight: 16,
 },
 textLD: {
   textAlign: 'center',
   marginTop: 16,
 },
 viewJy: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
 },
 scrollView2L: {
   paddingLeft: 16,
   paddingRight: 16,
 },
 textHi: {
   textAlign: 'center',
 },
 viewXj: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
 },
 viewQj: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
 },
 viewHi: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
 },
 textHb: {
   textAlign: 'center',
 },
});
export default withTheme(REPLACE_SCREEN_NAME);

Screen Variants:

Additional Details

Changelog

No items found.

Request access to the private beta.