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.

Shopping Detail View

Details

Display an item to be purchased with description and pricing.

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 {
 Checkbox,
 Divider,
 Icon,
 ScreenContainer,
 Stepper,
 Touchable,
 withTheme,
} from '@draftbit/ui';
import {
 Image,
 ScrollView,
 StyleSheet,
 Text,
 TextInput,
 View,
} from 'react-native';
const REPLACE_SCREEN_NAME = props => {
 const [checkboxValue, setCheckboxValue] = React.useState(false);
 const [textInputValue, setTextInputValue] = React.useState(undefined);
 const [stepperValue, setStepperValue] = React.useState(undefined);
 const { theme } = props;
 return (
   <ScreenContainer
     style={{ backgroundColor: theme.colors.surface }}
     scrollable={false}
     hasSafeArea={false}
   >
     <Image
       style={styles.imageLi}
       source={Images.NadinePrimeauKD3XqquHlccUnsplash}
       resizeMode=""cover""
     />
     <ScrollView
       contentContainerStyle={StyleSheet.flatten([
         styles.scrollViewEF,
         {
           backgroundColor: theme.colors.surface,
           borderRadius: theme.borderRadius.button,
         },
       ])}
       horizontal={false}
       showsHorizontalScrollIndicator={true}
       showsVerticalScrollIndicator={true}
       bounces={true}
     >
       <View style={styles.view1R}>
         <Text
           style={StyleSheet.flatten([
             styles.text7A,
             theme.typography.headline5,
             { color: theme.colors.strong },
           ])}
         >
           Guacamole - Regular
         </Text>
         <Divider style={styles.divider7Z} color={theme.colors.medium} />
         <Text
           style={StyleSheet.flatten([
             styles.textK6,
             { color: theme.colors.medium },
           ])}
         >
           Fresh avocados, diced tomatoes mixed with Spanish onions, diced
           jalapenos, coriander and a squeeze of lemon juice.
         </Text>
         <View style={styles.viewQF}>
           <Icon
             style={styles.iconJi}
             size={16}
             name=""MaterialCommunityIcons/check-decagram""
             color={theme.colors.custom_rgb17_217_0}
           />
           <Text
             style={StyleSheet.flatten([
               theme.typography.caption,
               { color: theme.colors.light },
             ])}
           >
             Gluten Free
           </Text>
         </View>
       </View>
       <View
         style={StyleSheet.flatten([
           styles.view4P,
           { backgroundColor: theme.colors.divider },
         ])}
       >
         <Text
           style={StyleSheet.flatten([
             theme.typography.overline,
             { color: theme.colors.medium },
           ])}
         >
           ADD ON
         </Text>
       </View>
       <View style={styles.viewUd}>
         <View style={styles.viewP5}>
           <Checkbox
             status={checkboxValue ? 'checked' : 'unchecked'}
             onPress={() => setCheckboxValue(!checkboxValue)}
           />
           <Text
             style={StyleSheet.flatten([
               styles.textFb,
               { color: theme.colors.strong },
             ])}
           >
             Corn Chips
           </Text>
         </View>
         <Text style={{ color: theme.colors.medium }}>+ $2.00</Text>
       </View>
       <View
         style={StyleSheet.flatten([
           styles.view95,
           { backgroundColor: theme.colors.divider },
         ])}
       >
         <Text
           style={StyleSheet.flatten([
             theme.typography.overline,
             { color: theme.colors.medium },
           ])}
         >
           SPECIAL INSTRUCTIONS
         </Text>
       </View>
       <View
         style={StyleSheet.flatten([
           styles.view3H,
           { borderColor: theme.colors.divider },
         ])}
       >
         <TextInput
           style={styles.textInputV4}
           editable={true}
           placeholder=""Add a note (extra sauce, no onion, etc)""
           multiline={true}
           onChangeText={textInputValue => setTextInputValue(textInputValue)}
           color={theme.colors.strong}
           value={textInputValue}
         />
       </View>
       <View
         style={StyleSheet.flatten([
           styles.viewBR,
           {
             borderColor: theme.colors.light,
             borderRadius: theme.borderRadius.button,
           },
         ])}
       >
         <Stepper
           value={stepperValue}
           onChange={stepperValue => setStepperValue(stepperValue)}
         />
       </View>
     </ScrollView>
     <Touchable style={styles.touchableYM}>
       <View
         style={StyleSheet.flatten([
           styles.viewQu,
           {
             borderRadius: theme.borderRadius.button,
             backgroundColor: theme.colors.primary,
           },
         ])}
       >
         <Text
           style={StyleSheet.flatten([
             styles.textGD,
             theme.typography.button,
             { color: theme.colors.surface },
           ])}
         >
           ADD 1 TO CART
         </Text>
       </View>
     </Touchable>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 text7A: {
   textAlign: 'center',
 },
 view1R: {
   paddingLeft: 24,
   paddingRight: 24,
   paddingBottom: 24,
   paddingTop: 24,
 },
 viewP5: {
   flexDirection: 'row',
   alignItems: 'center',
 },
 textGD: {
   textAlign: 'center',
 },
 viewQu: {
   paddingLeft: 16,
   paddingRight: 16,
   alignItems: 'center',
   paddingTop: 16,
   paddingBottom: 16,
   justifyContent: 'center',
   flexDirection: 'row',
 },
 imageLi: {
   position: 'absolute',
   height: 350,
   width: '100%',
 },
 iconJi: {
   width: 24,
   height: 24,
 },
 textInputV4: {
   marginLeft: 16,
 },
 scrollViewEF: {
   marginTop: 200,
   paddingBottom: 100,
 },
 view4P: {
   paddingTop: 8,
   paddingLeft: 16,
   paddingBottom: 8,
   paddingRight: 16,
 },
 textFb: {
   marginLeft: 16,
 },
 divider7Z: {
   height: 1,
   alignSelf: 'center',
   width: 32,
   marginTop: 16,
   marginBottom: 16,
 },
 textK6: {
   textAlign: 'center',
 },
 viewUd: {
   paddingBottom: 16,
   paddingTop: 16,
   justifyContent: 'space-between',
   alignItems: 'center',
   flexDirection: 'row',
   paddingRight: 16,
   paddingLeft: 16,
 },
 touchableYM: {
   paddingLeft: 16,
   paddingBottom: 16,
   marginBottom: 48,
   paddingTop: 16,
   paddingRight: 16,
 },
 viewQF: {
   marginTop: 12,
   flexDirection: 'row',
   alignSelf: 'center',
 },
 view95: {
   paddingRight: 16,
   paddingLeft: 16,
   paddingBottom: 8,
   paddingTop: 8,
 },
 view3H: {
   borderBottomWidth: 1,
   paddingRight: 16,
   paddingBottom: 16,
   marginTop: 16,
 },
 viewBR: {
   borderRightWidth: 1,
   borderTopWidth: 1,
   marginTop: 32,
   alignSelf: 'center',
   paddingRight: 8,
   paddingLeft: 8,
   paddingBottom: 16,
   paddingTop: 16,
   borderLeftWidth: 1,
   borderBottomWidth: 1,
   marginBottom: 100,
 },
});
export default withTheme(REPLACE_SCREEN_NAME);

Screen Variants:

Additional Details

Changelog

No items found.

Request access to the private beta.