-- CODE language-jsx --
import React from 'react';
import { FieldSearchBarFull, ScreenContainer, Touchable, withTheme } from '@draftbit/ui';
import { FlatList, Image, KeyboardAvoidingView, StyleSheet, Text, View } from 'react-native';
import { Fetch } from 'react-request';
   const REPLACE_SCREEN_NAME = props => {
     const [searchBarValue, setSearchBarValue] = React.useState(undefined);
     const { theme } = props
     return (
     <ScreenContainer  scrollable={true} hasSafeArea={true}>
     <KeyboardAvoidingView  style={styles.KeyboardAvoidingVieweS}enabled={false} behavior=""position"" keyboardVerticalOffset={44}>
     <View  hitSlop={{}} accessible={true} importantForAccessibility=""auto"" pointerEvents=""auto"">
     <View  style={styles.ViewNf}>
     <Text  style={StyleSheet.flatten([theme.typography.headline3, { color: theme.colors.strong }])}>
       Articles
     </Text>
     <View  style={StyleSheet.flatten([styles.Viewc6, { borderColor: theme.colors.light, borderRadius: theme.borderRadius.global, backgroundColor: theme.colors.divider }])}pointerEvents=""auto"" hitSlop={{""bottom"":12,""top"":12,""left"":12}} importantForAccessibility=""auto"" accessible={true}>
       <FieldSearchBarFull  style={styles.FieldSearchBarFullrD}onChange={searchBarValue => setSearchBarValue(searchBarValue)} value={searchBarValue} placeholder=""Search"" icon=""AntDesign/search1"" />
     </View>
     <View  style={styles.Viewza}accessible={true} pointerEvents=""auto"" hitSlop={{}}>
     <Text  style={StyleSheet.flatten([theme.typography.headline5, { color: theme.colors.strong }])}accessible={true} textBreakStrategy=""highQuality"" ellipsizeMode=""tail"" allowFontScaling={true}>
       Recommended
     </Text>
     <Touchable  style={styles.TouchableVA}>
     <Text  style={StyleSheet.flatten([theme.typography.headline5, { color: theme.colors.primary }])}textBreakStrategy=""highQuality"" allowFontScaling={true} ellipsizeMode=""tail"" accessible={true}>
       See All
     </Text>
     </Touchable>
     </View>
     </View>
     </View>
     <View  style={styles.Viewwp}needsOffscreenAlphaCompositing={false}>
       <Fetch
   url={`https://example-data.draftbit.com/articles?_limit=10`}
   headers={{""Accept"": ""application/json"",""Content-Type"": ""application/json""}}
 >
 {({ loading, error, data, refetch }) => {
   if (loading) {
     return (null)
   }
   if (error) {
     return (null)
   }
   if (!data) {
     return (null)
   }
   return (<FlatList renderItem={({ item }) =>
     <Touchable  style={StyleSheet.flatten([styles.TouchableW8, { backgroundColor: theme.colors.background, borderColor: theme.colors.divider, borderRadius: theme.borderRadius.global }])}>
     <View  style={styles.Viewlp}>
     <View  style={styles.ViewFX}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <View  style={styles.ViewGS}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
       <Image  style={styles.ImageRM}resizeMode=""cover"" source={{ uri: item[""img_src""] }} />
     </View>
     <View  style={styles.Viewca}accessible={true} hitSlop={{}} pointerEvents=""auto"">
     <View  pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <Touchable  style={styles.Touchablemo}>
     <View  style={StyleSheet.flatten([styles.ViewJa, { borderRadius: theme.borderRadius.global, borderRadius: theme.borderRadius.button, backgroundColor: theme.colors.divider }])}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <Text  style={StyleSheet.flatten([styles.TextBy, theme.typography.caption, { color: theme.colors.medium }])}allowFontScaling={true}>
       {item && item[""category""]}
     </Text>
     </View>
     </Touchable>
     <Text  style={StyleSheet.flatten([styles.TextaV, theme.typography.headline6, { color: theme.colors.strong }])}allowFontScaling={true}>
       {item && item[""title""]}
     </Text>
     <Text  style={StyleSheet.flatten([styles.TextZB, theme.typography.caption, { color: theme.colors.medium }])}allowFontScaling={true}>
       {item && item[""date""]}
     </Text>
     </View>
     </View>
     </View>
     <View  style={styles.ViewSG}pointerEvents=""auto"" accessible={true} hitSlop={{}}>
     <Text  style={StyleSheet.flatten([theme.typography.caption, { color: theme.colors.light }])}ellipsizeMode=""tail"" textBreakStrategy=""highQuality"" accessible={true} allowFontScaling={true} numberOfLines={6}>
       {item && item[""content""]}
     </Text>
     </View>
     </View>
     </Touchable>
   } contentContainerStyle={styles.FlatListsN}data={data}  />)
 }}
</Fetch>
     </View>
     </KeyboardAvoidingView>
     </ScreenContainer>
     )
   }
const styles = StyleSheet.create({ TextBy: {
textAlign: ""left"" }, KeyboardAvoidingVieweS: {
flexGrow: 1 }, FlatListsN: {
flexWrap: ""wrap"", flexDirection: ""row"", justifyContent: ""space-between"" }, ViewFX: {
alignItems: ""flex-start"", flexDirection: ""row"", width: ""70%"" }, ViewGS: {
minWidth: 52, minHeight: 52, maxHeight: 52, maxWidth: 52, marginRight: 16 }, ImageRM: {
height: 52, width: 52 }, ViewJa: {
paddingLeft: 12, paddingRight: 12, paddingTop: 3, paddingBottom: 3, alignItems: ""center"", justifyContent: ""center"", alignSelf: ""flex-start"" }, FieldSearchBarFullrD: {
alignSelf: ""stretch"" }, ViewNf: {
paddingRight: 32, paddingLeft: 32, paddingBottom: 14, alignItems: ""flex-start"", paddingTop: 34 }, Viewlp: {
overflow: ""hidden"", alignItems: ""flex-start"" }, Touchablemo: {
marginBottom: 8 }, TextaV: {
textAlign: ""left"", marginBottom: 4 }, Viewca: {
flexWrap: ""wrap"", alignContent: ""stretch"" }, ViewSG: {
alignItems: ""flex-start"", maxHeight: 86, overflow: ""hidden"", marginTop: 14 }, Viewwp: {
paddingLeft: 32, paddingRight: 32, paddingBottom: 72, width: ""100%"" }, Viewc6: {
borderBottomWidth: 1, borderTopWidth: 1, borderLeftWidth: 1, borderRightWidth: 1, alignSelf: ""stretch"", marginTop: 14 }, TouchableVA: {
justifyContent: ""center"", alignSelf: ""flex-end"" }, TouchableW8: {
marginBottom: 14, marginTop: 14, alignSelf: ""stretch"", paddingBottom: 14, paddingTop: 14, paddingRight: 14, paddingLeft: 14, borderBottomWidth: 1, borderRightWidth: 1, borderTopWidth: 1, borderLeftWidth: 1 }, Viewza: {
marginTop: 24, width: ""100%"", alignItems: ""center"", justifyContent: ""space-between"", flexDirection: ""row"" }, TextZB: {
textAlign: ""left"", marginTop: 4 } })
export default withTheme(REPLACE_SCREEN_NAME);