-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import {
Button,
Divider,
Icon,
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 hasSafeArea={true} scrollable={true}>
<ScrollView
contentContainerStyle={styles.scrollViewIp}
showsVerticalScrollIndicator={true}
bounces={true}
showsHorizontalScrollIndicator={false}
>
<View style={styles.viewYZ}>
<Image
style={styles.image6J}
resizeMode=""contain""
source={Images.ImagePlaceholder}
/>
<View
style={styles.viewSm}
pointerEvents=""auto""
hitSlop={{}}
importantForAccessibility=""auto""
accessible={true}
>
<Text
style={StyleSheet.flatten([
styles.textUV,
theme.typography.headline4,
{ color: theme.colors.strong },
])}
>
Product Name
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.subtitle1,
{ color: theme.colors.medium },
])}
>
Product Description
</Text>
</View>
</View>
<View
style={styles.viewA9}
hitSlop={{}}
pointerEvents=""auto""
accessible={true}
importantForAccessibility=""auto""
>
<Touchable style={styles.touchableOy}>
<View
style={styles.viewXj}
pointerEvents=""auto""
accessible={true}
hitSlop={{}}
importantForAccessibility=""auto""
>
<Icon
style={styles.iconVD}
size={20}
name=""MaterialCommunityIcons/pound""
color={theme.colors.primary}
/>
<Text
style={StyleSheet.flatten([
styles.text2Q,
theme.typography.subtitle2,
{ color: theme.colors.primary },
])}
textBreakStrategy=""highQuality""
allowFontScaling={true}
ellipsizeMode=""tail""
accessible={true}
>
Tracking Number
</Text>
</View>
</Touchable>
</View>
<View
style={styles.viewNu}
pointerEvents=""auto""
importantForAccessibility=""auto""
accessible={true}
hitSlop={{}}
>
<View
style={styles.viewWz}
hitSlop={{}}
pointerEvents=""auto""
accessible={true}
importantForAccessibility=""auto""
>
<Text
style={StyleSheet.flatten([
theme.typography.headline5,
{ color: theme.colors.strong },
])}
allowFontScaling={true}
accessible={true}
textBreakStrategy=""highQuality""
ellipsizeMode=""tail""
>
Order Details
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.subtitle1,
{ color: theme.colors.strong },
])}
accessible={true}
ellipsizeMode=""tail""
allowFontScaling={true}
textBreakStrategy=""highQuality""
>
Order #
</Text>
</View>
<View
style={styles.viewPM}
importantForAccessibility=""auto""
accessible={true}
pointerEvents=""auto""
hitSlop={{}}
>
<View
style={styles.viewLu}
pointerEvents=""auto""
importantForAccessibility=""auto""
hitSlop={{}}
accessible={true}
>
<View
importantForAccessibility=""auto""
pointerEvents=""auto""
accessible={true}
hitSlop={{}}
>
<Text
style={StyleSheet.flatten([
theme.typography.caption,
{ color: theme.colors.medium },
])}
accessible={true}
ellipsizeMode=""tail""
allowFontScaling={true}
textBreakStrategy=""highQuality""
>
Order Total
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.headline4,
{ color: theme.colors.strong },
])}
accessible={true}
textBreakStrategy=""highQuality""
allowFontScaling={true}
ellipsizeMode=""tail""
>
$0.00
</Text>
</View>
</View>
</View>
<Divider
style={styles.dividerEa}
color={theme.colors.divider}
height={1}
/>
<View
style={styles.view03}
accessible={true}
pointerEvents=""auto""
importantForAccessibility=""auto""
hitSlop={{}}
>
<View
style={styles.view2X}
hitSlop={{}}
pointerEvents=""auto""
accessible={true}
importantForAccessibility=""auto""
>
<View
pointerEvents=""auto""
hitSlop={{}}
accessible={true}
importantForAccessibility=""auto""
>
<Text
style={StyleSheet.flatten([
theme.typography.caption,
{ color: theme.colors.medium },
])}
allowFontScaling={true}
textBreakStrategy=""highQuality""
accessible={true}
ellipsizeMode=""tail""
>
Order Date
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.headline4,
{ color: theme.colors.strong },
])}
ellipsizeMode=""tail""
textBreakStrategy=""highQuality""
allowFontScaling={true}
accessible={true}
>
DD/MM/YY
</Text>
</View>
</View>
</View>
<Divider
style={styles.divider88}
height={1}
color={theme.colors.divider}
/>
<View
style={styles.viewPR}
accessible={true}
hitSlop={{}}
importantForAccessibility=""auto""
pointerEvents=""auto""
>
<View
style={styles.viewBg}
importantForAccessibility=""auto""
accessible={true}
pointerEvents=""auto""
hitSlop={{}}
>
<Text
style={StyleSheet.flatten([
theme.typography.caption,
{ color: theme.colors.medium },
])}
textBreakStrategy=""highQuality""
accessible={true}
ellipsizeMode=""tail""
allowFontScaling={true}
>
Address
</Text>
<View
style={styles.viewMv}
hitSlop={{}}
importantForAccessibility=""auto""
pointerEvents=""auto""
accessible={true}
>
<Text
style={StyleSheet.flatten([
theme.typography.headline6,
{ color: theme.colors.strong },
])}
ellipsizeMode=""tail""
accessible={true}
allowFontScaling={true}
textBreakStrategy=""highQuality""
>
Customer Name
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.headline6,
{ color: theme.colors.strong },
])}
allowFontScaling={true}
textBreakStrategy=""highQuality""
accessible={true}
ellipsizeMode=""tail""
>
Street Name
</Text>
<View
style={styles.viewJ3}
pointerEvents=""auto""
accessible={true}
importantForAccessibility=""auto""
hitSlop={{}}
>
<Text
style={StyleSheet.flatten([
styles.textLr,
theme.typography.headline6,
{ color: theme.colors.strong },
])}
allowFontScaling={true}
textBreakStrategy=""highQuality""
accessible={true}
ellipsizeMode=""tail""
>
City
</Text>
<Text
style={StyleSheet.flatten([
styles.textWP,
theme.typography.headline6,
{ color: theme.colors.strong },
])}
textBreakStrategy=""highQuality""
accessible={true}
ellipsizeMode=""tail""
allowFontScaling={true}
>
State
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.headline6,
{ color: theme.colors.strong },
])}
textBreakStrategy=""highQuality""
accessible={true}
ellipsizeMode=""tail""
allowFontScaling={true}
>
ZIP
</Text>
</View>
<Text
style={StyleSheet.flatten([
theme.typography.headline6,
{ color: theme.colors.strong },
])}
accessible={true}
ellipsizeMode=""tail""
allowFontScaling={true}
textBreakStrategy=""highQuality""
>
Country
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.headline6,
{ color: theme.colors.strong },
])}
textBreakStrategy=""highQuality""
accessible={true}
allowFontScaling={true}
ellipsizeMode=""tail""
>
Phone Number
</Text>
</View>
</View>
</View>
<Divider
style={styles.dividerTS}
height={1}
color={theme.colors.divider}
/>
</View>
<View
style={styles.viewT1}
pointerEvents=""auto""
hitSlop={{}}
accessible={true}
importantForAccessibility=""auto""
>
<View
style={styles.viewYm}
importantForAccessibility=""auto""
pointerEvents=""auto""
accessible={true}
hitSlop={{}}
>
<Text
style={StyleSheet.flatten([
theme.typography.headline5,
{ color: theme.colors.strong },
])}
accessible={true}
allowFontScaling={true}
ellipsizeMode=""tail""
textBreakStrategy=""highQuality""
>
Store
</Text>
</View>
<View
style={styles.viewAv}
importantForAccessibility=""auto""
accessible={true}
hitSlop={{}}
pointerEvents=""auto""
>
<View
style={styles.viewUi}
accessible={true}
importantForAccessibility=""auto""
pointerEvents=""auto""
hitSlop={{}}
>
<View
style={styles.viewXq}
accessible={true}
pointerEvents=""auto""
importantForAccessibility=""auto""
hitSlop={{}}
>
<Image
style={styles.imageJZ}
resizeMode=""contain""
source={Images.ImagePlaceholder}
/>
</View>
<View
style={styles.viewHe}
accessible={true}
hitSlop={{}}
pointerEvents=""auto""
importantForAccessibility=""auto""
>
<Text
style={StyleSheet.flatten([
theme.typography.headline6,
{ color: theme.colors.strong },
])}
allowFontScaling={true}
textBreakStrategy=""highQuality""
accessible={true}
ellipsizeMode=""tail""
>
Store Name
</Text>
<Text
style={StyleSheet.flatten([
styles.text6I,
theme.typography.subtitle1,
{ color: theme.colors.medium },
])}
accessible={true}
textBreakStrategy=""highQuality""
allowFontScaling={true}
ellipsizeMode=""tail""
>
Store Description
</Text>
</View>
</View>
</View>
<Button
style={StyleSheet.flatten([
styles.buttonJk,
{ borderRadius: theme.borderRadius.global },
])}
type=""solid""
>
Visit Store
</Button>
</View>
</ScrollView>
</ScreenContainer>
);
};
const styles = StyleSheet.create({
viewXj: {
alignItems: 'center',
flexDirection: 'row',
},
viewWz: {
alignItems: 'center',
justifyContent: 'space-between',
flexDirection: 'row',
width: '100%',
marginTop: 17,
},
viewLu: {
width: '100%',
alignItems: 'flex-start',
flexDirection: 'row',
},
view2X: {
flexDirection: 'row',
width: '100%',
alignItems: 'flex-start',
},
textLr: {
marginRight: 4,
},
viewBg: {
width: '100%',
},
viewYm: {
flexDirection: 'row',
width: '100%',
justifyContent: 'space-between',
alignItems: 'center',
},
viewXq: {
width: 40,
height: 40,
marginRight: 14,
},
viewUi: {
flexDirection: 'row',
alignItems: 'flex-start',
maxWidth: '80%',
width: '100%',
},
scrollViewIp: {
flexGrow: 1,
},
textUV: {
marginBottom: 6,
},
viewYZ: {
paddingBottom: 14,
paddingTop: 44,
paddingLeft: 32,
paddingRight: 32,
alignItems: 'flex-start',
flexDirection: 'row',
},
touchableOy: {
flexWrap: 'wrap',
},
image6J: {
height: 86,
marginRight: 24,
width: 86,
},
iconVD: {
alignSelf: 'flex-start',
width: 24,
height: 24,
},
imageJZ: {
height: 40,
width: 40,
},
viewSm: {
alignItems: 'flex-start',
},
text2Q: {
marginLeft: 8,
},
viewA9: {
paddingLeft: 32,
paddingRight: 32,
marginTop: 24,
},
viewPM: {
paddingTop: 12,
paddingBottom: 12,
marginBottom: 12,
flexDirection: 'row',
alignItems: 'flex-start',
justifyContent: 'space-between',
width: '100%',
marginTop: 12,
},
textWP: {
marginRight: 4,
},
viewMv: {
width: '100%',
},
text6I: {
marginBottom: 8,
},
viewHe: {
paddingRight: 34,
},
viewAv: {
flexDirection: 'row',
alignItems: 'flex-start',
justifyContent: 'space-between',
width: '100%',
paddingBottom: 12,
paddingTop: 12,
marginTop: 12,
marginBottom: 12,
},
viewJ3: {
flexDirection: 'row',
alignItems: 'center',
width: '100%',
},
viewNu: {
paddingBottom: 17,
paddingTop: 17,
paddingRight: 32,
paddingLeft: 32,
},
buttonJk: {
height: 54,
alignItems: 'center',
justifyContent: 'center',
width: '100%',
},
dividerEa: {
height: 1,
},
view03: {
marginTop: 12,
paddingTop: 12,
paddingBottom: 12,
marginBottom: 12,
flexDirection: 'row',
alignItems: 'flex-start',
justifyContent: 'space-between',
width: '100%',
},
viewT1: {
paddingBottom: 54,
paddingLeft: 32,
paddingTop: 17,
paddingRight: 32,
},
divider88: {
height: 1,
},
viewPR: {
flexDirection: 'row',
alignItems: 'flex-start',
justifyContent: 'space-between',
width: '100%',
marginTop: 12,
paddingTop: 12,
paddingBottom: 12,
marginBottom: 12,
},
dividerTS: {
height: 1,
},
});
export default withTheme(REPLACE_SCREEN_NAME);