Display the full contents of an article (accepts article's {{id}} as a navigation parameter). Fed by example-data.draftbit.com/articles.
-- 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);