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