-- CODE language-jsx --
import React from 'react';
import { Icon, ScreenContainer, Touchable, withTheme } from '@draftbit/ui';
import { Image, ScrollView, StyleSheet, Text, View } from 'react-native';
import { Fetch } from 'react-request';
   const REPLACE_SCREEN_NAME = props => {
     const { theme } = props
     return (
     <ScreenContainer  scrollable={false} hasSafeArea={false}>
     <ScrollView  contentContainerStyle={styles.ScrollViewNb}bounces={true} showsVerticalScrollIndicator={true} showsHorizontalScrollIndicator={true}>
     <View  pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
       <Fetch
   url={`https://example-data.draftbit.com/articles/${encodeURIComponent(1)}`}
   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 (
     <View  pointerEvents=""auto"" accessible={true} importantForAccessibility=""auto"" hitSlop={{}}>
     <View  accessible={true} importantForAccessibility=""auto"" hitSlop={{}} pointerEvents=""auto"">
       <Image  style={styles.Image_5b}source={{ uri: data[""img_src""] }} resizeMode=""cover"" />
     </View>
     <View  style={styles.View_1F}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <Touchable  style={styles.TouchabletF}>
     <View  style={StyleSheet.flatten([styles.Viewzr, { borderRadius: theme.borderRadius.global, backgroundColor: theme.colors.divider }])}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <Text  style={StyleSheet.flatten([theme.typography.caption, { color: theme.colors.medium }])}>
       {data && data[""category""]}
     </Text>
     </View>
     </Touchable>
     <Text  style={StyleSheet.flatten([theme.typography.headline4, { color: theme.colors.strong }])}>
       {data && data[""title""]}
     </Text>
     <View  style={styles.ViewPI}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <Text  style={StyleSheet.flatten([styles.TextpK, theme.typography.subtitle2, { color: theme.colors.medium }])}>
       By:
     </Text>
     <Text  style={StyleSheet.flatten([theme.typography.subtitle2, { color: theme.colors.medium }])}>
       {data && data[""authors""]}
     </Text>
     </View>
     <View  style={styles.ViewPJ}hitSlop={{}} accessible={true} importantForAccessibility=""auto"" pointerEvents=""auto"">
     <Text  style={StyleSheet.flatten([styles.TextEX, theme.typography.subtitle2, { color: theme.colors.medium }])}>
       Published:
     </Text>
     <Text  style={StyleSheet.flatten([theme.typography.subtitle2, { color: theme.colors.medium }])}>
       {data && data[""date""]}
     </Text>
     </View>
     <Touchable  style={styles.TouchableIr}>
     <View  style={StyleSheet.flatten([styles.ViewxC, { borderRadius: theme.borderRadius.global, backgroundColor: theme.colors.background, borderColor: theme.colors.divider }])}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <View  style={styles.Viewyv}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <View  style={styles.ViewUV}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
       <Icon  style={styles.Iconvw}size={22} color={theme.colors.strong} name=""MaterialCommunityIcons/newspaper"" />
     </View>
     <View  style={styles.ViewZm}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <Text  style={StyleSheet.flatten([theme.typography.body2, { color: theme.colors.medium }])}>
       View Original
     </Text>
     </View>
     </View>
     <View  pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
       <Icon  style={styles.IconmW}size={22} color={theme.colors.light} name=""FontAwesome/angle-right"" />
     </View>
     </View>
     </Touchable>
     <Text  style={StyleSheet.flatten([theme.typography.body1, { color: theme.colors.strong }])}>
       {data && data[""content""]}
     </Text>
     <Touchable  style={styles.TouchableUl}>
     <View  style={StyleSheet.flatten([styles.Viewg1, { borderRadius: theme.borderRadius.global, backgroundColor: theme.colors.background, borderColor: theme.colors.divider }])}accessible={true} pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"">
     <View  style={styles.ViewgH}accessible={true} importantForAccessibility=""auto"" hitSlop={{}} pointerEvents=""auto"">
     <View  style={styles.ViewFJ}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
       <Icon  style={styles.Iconnc}name=""MaterialIcons/person"" size={22} color={theme.colors.strong} />
     </View>
     <View  style={styles.Viewgs}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
     <Text  style={StyleSheet.flatten([styles.TextzB, theme.typography.body2, { color: theme.colors.medium }])}>
       More from
     </Text>
     <Text  style={StyleSheet.flatten([theme.typography.body2, { color: theme.colors.medium }])}>
       {data && data[""authors""]}
     </Text>
     </View>
     </View>
     <View  importantForAccessibility=""auto"" accessible={true} pointerEvents=""auto"" hitSlop={{}}>
       <Icon  style={styles.Iconcw}name=""FontAwesome/angle-right"" color={theme.colors.light} size={22} />
     </View>
     </View>
     </Touchable>
     </View>
     </View>
   )
 }}
</Fetch>
     </View>
     </ScrollView>
     </ScreenContainer>
     )
   }
const styles = StyleSheet.create({ Image_5b: {
height: 300 }, ScrollViewNb: {
paddingBottom: 24 }, Viewzr: {
paddingLeft: 14, paddingRight: 14, paddingTop: 3, paddingBottom: 3 }, ViewxC: {
flexDirection: ""row"", justifyContent: ""space-between"", alignItems: ""center"", paddingTop: 12, paddingBottom: 12, paddingLeft: 14, paddingRight: 14, borderBottomWidth: 1, borderTopWidth: 1, borderLeftWidth: 1, borderRightWidth: 1 }, Viewyv: {
flexDirection: ""row"", alignItems: ""center"", alignContent: ""center"" }, ViewUV: {
marginRight: 8, minWidth: 24, minHeight: 24, maxWidth: 24, maxHeight: 24, alignItems: ""center"", justifyContent: ""center"" }, Iconvw: {
height: 22, width: 22 }, IconmW: {
height: 22, width: 22 }, Iconnc: {
height: 22, width: 22 }, ViewFJ: {
maxHeight: 24, maxWidth: 24, justifyContent: ""center"", alignItems: ""center"", marginRight: 8, minWidth: 24, minHeight: 24 }, ViewgH: {
flexDirection: ""row"", alignContent: ""center"", alignItems: ""center"" }, Iconcw: {
height: 22, width: 22 }, Viewg1: {
flexDirection: ""row"", paddingBottom: 12, paddingTop: 12, borderTopWidth: 1, borderLeftWidth: 1, borderRightWidth: 1, justifyContent: ""space-between"", alignItems: ""center"", paddingLeft: 14, paddingRight: 14, borderBottomWidth: 1 }, TouchabletF: {
marginBottom: 12 }, TextpK: {
marginRight: 4 }, TextEX: {
marginRight: 4 }, TextzB: {
marginRight: 4 }, View_1F: {
paddingLeft: 32, paddingRight: 32, paddingTop: 32, paddingBottom: 36, alignItems: ""flex-start"" }, ViewZm: {
alignItems: ""flex-start"", overflow: ""hidden"", alignSelf: ""stretch"" }, Viewgs: {
overflow: ""hidden"", alignItems: ""center"", flexDirection: ""row"" }, ViewPI: {
marginTop: 8, flexDirection: ""row"", alignItems: ""center"" }, ViewPJ: {
flexDirection: ""row"", alignItems: ""center"", marginTop: 8 }, TouchableIr: {
marginTop: 18, marginBottom: 32, alignSelf: ""stretch"" }, TouchableUl: {
marginTop: 32, alignSelf: ""stretch"" } })
export default withTheme(REPLACE_SCREEN_NAME);