Accepts a product's {{id}} as a passed navigation parameter and displays the product's info (from example-data.draftbit.com/products).
-- 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);