-- 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);