Browse List of Articles [Data-Enabled]
A list view of items fed by example-data.draftbit.com/articles.
-- CODE language-jsx --
import React from 'react';
import { Divider, FieldSearchBarFull, Icon, 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={false}>
<KeyboardAvoidingView behavior=""position"" keyboardVerticalOffset={44} enabled={false}>
<View style={styles.Viewb8}>
<Text style={StyleSheet.flatten([styles.TexttG, theme.typography.headline2, { color: theme.colors.strong }])}>
Browse
</Text>
<FieldSearchBarFull style={StyleSheet.flatten([styles.FieldSearchBarFull_7F, { borderRadius: theme.borderRadius.global, borderColor: theme.colors.divider }])}onChange={searchBarValue => setSearchBarValue(searchBarValue)} placeholder=""Search"" value={searchBarValue} />
</View>
<View style={styles.ViewOM}hitSlop={{}} pointerEvents=""auto"" accessible={true}>
<Text style={StyleSheet.flatten([theme.typography.headline5, { color: theme.colors.strong }])}ellipsizeMode=""tail"" accessible={true} textBreakStrategy=""highQuality"" allowFontScaling={true}>
Featured
</Text>
<Touchable style={styles.Touchablen6}>
<Text style={StyleSheet.flatten([theme.typography.headline5, { color: theme.colors.primary }])}allowFontScaling={true} textBreakStrategy=""highQuality"" accessible={true} ellipsizeMode=""tail"">
See All
</Text>
</Touchable>
</View>
<View style={styles.View_1n}>
<Fetch
url={`https://example-data.draftbit.com/articles?q=featured`}
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 >
<View style={styles.ViewjH}>
<View style={styles.View_4Q}pointerEvents=""auto"" accessible={true} hitSlop={{}}>
<Image style={styles.ImageeK}resizeMode=""cover"" source={{ uri: item[""img_src""] }} />
<View style={styles.View_2S}hitSlop={{}} accessible={true} pointerEvents=""auto"">
<Text style={StyleSheet.flatten([theme.typography.headline6, { color: theme.colors.strong }])}allowFontScaling={true}>
{item && item[""title""]}
</Text>
<Text style={StyleSheet.flatten([theme.typography.subtitle1, { color: theme.colors.medium }])}allowFontScaling={true}>
{item && item[""content""]}
</Text>
</View>
</View>
<Icon style={styles.IconWM}name=""Ionicons/ios-arrow-forward"" size={24} color={theme.colors.strong} />
</View>
<Divider style={styles.Dividerf0}color={theme.colors.divider} />
</Touchable>
} data={data} />)
}}
</Fetch>
</View>
<View style={styles.Viewbu}pointerEvents=""auto"" accessible={true} hitSlop={{}}>
<Text style={StyleSheet.flatten([theme.typography.headline5, { color: theme.colors.strong }])}accessible={true} allowFontScaling={true} ellipsizeMode=""tail"" textBreakStrategy=""highQuality"">
Recent
</Text>
<Touchable style={styles.TouchableVQ}>
<Text style={StyleSheet.flatten([theme.typography.headline5, { color: theme.colors.primary }])}accessible={true} textBreakStrategy=""highQuality"" allowFontScaling={true} ellipsizeMode=""tail"">
See All
</Text>
</Touchable>
</View>
<View style={styles.Viewbb}>
<Fetch
url={`https://example-data.draftbit.com/articles?_order=desc&_sort=created_at_utc&_limit=5`}
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 >
<View style={styles.View_22}>
<View style={styles.ViewHi}accessible={true} hitSlop={{}} pointerEvents=""auto"">
<Image style={styles.ImageN7}resizeMode=""cover"" source={{ uri: item[""img_src""] }} />
<View style={styles.Viewp1}accessible={true} pointerEvents=""auto"" hitSlop={{}}>
<Text style={StyleSheet.flatten([theme.typography.headline6, { color: theme.colors.strong }])}allowFontScaling={true}>
{item && item[""title""]}
</Text>
<Text style={StyleSheet.flatten([theme.typography.subtitle1, { color: theme.colors.medium }])}allowFontScaling={true}>
{item && item[""content""]}
</Text>
</View>
</View>
<Icon style={styles.IconAB}size={24} color={theme.colors.strong} name=""Ionicons/ios-arrow-forward"" />
</View>
<Divider style={styles.Divider_6P}color={theme.colors.divider} />
</Touchable>
} data={data} />)
}}
</Fetch>
</View>
<Touchable >
<View style={styles.View_9Q}>
<View style={styles.ViewaR}pointerEvents=""auto"" accessible={true} hitSlop={{}}>
<Image style={styles.ImageUL}resizeMode=""cover"" />
<View style={styles.ViewRw}accessible={true} hitSlop={{}} pointerEvents=""auto"">
<Text style={StyleSheet.flatten([theme.typography.headline6, { color: theme.colors.strong }])}allowFontScaling={true}>
Title
</Text>
<Text style={StyleSheet.flatten([theme.typography.subtitle1, { color: theme.colors.medium }])}allowFontScaling={true}>
Description
</Text>
</View>
</View>
<Icon style={styles.Iconuu}size={24} color={theme.colors.strong} name=""Ionicons/ios-arrow-forward"" />
</View>
<Divider style={styles.DividerLF}color={theme.colors.divider} />
</Touchable>
</KeyboardAvoidingView>
</ScreenContainer>
)
}
const styles = StyleSheet.create({ ViewHi: {
width: ""100%"", maxWidth: ""80%"", flexDirection: ""row"", alignItems: ""flex-start"", maxHeight: 140 }, ImageN7: {
width: 64, height: 64, marginRight: 14 }, ImageeK: {
marginRight: 14, height: 64, width: 64 }, View_4Q: {
width: ""100%"", maxWidth: ""80%"", flexDirection: ""row"", alignItems: ""flex-start"", maxHeight: 140 }, ImageUL: {
height: 64, width: 64, marginRight: 14 }, ViewaR: {
width: ""100%"", maxWidth: ""80%"", flexDirection: ""row"", alignItems: ""flex-start"" }, TexttG: {
marginBottom: 24 }, Viewb8: {
paddingBottom: 34, alignItems: ""flex-start"", paddingTop: 72, paddingRight: 32, paddingLeft: 32 }, View_22: {
paddingBottom: 12, paddingTop: 12, justifyContent: ""space-between"", width: ""100%"", marginBottom: 12, alignItems: ""flex-start"", flexDirection: ""row"", marginTop: 12 }, ViewjH: {
marginTop: 12, flexDirection: ""row"", justifyContent: ""space-between"", paddingBottom: 12, paddingTop: 12, width: ""100%"", marginBottom: 12, alignItems: ""flex-start"" }, View_9Q: {
justifyContent: ""space-between"", alignItems: ""flex-start"", marginBottom: 12, marginTop: 12, flexDirection: ""row"", paddingBottom: 12, paddingTop: 12, width: ""100%"" }, FieldSearchBarFull_7F: {
borderTopWidth: 1, borderBottomWidth: 1, width: ""100%"", borderRightWidth: 1, borderLeftWidth: 1 }, ViewOM: {
width: ""100%"", alignItems: ""center"", marginBottom: 14, marginTop: 24, paddingLeft: 32, paddingRight: 32, flexDirection: ""row"", justifyContent: ""space-between"" }, Viewp1: {
paddingRight: 34, paddingLeft: 14, overflow: ""hidden"", maxHeight: 140, marginBottom: 24, marginRight: 14 }, IconAB: {
height: 24, width: 24 }, Divider_6P: {
height: 1 }, View_2S: {
paddingLeft: 14, paddingRight: 34, marginBottom: 24, marginRight: 14, maxHeight: 140, overflow: ""hidden"" }, IconWM: {
height: 24, width: 24 }, Dividerf0: {
height: 1 }, ViewRw: {
paddingLeft: 14, paddingRight: 34 }, Iconuu: {
height: 24, width: 24 }, DividerLF: {
height: 1 }, Touchablen6: {
alignSelf: ""flex-end"" }, TouchableVQ: {
alignSelf: ""flex-end"" }, View_1n: {
paddingRight: 32, marginBottom: 34, paddingLeft: 32, width: ""100%"" }, Viewbu: {
paddingLeft: 32, marginBottom: 14, width: ""100%"", alignItems: ""center"", justifyContent: ""space-between"", flexDirection: ""row"", paddingRight: 32, marginTop: 24 }, Viewbb: {
paddingLeft: 32, width: ""100%"", paddingRight: 32, marginBottom: 34 } })
export default withTheme(REPLACE_SCREEN_NAME);
