Live Preview with Expo
Scan the QR code with your camera. Don't have Expo yet? Enter your email or phone number and we'll send a link.
No items found.

Browse List of Articles [Data-Enabled]

Data Enabled
List

A list view of items fed by example-data.draftbit.com/articles.

Preview this Screen

Scan with your camera to preview on your phone:

Download Expo
Screen Code

-- 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);

Screen Variants:

Additional Details

Changelog

No items found.

Request access to the private beta.