-- CODE language-jsx --
import React from 'react';
import { Icon, ScreenContainer, Touchable, withTheme } from '@draftbit/ui';
import { KeyboardAvoidingView, StyleSheet, Text, View } from 'react-native';
const REPLACE_SCREEN_NAME = props => {
const { theme } = props;
return (
<ScreenContainer scrollable={true} hasSafeArea={true}>
<KeyboardAvoidingView
style={styles.keyboardAvoidingViewIa}
behavior=""position""
keyboardVerticalOffset={44}
enabled={false}
>
<View style={styles.viewAa}>
<Text
style={StyleSheet.flatten([
theme.typography.headline3,
{ color: theme.colors.strong },
])}
>
Home
</Text>
<View
style={styles.viewUT}
hitSlop={{}}
accessible={true}
pointerEvents=""auto""
>
<Text
style={StyleSheet.flatten([
theme.typography.headline5,
{ color: theme.colors.strong },
])}
ellipsizeMode=""tail""
textBreakStrategy=""highQuality""
allowFontScaling={true}
accessible={true}
>
Categories
</Text>
<Touchable style={styles.touchableNn}>
<Text
style={StyleSheet.flatten([
theme.typography.headline5,
{ color: theme.colors.primary },
])}
ellipsizeMode=""tail""
allowFontScaling={true}
textBreakStrategy=""highQuality""
accessible={true}
>
See All
</Text>
</Touchable>
</View>
</View>
<View style={styles.view6S} needsOffscreenAlphaCompositing={false}>
<Touchable style={styles.touchableDe}>
<View
style={StyleSheet.flatten([
styles.viewKW,
{
borderRadius: theme.borderRadius.global,
borderColor: theme.colors.divider,
backgroundColor: theme.colors.background,
},
])}
>
<View
style={styles.viewDv}
pointerEvents=""auto""
hitSlop={{}}
accessible={true}
>
<Text
style={StyleSheet.flatten([
styles.textFo,
theme.typography.headline6,
{ color: theme.colors.strong },
])}
allowFontScaling={true}
>
Title
</Text>
<Text
style={StyleSheet.flatten([
styles.textOd,
theme.typography.subtitle1,
{ color: theme.colors.medium },
])}
allowFontScaling={true}
>
Description
</Text>
</View>
<View
style={styles.viewAv}
hitSlop={{}}
pointerEvents=""auto""
accessible={true}
>
<Icon
style={styles.icon95}
size={24}
color={theme.colors.strong}
name=""Entypo/bar-graph""
/>
</View>
</View>
</Touchable>
<Touchable style={styles.touchableE5}>
<View
style={StyleSheet.flatten([
styles.viewEe,
{
borderColor: theme.colors.divider,
backgroundColor: theme.colors.background,
borderRadius: theme.borderRadius.global,
},
])}
>
<View
style={styles.viewKC}
hitSlop={{}}
accessible={true}
pointerEvents=""auto""
>
<Text
style={StyleSheet.flatten([
styles.textIh,
theme.typography.headline6,
{ color: theme.colors.strong },
])}
allowFontScaling={true}
>
Title
</Text>
<Text
style={StyleSheet.flatten([
styles.text9V,
theme.typography.subtitle1,
{ color: theme.colors.medium },
])}
allowFontScaling={true}
>
Description
</Text>
</View>
<View
style={styles.viewMu}
pointerEvents=""auto""
hitSlop={{}}
accessible={true}
>
<Icon
style={styles.iconSb}
color={theme.colors.strong}
size={24}
name=""AntDesign/heart""
/>
</View>
</View>
</Touchable>
<Touchable style={styles.touchableXV}>
<View
style={StyleSheet.flatten([
styles.viewND,
{
borderColor: theme.colors.divider,
backgroundColor: theme.colors.background,
borderRadius: theme.borderRadius.global,
},
])}
>
<View
style={styles.viewLh}
hitSlop={{}}
accessible={true}
pointerEvents=""auto""
>
<Text
style={StyleSheet.flatten([
styles.textUe,
theme.typography.headline6,
{ color: theme.colors.strong },
])}
allowFontScaling={true}
>
Title
</Text>
<Text
style={StyleSheet.flatten([
styles.textNa,
theme.typography.subtitle1,
{ color: theme.colors.medium },
])}
allowFontScaling={true}
>
Description
</Text>
</View>
<View
style={styles.viewKb}
pointerEvents=""auto""
hitSlop={{}}
accessible={true}
>
<Icon
style={styles.iconZq}
color={theme.colors.strong}
size={24}
name=""Foundation/plus""
/>
</View>
</View>
</Touchable>
<Touchable style={styles.touchableI7}>
<View
style={StyleSheet.flatten([
styles.viewUH,
{
borderRadius: theme.borderRadius.global,
backgroundColor: theme.colors.background,
borderColor: theme.colors.divider,
},
])}
>
<View
style={styles.viewHm}
pointerEvents=""auto""
hitSlop={{}}
accessible={true}
>
<Text
style={StyleSheet.flatten([
styles.textKk,
theme.typography.headline6,
{ color: theme.colors.strong },
])}
allowFontScaling={true}
>
Title
</Text>
<Text
style={StyleSheet.flatten([
styles.textFx,
theme.typography.subtitle1,
{ color: theme.colors.medium },
])}
allowFontScaling={true}
>
Description
</Text>
</View>
<View
style={styles.viewOe}
hitSlop={{}}
pointerEvents=""auto""
accessible={true}
>
<Icon
style={styles.iconRl}
size={24}
name=""Ionicons/ios-body""
color={theme.colors.strong}
/>
</View>
</View>
</Touchable>
<Touchable style={styles.touchableO6}>
<View
style={StyleSheet.flatten([
styles.viewOn,
{
borderRadius: theme.borderRadius.global,
backgroundColor: theme.colors.background,
borderColor: theme.colors.divider,
},
])}
>
<View
style={styles.view6C}
pointerEvents=""auto""
hitSlop={{}}
accessible={true}
>
<Text
style={StyleSheet.flatten([
styles.textU2,
theme.typography.headline6,
{ color: theme.colors.strong },
])}
allowFontScaling={true}
>
Title
</Text>
<Text
style={StyleSheet.flatten([
styles.textBs,
theme.typography.subtitle1,
{ color: theme.colors.medium },
])}
allowFontScaling={true}
>
Description
</Text>
</View>
<View
style={styles.viewJ2}
hitSlop={{}}
pointerEvents=""auto""
accessible={true}
>
<Icon
style={styles.iconIk}
size={24}
name=""MaterialCommunityIcons/power-sleep""
color={theme.colors.strong}
/>
</View>
</View>
</Touchable>
<Touchable style={styles.touchableMa}>
<View
style={StyleSheet.flatten([
styles.view81,
{
borderRadius: theme.borderRadius.global,
backgroundColor: theme.colors.background,
borderColor: theme.colors.divider,
},
])}
>
<View
style={styles.viewQN}
accessible={true}
hitSlop={{}}
pointerEvents=""auto""
>
<Text
style={StyleSheet.flatten([
styles.textM4,
theme.typography.headline6,
{ color: theme.colors.strong },
])}
allowFontScaling={true}
>
Title
</Text>
<Text
style={StyleSheet.flatten([
styles.textRk,
theme.typography.subtitle1,
{ color: theme.colors.medium },
])}
allowFontScaling={true}
>
Description
</Text>
</View>
<View
style={styles.viewTq}
pointerEvents=""auto""
accessible={true}
hitSlop={{}}
>
<Icon
style={styles.iconGj}
name=""MaterialIcons/visibility""
size={24}
color={theme.colors.strong}
/>
</View>
</View>
</Touchable>
</View>
</KeyboardAvoidingView>
</ScreenContainer>
);
};
const styles = StyleSheet.create({
textFo: {
textAlign: 'left',
},
viewDv: {
marginBottom: 24,
},
textIh: {
textAlign: 'left',
},
viewKC: {
marginBottom: 24,
},
textUe: {
textAlign: 'left',
},
viewLh: {
marginBottom: 24,
},
textKk: {
textAlign: 'left',
},
viewHm: {
marginBottom: 24,
},
textU2: {
textAlign: 'left',
},
view6C: {
marginBottom: 24,
},
textM4: {
textAlign: 'left',
},
viewQN: {
marginBottom: 24,
},
keyboardAvoidingViewIa: {
flexGrow: 1,
justifyContent: 'space-around',
},
viewAa: {
paddingTop: 32,
alignItems: 'flex-start',
paddingBottom: 14,
paddingLeft: 32,
paddingRight: 32,
},
viewKW: {
width: '100%',
height: 140,
paddingLeft: 14,
paddingRight: 14,
paddingBottom: 14,
paddingTop: 14,
justifyContent: 'space-around',
alignItems: 'flex-start',
borderBottomWidth: 1,
borderLeftWidth: 1,
borderTopWidth: 1,
borderRightWidth: 1,
},
touchableDe: {
width: '45%',
marginBottom: 14,
marginTop: 14,
alignSelf: 'stretch',
},
viewEe: {
paddingRight: 14,
paddingBottom: 14,
paddingTop: 14,
justifyContent: 'space-around',
alignItems: 'flex-start',
borderBottomWidth: 1,
borderLeftWidth: 1,
borderTopWidth: 1,
borderRightWidth: 1,
width: '100%',
height: 140,
paddingLeft: 14,
},
viewND: {
paddingRight: 14,
paddingBottom: 14,
paddingTop: 14,
justifyContent: 'space-around',
alignItems: 'flex-start',
borderBottomWidth: 1,
borderLeftWidth: 1,
borderTopWidth: 1,
borderRightWidth: 1,
width: '100%',
height: 140,
paddingLeft: 14,
},
viewUH: {
borderRightWidth: 1,
width: '100%',
height: 140,
paddingLeft: 14,
borderBottomWidth: 1,
alignItems: 'flex-start',
justifyContent: 'space-around',
paddingTop: 14,
paddingBottom: 14,
paddingRight: 14,
borderLeftWidth: 1,
borderTopWidth: 1,
},
viewOn: {
paddingTop: 14,
paddingBottom: 14,
paddingRight: 14,
borderLeftWidth: 1,
borderTopWidth: 1,
justifyContent: 'space-around',
alignItems: 'flex-start',
borderBottomWidth: 1,
paddingLeft: 14,
height: 140,
width: '100%',
borderRightWidth: 1,
},
view81: {
width: '100%',
borderRightWidth: 1,
alignItems: 'flex-start',
justifyContent: 'space-around',
borderTopWidth: 1,
borderLeftWidth: 1,
paddingRight: 14,
paddingBottom: 14,
paddingTop: 14,
borderBottomWidth: 1,
paddingLeft: 14,
height: 140,
},
icon95: {
width: 24,
height: 24,
},
iconSb: {
height: 24,
width: 24,
},
iconZq: {
height: 24,
width: 24,
},
iconRl: {
height: 24,
width: 24,
},
iconIk: {
width: 24,
height: 24,
},
iconGj: {
width: 24,
height: 24,
},
viewUT: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
marginTop: 24,
marginBottom: 14,
},
textOd: {
textAlign: 'left',
},
viewAv: {
width: 42,
justifyContent: 'center',
alignItems: 'center',
height: 42,
},
text9V: {
textAlign: 'left',
},
viewMu: {
justifyContent: 'center',
width: 42,
height: 42,
alignItems: 'center',
},
textNa: {
textAlign: 'left',
},
viewKb: {
justifyContent: 'center',
width: 42,
height: 42,
alignItems: 'center',
},
textFx: {
textAlign: 'left',
},
viewOe: {
width: 42,
justifyContent: 'center',
alignItems: 'center',
height: 42,
},
textBs: {
textAlign: 'left',
},
viewJ2: {
justifyContent: 'center',
width: 42,
height: 42,
alignItems: 'center',
},
textRk: {
textAlign: 'left',
},
viewTq: {
justifyContent: 'center',
alignItems: 'center',
height: 42,
width: 42,
},
view6S: {
justifyContent: 'space-between',
paddingLeft: 32,
alignItems: 'flex-start',
paddingRight: 32,
flexWrap: 'wrap',
paddingBottom: 72,
flexDirection: 'row',
},
touchableNn: {
alignSelf: 'flex-end',
justifyContent: 'center',
},
touchableE5: {
alignSelf: 'stretch',
marginTop: 14,
marginBottom: 14,
width: '45%',
},
touchableXV: {
alignSelf: 'stretch',
marginTop: 14,
marginBottom: 14,
width: '45%',
},
touchableI7: {
alignSelf: 'stretch',
marginTop: 14,
marginBottom: 14,
width: '45%',
},
touchableO6: {
alignSelf: 'stretch',
marginTop: 14,
marginBottom: 14,
width: '45%',
},
touchableMa: {
alignSelf: 'stretch',
marginTop: 14,
marginBottom: 14,
width: '45%',
},
});
export default withTheme(REPLACE_SCREEN_NAME);
