-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import {
Button,
Container,
Icon,
ScreenContainer,
Touchable,
withTheme,
} from '@draftbit/ui';
import { Image, ImageBackground, StyleSheet, Text, View } from 'react-native';
const REPLACE_SCREEN_NAME = props => {
const { theme } = props;
return (
<ScreenContainer
style={styles.screenContainerJb}
scrollable={true}
hasSafeArea={false}
>
<ImageBackground
style={styles.imageBackgroundNb}
source={Images.ErikmcleannTCtYYyVqSYunsplash}
resizeMode=""cover""
/>
<Container
style={styles.containerEA}
elevation={0}
useThemeGutterPadding={true}
>
<Image
style={StyleSheet.flatten([
styles.imageA3,
{ borderRadius: theme.borderRadius.global },
])}
resizeMode=""cover""
source={Images.Model024}
/>
<Text
style={StyleSheet.flatten([
styles.textPr,
theme.typography.headline3,
])}
>
Jessica Green
</Text>
<Button style={styles.buttonP2} type=""outline"">
Edit Profile
</Button>
</Container>
<Container useThemeGutterPadding={true} elevation={0}>
<Touchable
style={StyleSheet.flatten([
styles.touchableOk,
{ borderColor: theme.colors.divider },
])}
>
<View style={styles.viewKs}>
<Text style={theme.typography.body1}>Privacy Settings</Text>
<Icon
style={styles.iconFE}
size={24}
color={theme.colors.strong}
name=""MaterialIcons/account-circle""
/>
</View>
</Touchable>
<Touchable
style={StyleSheet.flatten([
styles.touchableOm,
{ borderColor: theme.colors.divider },
])}
>
<View style={styles.viewYR}>
<Text style={theme.typography.body1}>Notifications</Text>
<Icon
style={styles.iconCl}
color={theme.colors.strong}
name=""MaterialIcons/notifications""
size={24}
/>
</View>
</Touchable>
<Touchable
style={StyleSheet.flatten([
styles.touchableBp,
{ borderColor: theme.colors.divider },
])}
>
<View style={styles.viewS1}>
<Text style={theme.typography.body1}>Order History</Text>
<Icon
style={styles.iconZz}
color={theme.colors.strong}
size={24}
name=""MaterialIcons/history""
/>
</View>
</Touchable>
<Touchable
style={StyleSheet.flatten([
styles.touchableJg,
{ borderColor: theme.colors.divider },
])}
>
<View style={styles.viewAl}>
<Text style={theme.typography.body1}>Payment Details</Text>
<Icon
style={styles.iconZb}
size={24}
name=""MaterialIcons/payment""
color={theme.colors.strong}
/>
</View>
</Touchable>
</Container>
</ScreenContainer>
);
};
const styles = StyleSheet.create({
screenContainerJb: {
justifyContent: 'space-evenly',
},
viewKs: {
justifyContent: 'space-between',
flexDirection: 'row',
},
viewYR: {
justifyContent: 'space-between',
flexDirection: 'row',
},
viewS1: {
flexDirection: 'row',
justifyContent: 'space-between',
},
viewAl: {
justifyContent: 'space-between',
flexDirection: 'row',
},
imageBackgroundNb: {
width: '100%',
height: 250,
},
imageA3: {
height: 120,
width: 120,
},
containerEA: {
alignItems: 'center',
marginTop: -65,
},
textPr: {
width: '100%',
textAlign: 'center',
marginTop: 16,
},
touchableOk: {
borderTopWidth: 1,
paddingTop: 12,
paddingBottom: 12,
marginTop: 32,
},
iconFE: {
height: 24,
width: 24,
},
iconCl: {
width: 24,
height: 24,
},
iconZz: {
width: 24,
height: 24,
},
iconZb: {
height: 24,
width: 24,
},
buttonP2: {
marginTop: 16,
alignSelf: 'center',
width: '50%',
},
touchableOm: {
paddingBottom: 12,
paddingTop: 12,
borderTopWidth: 1,
},
touchableBp: {
paddingBottom: 12,
paddingTop: 12,
borderTopWidth: 1,
},
touchableJg: {
paddingBottom: 12,
paddingTop: 12,
borderTopWidth: 1,
},
});
export default withTheme(REPLACE_SCREEN_NAME);