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