-- CODE language-jsx --
import React from 'react';
import { Button, Divider, 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={true}>
     <ScrollView  contentContainerStyle={styles.ScrollViewaq}showsHorizontalScrollIndicator={false} bounces={true} showsVerticalScrollIndicator={true}>
       <Fetch
   url={`https://example-data.draftbit.com/products/${encodeURIComponent(234)}`}
   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 (
     <View  style={styles.View_2B}>
       <Image  style={StyleSheet.flatten([styles.Imageua, { backgroundColor: theme.colors.background, borderColor: theme.colors.divider, borderRadius: theme.borderRadius.global }])}source={{ uri: data[""image_url""] }} resizeMode=""contain"" />
     <Text  style={StyleSheet.flatten([styles.TextNR, theme.typography.headline4, { color: theme.colors.strong }])}>
       {data && data[""name""]}
     </Text>
     <Touchable  style={styles.Touchable_8H}>
     <Text  style={StyleSheet.flatten([theme.typography.caption, { color: theme.colors.primary }])}ellipsizeMode=""tail"" textBreakStrategy=""highQuality"" accessible={true} allowFontScaling={true}>
       Category:
     </Text>
     <Text  style={StyleSheet.flatten([theme.typography.caption, { color: theme.colors.primary }])}textBreakStrategy=""highQuality"" accessible={true} ellipsizeMode=""tail"" allowFontScaling={true}>
       {data && data[""category""]}
     </Text>
     </Touchable>
     <Text  style={StyleSheet.flatten([styles.TextsI, theme.typography.subtitle1, { color: theme.colors.medium }])}>
       {data && data[""description""]}
     </Text>
     <View  style={styles.ViewY2}hitSlop={{}} accessible={true} importantForAccessibility=""auto"" pointerEvents=""auto"">
     <Text  style={StyleSheet.flatten([theme.typography.headline6, { color: theme.colors.light }])}ellipsizeMode=""tail"" textBreakStrategy=""highQuality"" accessible={true} allowFontScaling={true}>
       Was:
     </Text>
     <Text  style={StyleSheet.flatten([styles.Text_4c, theme.typography.headline6, { color: theme.colors.light }])}allowFontScaling={true} accessible={true} ellipsizeMode=""tail"" textBreakStrategy=""highQuality"">
       $
     </Text>
     <Text  style={StyleSheet.flatten([styles.Text_0U, theme.typography.headline6, { color: theme.colors.light }])}textBreakStrategy=""highQuality"" allowFontScaling={true} ellipsizeMode=""tail"" accessible={true}>
       {data && data[""list_price""]}
     </Text>
     </View>
     <View  style={styles.ViewEx}hitSlop={{}} accessible={true} pointerEvents=""auto"" importantForAccessibility=""auto"">
     <Text  style={StyleSheet.flatten([styles.Textjq, theme.typography.headline6, { color: theme.colors.strong }])}accessible={true} ellipsizeMode=""tail"" textBreakStrategy=""highQuality"" allowFontScaling={true}>
       Now:
     </Text>
     <Text  style={StyleSheet.flatten([theme.typography.headline2, { color: theme.colors.strong }])}accessible={true} textBreakStrategy=""highQuality"" allowFontScaling={true} ellipsizeMode=""tail"">
       $
     </Text>
     <Text  style={StyleSheet.flatten([theme.typography.headline2, { color: theme.colors.strong }])}accessible={true} ellipsizeMode=""tail"" textBreakStrategy=""highQuality"" allowFontScaling={true}>
       {data && data[""sale_price""]}
     </Text>
     </View>
     </View>
   )
 }}
