-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import {
 Container,
 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
     style={{ backgroundColor: theme.colors.divider }}
     scrollable={false}
     hasSafeArea={true}
   >
     <View
       style={StyleSheet.flatten([
         styles.viewEb,
         { backgroundColor: theme.colors.background },
       ])}
     >
       <Touchable>
         <Text
           style={StyleSheet.flatten([
             theme.typography.button,
             { color: theme.colors.primary },
           ])}
         >
           Sections
         </Text>
       </Touchable>
       <Image
         style={styles.image52}
         source={Images.CommunityIcon}
         resizeMode=""contain""
       />
       <Touchable>
         <Icon
           style={styles.iconVo}
           size={24}
           color={theme.colors.primary}
           name=""AntDesign/search1""
         />
       </Touchable>
     </View>
     <Container
       style={{ backgroundColor: theme.colors.strong }}
       elevation={0}
       useThemeGutterPadding={false}
     >
       <ScrollView
         contentContainerStyle={StyleSheet.flatten([
           styles.scrollViewWp,
           { backgroundColor: theme.colors.strong },
         ])}
         showsHorizontalScrollIndicator={false}
         showsVerticalScrollIndicator={false}
         horizontal={true}
         bounces={true}
       >
         <View style={styles.viewQv}>
           <Text
             style={StyleSheet.flatten([
               styles.textKh,
               { color: theme.colors.surface },
             ])}
           >
             NIKKEI
           </Text>
           <Text
             style={StyleSheet.flatten([
               styles.textRu,
               { color: theme.colors.primary },
             ])}
           >
             -0.35%
           </Text>
           <Icon
             style={styles.iconRt}
             color={theme.colors.primary}
             size={24}
             name=""Ionicons/md-arrow-dropdown""
           />
         </View>
         <View style={styles.viewWp}>
           <Text
             style={StyleSheet.flatten([
               styles.textSs,
               { color: theme.colors.surface },
             ])}
           >
             NIKKEI
           </Text>
           <Text
             style={StyleSheet.flatten([
               styles.textOn,
               { color: theme.colors.primary },
             ])}
           >
             -0.35%
           </Text>
           <Icon
             style={styles.iconS3}
             name=""Ionicons/md-arrow-dropdown""
             size={24}
             color={theme.colors.primary}
           />
         </View>
         <View style={styles.viewNx}>
           <Text
             style={StyleSheet.flatten([
               styles.text59,
               { color: theme.colors.surface },
             ])}
           >
             NIKKEI
           </Text>
           <Text
             style={StyleSheet.flatten([
               styles.textLf,
               { color: theme.colors.primary },
             ])}
           >
             -0.35%
           </Text>
           <Icon
             style={styles.iconIb}
             size={24}
             color={theme.colors.primary}
             name=""Ionicons/md-arrow-dropdown""
           />
         </View>
         <View style={styles.viewK8}>
           <Text
             style={StyleSheet.flatten([
               styles.textGc,
               { color: theme.colors.surface },
             ])}
           >
             NIKKEI
           </Text>
           <Text
             style={StyleSheet.flatten([
               styles.textOf,
               { color: theme.colors.primary },
             ])}
           >
             -0.35%
           </Text>
           <Icon
             style={styles.iconFR}
             size={24}
             color={theme.colors.primary}
             name=""Ionicons/md-arrow-dropdown""
           />
         </View>
       </ScrollView>
     </Container>
     <ScrollView
       showsVerticalScrollIndicator={true}
       bounces={true}
       horizontal={false}
       showsHorizontalScrollIndicator={true}
     >
       <Container
         style={{ backgroundColor: theme.colors.background }}
         elevation={0}
         useThemeGutterPadding={false}
       >
         <Image
           style={styles.image8L}
           source={Images.DraftbitTeamPhotoInno}
           resizeMode=""cover""
         />
         <View style={styles.viewW2}>
           <Text
             style={StyleSheet.flatten([
               theme.typography.headline4,
               { color: theme.colors.strong },
             ])}
           >
             YC-Backed Draftbit Wants to Help Companies Easily Make Mobile Apps
           </Text>
           <Text
             style={StyleSheet.flatten([
               theme.typography.body2,
               { color: theme.colors.light },
             ])}
           >
             A group of Chicago tech veterans has launched a startup that aims
             to help businesses more easily build mobile apps. And after a
             stint at Silicon Valley accelerator Y Combinator, it’s ready to
             grow its team.
           </Text>
           <View style={styles.viewXC}>
             <Text style={{ color: theme.colors.light }}>APR 22</Text>
             <View style={styles.viewKU}>
               <Touchable>
                 <Icon
                   style={styles.iconXb}
                   size={24}
                   name=""FontAwesome/bookmark-o""
                   color={theme.colors.light}
                 />
               </Touchable>
               <Touchable>
                 <Icon
                   style={styles.iconEK}
                   name=""Feather/share""
                   size={24}
                   color={theme.colors.light}
                 />
               </Touchable>
             </View>
           </View>
         </View>
       </Container>
       <Container
         style={StyleSheet.flatten([
           styles.containerPz,
           { backgroundColor: theme.colors.background },
         ])}
         useThemeGutterPadding={false}
         elevation={0}
       >
         <View style={styles.viewRv}>
           <Text
             style={StyleSheet.flatten([
               theme.typography.headline4,
               { color: theme.colors.strong },
             ])}
           >
             Announcing React Native 0.63 with LogBox
           </Text>
           <Text
             style={StyleSheet.flatten([
               theme.typography.body2,
               { color: theme.colors.light },
             ])}
           >
             LogBox is a completely redesigned redbox, yellowbox, and logging
             experience in React Native. In 0.62 we introduced LogBox as an
             opt-in. In this release, we’re launching LogBox as the default
             experience in all of React Native.
           </Text>
           <View style={styles.viewSx}>
             <Text style={{ color: theme.colors.light }}>JUL 6</Text>
             <View style={styles.viewMe}>
               <Touchable>
                 <Icon
                   style={styles.iconDf}
                   size={24}
                   color={theme.colors.light}
                   name=""FontAwesome/bookmark-o""
                 />
               </Touchable>
               <Touchable>
                 <Icon
                   style={styles.iconCz}
                   name=""Feather/share""
                   size={24}
                   color={theme.colors.light}
                 />
               </Touchable>
             </View>
           </View>
         </View>
       </Container>
       <Container
         style={StyleSheet.flatten([
           styles.containerHk,
           { backgroundColor: theme.colors.background },
         ])}
         useThemeGutterPadding={false}
         elevation={0}
       >
         <View style={styles.viewAz}>
           <Text
             style={StyleSheet.flatten([
               theme.typography.headline4,
               { color: theme.colors.strong },
             ])}
           >
             Check out Draftbit on Product Hunt
           </Text>
           <Text
             style={StyleSheet.flatten([
               theme.typography.body2,
               { color: theme.colors.light },
             ])}
           >
             Create, customize, launch, and iterate on your mobile app, all
             from your browser. Source code included.
           </Text>
           <View style={styles.view9P}>
             <Text style={{ color: theme.colors.light }}>DEC 28</Text>
             <View style={styles.viewCA}>
               <Touchable>
                 <Icon
                   style={styles.iconV2}
                   color={theme.colors.light}
                   size={24}
                   name=""FontAwesome/bookmark-o""
                 />
               </Touchable>
               <Touchable>
                 <Icon
                   style={styles.icon2E}
                   color={theme.colors.light}
                   size={24}
                   name=""Feather/share""
                 />
               </Touchable>
             </View>
           </View>
         </View>
       </Container>
     </ScrollView>
   </ScreenContainer>
 );
};
const styles = StyleSheet.create({
 scrollViewWp: {
   height: 70,
   paddingLeft: 16,
 },
 viewEb: {
   alignItems: 'center',
   paddingRight: 16,
   paddingLeft: 16,
   flexDirection: 'row',
   justifyContent: 'space-between',
   paddingBottom: 16,
   paddingTop: 16,
 },
 textKh: {
   marginRight: 4,
 },
 viewQv: {
   marginRight: 16,
   paddingBottom: 16,
   alignItems: 'center',
   paddingTop: 16,
   flexDirection: 'row',
 },
 textSs: {
   marginRight: 4,
 },
 text59: {
   marginRight: 4,
 },
 textGc: {
   marginRight: 4,
 },
 viewRv: {
   paddingRight: 16,
   paddingLeft: 16,
   paddingBottom: 16,
   paddingTop: 16,
 },
 viewAz: {
   paddingTop: 16,
   paddingBottom: 16,
   paddingLeft: 16,
   paddingRight: 16,
 },
 iconVo: {
   width: 24,
   height: 24,
 },
 image8L: {
   width: '100%',
   height: 125,
 },
 iconXb: {
   width: 24,
   height: 24,
   marginRight: 16,
 },
 iconEK: {
   height: 24,
   width: 24,
 },
 iconDf: {
   width: 24,
   height: 24,
   marginRight: 16,
 },
 iconCz: {
   width: 24,
   height: 24,
 },
 iconV2: {
   marginRight: 16,
   width: 24,
   height: 24,
 },
 icon2E: {
   width: 24,
   height: 24,
 },
 containerPz: {
   marginTop: 12,
 },
 textRu: {
   marginRight: 8,
 },
 textOn: {
   marginRight: 4,
 },
 viewWp: {
   alignItems: 'center',
   paddingBottom: 16,
   marginRight: 16,
   flexDirection: 'row',
   paddingTop: 16,
 },
 textLf: {
   marginRight: 4,
 },
 textOf: {
   marginRight: 8,
 },
 viewKU: {
   flexDirection: 'row',
   width: 60,
   justifyContent: 'space-between',
 },
 viewW2: {
   paddingLeft: 16,
   paddingRight: 16,
   paddingBottom: 16,
   paddingTop: 16,
 },
 viewMe: {
   flexDirection: 'row',
   width: 60,
   justifyContent: 'space-between',
 },
 viewCA: {
   flexDirection: 'row',
   width: 60,
   justifyContent: 'space-between',
 },
 image52: {
   height: 25,
   width: 25,
   flexGrow: 1,
 },
 containerHk: {
   marginTop: 12,
 },
 viewNx: {
   paddingTop: 16,
   paddingBottom: 16,
   flexDirection: 'row',
   marginRight: 16,
   alignItems: 'center',
 },
 viewXC: {
   paddingTop: 16,
   alignItems: 'center',
   justifyContent: 'space-between',
   flexDirection: 'row',
 },
 viewSx: {
   justifyContent: 'space-between',
   flexDirection: 'row',
   paddingTop: 16,
   alignItems: 'center',
 },
 view9P: {
   paddingTop: 16,
   justifyContent: 'space-between',
   alignItems: 'center',
   flexDirection: 'row',
 },
 iconRt: {
   height: 24,
   width: 24,
 },
 iconS3: {
   height: 24,
   width: 24,
 },
 iconIb: {
   height: 24,
   width: 24,
 },
 iconFR: {
   width: 24,
   height: 24,
 },
 viewK8: {
   paddingBottom: 16,
   marginRight: 16,
   flexDirection: 'row',
   paddingTop: 16,
   alignItems: 'center',
 },
});
export default withTheme(REPLACE_SCREEN_NAME);