A scrolling list of products from example-data.draftbit.com/products.
-- CODE language-jsx --
import React from 'react';
import { Button, Icon, ScreenContainer, Touchable, withTheme } from '@draftbit/ui';
import { FlatList, Image, ScrollView, StyleSheet, Text, View } from 'react-native';
import { Fetch } from 'react-request';
const REPLACE_SCREEN_NAME = props => {
const { theme } = props
return (
<ScreenContainer hasSafeArea={true} scrollable={false}>
<ScrollView contentContainerStyle={styles.ScrollView_0Y}showsHorizontalScrollIndicator={true} showsVerticalScrollIndicator={true} bounces={true}>
<View style={styles.ViewUc}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
<Text style={StyleSheet.flatten([theme.typography.headline4, { color: theme.colors.strong }])}>
Featured Products
</Text>
<Touchable style={styles.TouchablePe}>
<Icon style={styles.IconHO}size={16} color={theme.colors.primary} name=""Entypo/shopping-cart"" />
</Touchable>
</View>
<View accessible={true} importantForAccessibility=""auto"" hitSlop={{}} pointerEvents=""auto"">
<Fetch
url={`https://example-data.draftbit.com/products?_order=desc&_sort=average_product_rating&_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 }) =>
<View accessible={true} importantForAccessibility=""auto"" hitSlop={{}} pointerEvents=""auto"">
<View style={StyleSheet.flatten([styles.Viewyb, { borderColor: theme.colors.divider, backgroundColor: theme.colors.background, borderRadius: theme.borderRadius.global }])}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
<View style={styles.Viewr4}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
<View style={styles.View_3W}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
<Text style={StyleSheet.flatten([theme.typography.headline5, { color: theme.colors.strong }])}>
{item && item[""name""]}
</Text>
</View>
<View style={StyleSheet.flatten([styles.Viewmc, { borderRadius: theme.borderRadius.global, borderColor: theme.colors.divider }])}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
<Image style={styles.ImageTb}resizeMode=""cover"" source={{ uri: item[""image_url""] }} />
</View>
</View>
<View style={styles.Viewne}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
<Text style={StyleSheet.flatten([theme.typography.body1, { color: theme.colors.medium }])}>
$
</Text>
<Text style={StyleSheet.flatten([styles.Textms, theme.typography.body1, { color: theme.colors.medium }])}>
{item && item[""sale_price""]}
</Text>
<Text style={StyleSheet.flatten([styles.TextQk, theme.typography.body2, { color: theme.colors.medium }])}>
$
</Text>
<Text style={StyleSheet.flatten([styles.TextxZ, theme.typography.body2, { color: theme.colors.medium }])}>
{item && item[""list_price""]}
</Text>
</View>
<View style={styles.ViewMu}hitSlop={{}} accessible={true} pointerEvents=""auto"" importantForAccessibility=""auto"">
<Text style={StyleSheet.flatten([styles.TextIs, theme.typography.subtitle2, { color: theme.colors.medium }])}>
Average Rating:
</Text>
<Text style={StyleSheet.flatten([theme.typography.subtitle2, { color: theme.colors.medium }])}>
{item && item[""average_product_rating""]}
<Text >
/5
</Text>
</Text>
</View>
<Touchable style={styles.TouchablegN}>
<View style={StyleSheet.flatten([styles.View_4H, { backgroundColor: theme.colors.primary, borderRadius: theme.borderRadius.global }])}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
<Text style={StyleSheet.flatten([styles.Textcd, theme.typography.button, { color: theme.colors.background }])}>
Shop Now
</Text>
</View>
</Touchable>
</View>
</View>
} numColumns={1} data={data} />)
}}
</Fetch>
</View>
<View style={styles.ViewGd}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
<Button style={StyleSheet.flatten([styles.ButtonUo, { borderRadius: theme.borderRadius.global }])}type=""outline"">
View More
</Button>
</View>
</ScrollView>
</ScreenContainer>
)
}
const styles = StyleSheet.create({ ScrollView_0Y: {
paddingLeft: 32, paddingRight: 32, paddingBottom: 34, paddingTop: 34 }, ViewUc: {
alignItems: ""center"", marginBottom: 12, flexDirection: ""row"", justifyContent: ""space-between"" }, Viewyb: {
borderLeftWidth: 1, borderTopWidth: 1, borderBottomWidth: 1, borderRightWidth: 1, paddingTop: 24, paddingLeft: 24, paddingBottom: 24, paddingRight: 24, marginTop: 14, marginBottom: 14 }, Viewr4: {
flexDirection: ""row"", justifyContent: ""space-between"", alignItems: ""center"", width: ""100%"" }, View_3W: {
maxWidth: ""70%"" }, ImageTb: {
height: 64, width: 64 }, View_4H: {
paddingLeft: 16, paddingRight: 16, paddingTop: 12, paddingBottom: 12, alignItems: ""center"", justifyContent: ""center"" }, IconHO: {
height: 16, width: 16 }, ButtonUo: {
borderTopWidth: 0, borderBottomWidth: 0, borderRightWidth: 0, borderLeftWidth: 0, paddingRight: 0, paddingLeft: 0 }, TextIs: {
marginRight: 4 }, Textcd: {
textAlign: ""center"" }, Viewne: {
flexDirection: ""row"", alignItems: ""center"", marginTop: 2, marginBottom: 2 }, Viewmc: {
minWidth: 64, minHeight: 64, maxWidth: 64, maxHeight: 64, overflow: ""hidden"", justifyContent: ""center"", alignItems: ""center"", borderBottomWidth: 1, borderLeftWidth: 1, borderTopWidth: 1, borderRightWidth: 1, marginLeft: 8 }, Textms: {
marginRight: 6 }, TouchablePe: {
flexDirection: ""row"", alignItems: ""center"" }, ViewMu: {
flexDirection: ""row"", alignItems: ""center"", marginTop: 6 }, ViewGd: {
alignItems: ""flex-end"", justifyContent: ""center"", alignSelf: ""flex-end"", marginTop: 12 }, TextQk: {
textDecorationLine: ""line-through"" }, TouchablegN: {
marginTop: 24, alignSelf: ""flex-start"" }, TextxZ: {
textDecorationLine: ""line-through"" } })
export default withTheme(REPLACE_SCREEN_NAME);