</Fetch>
     <View  style={styles.ViewIQ}hitSlop={{}} importantForAccessibility=""auto"" pointerEvents=""auto"" accessible={true}>
     <Button  style={StyleSheet.flatten([styles.ButtontG, { borderRadius: theme.borderRadius.global }])}type=""solid"">
       Add to Cart
     </Button>
     </View>
     <View  style={styles.ViewDZ}accessible={true} hitSlop={{}} importantForAccessibility=""auto"" pointerEvents=""auto"">
       <Divider  style={styles.DividerWC}color={theme.colors.divider} height={1} />
     <View  style={styles.View_2E}pointerEvents=""auto"" accessible={true} importantForAccessibility=""auto"" hitSlop={{}}>
     <Text  style={StyleSheet.flatten([theme.typography.headline5, { color: theme.colors.strong }])}accessible={true} allowFontScaling={true} ellipsizeMode=""tail"" textBreakStrategy=""highQuality"">
       Recent Reviews
     </Text>
     <Touchable  >
     <Text  style={StyleSheet.flatten([theme.typography.headline5, { color: theme.colors.primary }])}accessible={true} textBreakStrategy=""highQuality"" ellipsizeMode=""tail"" allowFontScaling={true}>
       See All
     </Text>
     </Touchable>
     </View>
   <Fetch
   url={`https://example-data.draftbit.com/product_reviews?_order=asc&_sort=date&_limit=3&productId=234`}
   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  pointerEvents=""auto"" accessible={true} importantForAccessibility=""auto"" hitSlop={{}}>
     <View  style={styles.ViewAF}accessible={true} importantForAccessibility=""auto"" pointerEvents=""auto"" hitSlop={{}}>
     <View  style={styles.ViewuZ}pointerEvents=""auto"" importantForAccessibility=""auto"" accessible={true} hitSlop={{}}>
     <View  style={styles.ViewuC}hitSlop={{}} pointerEvents=""auto"" importantForAccessibility=""auto"" accessible={true}>
     <Text  style={StyleSheet.flatten([theme.typography.headline6, { color: theme.colors.strong }])}ellipsizeMode=""tail"" allowFontScaling={true} accessible={true} textBreakStrategy=""highQuality"">
       {item && item[""rating""]}
     </Text>
     <Text  style={StyleSheet.flatten([styles.Textee, theme.typography.headline6, { color: theme.colors.strong }])}ellipsizeMode=""tail"" textBreakStrategy=""highQuality"" accessible={true} allowFontScaling={true}>
       /5
     </Text>
     <Text  style={StyleSheet.flatten([theme.typography.headline6, { color: theme.colors.strong }])}ellipsizeMode=""tail"" allowFontScaling={true} textBreakStrategy=""highQuality"" accessible={true}>
       {item && item[""title""]}
     </Text>
     </View>
     <View  style={styles.Viewvq}hitSlop={{}} accessible={true} importantForAccessibility=""auto"" pointerEvents=""auto"">
     <Text  style={StyleSheet.flatten([theme.typography.subtitle2, { color: theme.colors.light }])}ellipsizeMode=""tail"" allowFontScaling={true} accessible={true} textBreakStrategy=""highQuality"">
       Reviewed on:
     </Text>
     <Text  style={StyleSheet.flatten([theme.typography.subtitle2, { color: theme.colors.light }])}ellipsizeMode=""tail"" allowFontScaling={true} accessible={true} textBreakStrategy=""highQuality"">
       {item && item[""date""]}
     </Text>
     </View>
     <Text  style={StyleSheet.flatten([theme.typography.subtitle2, { color: theme.colors.medium }])}ellipsizeMode=""tail"" allowFontScaling={true} accessible={true} textBreakStrategy=""highQuality"">
       {item && item[""full_review""]}
     </Text>
     </View>
     </View>
     </View>
   }  data={data} />)
 }}
</Fetch>
     </View>
     </ScrollView>
     </ScreenContainer>
     )
   }
const styles = StyleSheet.create({ Imageua: {
borderRightWidth: 1, marginBottom: 24, height: 300, width: ""100%"", borderBottomWidth: 1, borderTopWidth: 1, borderLeftWidth: 1 }, ViewuZ: {
width: ""100%"" }, ViewuC: {
alignItems: ""center"", flexDirection: ""row"" }, ViewAF: {
marginTop: 12, flexDirection: ""row"", alignItems: ""flex-start"", paddingBottom: 12, marginBottom: 12, paddingTop: 12, justifyContent: ""space-between"" }, ButtontG: {
height: 54, justifyContent: ""center"", alignItems: ""center"" }, ScrollViewaq: {
flexGrow: 1 }, Textjq: {
marginTop: 4 }, DividerWC: {
height: 1, marginBottom: 30, marginTop: 10 }, Text_4c: {
textDecorationLine: ""line-through"" }, View_2E: {
alignItems: ""center"", width: ""100%"", flexDirection: ""row"", justifyContent: ""space-between"" }, Textee: {
marginRight: 8 }, ViewIQ: {
paddingLeft: 32, paddingRight: 32, paddingBottom: 34 }, Viewvq: {
flexDirection: ""row"", alignItems: ""center"", marginTop: 2, marginBottom: 8 }, TextNR: {
marginBottom: 6 }, View_2B: {
paddingRight: 32, paddingLeft: 32, paddingTop: 44, paddingBottom: 34 }, Text_0U: {
textDecorationLine: ""line-through"" }, Touchable_8H: {
marginTop: 6, marginBottom: 18, alignItems: ""center"", flexDirection: ""row"" }, ViewDZ: {
paddingBottom: 14, paddingLeft: 32, paddingRight: 32 }, TextsI: {
textAlign: ""left"" }, ViewY2: {
flexDirection: ""row"", alignItems: ""center"", marginTop: 24, marginBottom: 12 }, ViewEx: {
alignItems: ""flex-start"", flexDirection: ""row"" } })
export default withTheme(REPLACE_SCREEN_NAME);