-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import { Button, Container, ScreenContainer, withTheme } from '@draftbit/ui';
import { Image, StyleSheet, Text } from 'react-native';
const REPLACE_SCREEN_NAME = props => {
 const { theme } = props;
 return (
   <ScreenContainer scrollable={false} hasSafeArea={false}>
     <Image style={styles.image6L} source={Images.Ramen} resizeMode=""cover"" />
     <Container
       style={styles.container8I}
       elevation={0}
       useThemeGutterPadding={true}
     >
       <Text
         style={StyleSheet.flatten([
           styles.textRl,
           theme.typography.headline4,
           { color: theme.colors.strong },
         ])}
       >
         Spicy Miso Ramen
       </Text>
       <Text
         style={StyleSheet.flatten([
           styles.textBI,
           theme.typography.subtitle2,
           { color: theme.colors.medium },
         ])}
       >
         Ground pork, kung pao chilies, and napa cabbage. All ramen are served
         with tokyo wavy noodles from sun noodle.
       </Text>
       <Text
         style={StyleSheet.flatten([
           styles.textPd,
           theme.typography.caption,
           { color: theme.colors.light },
         ])}
       >
         840 Cal.
       </Text>
       <Text
         style={StyleSheet.flatten([
           styles.textQe,
           theme.typography.headline5,
           { color: theme.colors.primary },
         ])}
       >
         $ 12.99
       </Text>
     </Container>
     <Container
       style={StyleSheet.flatten([
         styles.container5V,
         { backgroundColor: theme.colors.divider },
       ])}
       elevation={0}
       useThemeGutterPadding={true}
     >
       <Button
         style={styles.buttonHZ}
         type=""solid""
         color={theme.colors.primary}
       >
         Add To Cart
       </Button>
     </Container>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 buttonHZ: {
   width: '100%',
   height: 48,
 },
 textRl: {
   width: '100%',
   textAlign: 'auto',
 },
 image6L: {
   width: '100%',
   height: '35%',
 },
 container8I: {
   paddingTop: 16,
   paddingBottom: 16,
 },
 textBI: {
   width: '100%',
   marginTop: 8,
   textAlign: 'auto',
 },
 container5V: {
   paddingBottom: 40,
   flexGrow: 1,
   alignItems: 'center',
   justifyContent: 'flex-end',
 },
 textPd: {
   width: '100%',
   marginTop: 8,
   textAlign: 'auto',
 },
 textQe: {
   marginTop: 16,
   textAlign: 'left',
 },
});
export default withTheme(REPLACE_SCREEN_NAME);