A list of articles fed by example-data.draftbit.com/articles.
-- 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);