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