-- CODE language-jsx --
import React from 'react';
import Images from '../config/Images';
import { Button, Divider, 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 { theme } = props
return (
<ScreenContainer scrollable={true} hasSafeArea={true}>
<KeyboardAvoidingView style={styles.KeyboardAvoidingView_3h}keyboardVerticalOffset={44} behavior=""position"" enabled={true}>
<View style={styles.Viewuv}>
<Image style={styles.Imagej8}source={Images.ProfilePlaceholder} resizeMode=""cover"" />
<Text style={StyleSheet.flatten([styles.Text_35, theme.typography.headline4, { color: theme.colors.strong }])}>
Kickbit - Authorized Nike Retailer
</Text>
<Text style={StyleSheet.flatten([styles.TextiD, theme.typography.subtitle1, { color: theme.colors.medium }])}>
Store Description
</Text>
<Touchable style={styles.TouchableF3}>
<View style={styles.Viewia}importantForAccessibility=""auto"" accessible={true} pointerEvents=""auto"" hitSlop={{}}>
<Icon style={styles.IconyE}name=""MaterialCommunityIcons/map-marker"" color={theme.colors.primary} size={20} />
<Text style={StyleSheet.flatten([theme.typography.subtitle2, { color: theme.colors.primary }])}allowFontScaling={true} ellipsizeMode=""tail"" accessible={true} textBreakStrategy=""highQuality"">
Location
</Text>
</View>
</Touchable>
<Touchable style={styles.TouchableDF}>
<View style={styles.ViewbW}pointerEvents=""auto"" hitSlop={{}} importantForAccessibility=""auto"" accessible={true}>
<Icon style={styles.Iconj3}size={20} name=""MaterialCommunityIcons/link-variant"" color={theme.colors.primary} />
<Text style={StyleSheet.flatten([theme.typography.subtitle2, { color: theme.colors.primary }])}textBreakStrategy=""highQuality"" accessible={true} allowFontScaling={true} ellipsizeMode=""tail"">
Website
</Text>
</View>
</Touchable>
</View>
<View style={styles.View_7R}accessible={true} hitSlop={{}} pointerEvents=""auto"" importantForAccessibility=""auto"">
<View style={styles.ViewXn}hitSlop={{}} pointerEvents=""auto"" importantForAccessibility=""auto"" accessible={true}>
<Text style={StyleSheet.flatten([theme.typography.headline5, { color: theme.colors.strong }])}textBreakStrategy=""highQuality"" accessible={true} allowFontScaling={true} ellipsizeMode=""tail"">
Products
</Text>
<Touchable >
<Text style={StyleSheet.flatten([theme.typography.headline5, { color: theme.colors.primary }])}accessible={true} allowFontScaling={true} textBreakStrategy=""highQuality"" ellipsizeMode=""tail"">
See All
</Text>
</Touchable>
</View>
<Fetch
url={`https://example-data.draftbit.com/products?brand=${encodeURIComponent(""Nike"")}&_limit=3&_sort=average_product_rating&_order=desc`}
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.ViewAU}importantForAccessibility=""auto"" hitSlop={{}} accessible={true} pointerEvents=""auto"">
<View style={styles.ViewcK}accessible={true} importantForAccessibility=""auto"" hitSlop={{}} pointerEvents=""auto"">
<View style={styles.ViewIn}accessible={true} hitSlop={{}} importantForAccessibility=""auto"" pointerEvents=""auto"">
<Image style={styles.ImageLH}resizeMode=""contain"" source={{ uri: item[""image_url""] }} />
</View>
<View style={styles.Viewul}accessible={true} importantForAccessibility=""auto"" hitSlop={{}} pointerEvents=""auto"">
<Text style={StyleSheet.flatten([theme.typography.headline6, { color: theme.colors.strong }])}accessible={true} allowFontScaling={true} textBreakStrategy=""highQuality"" ellipsizeMode=""tail"">
{item && item[""name""]}
</Text>
<View style={styles.ViewkL}hitSlop={{}} accessible={true} importantForAccessibility=""auto"" pointerEvents=""auto"">
<Text style={StyleSheet.flatten([theme.typography.subtitle1, { color: theme.colors.medium }])}>
$
</Text>
<Text style={StyleSheet.flatten([theme.typography.subtitle1, { color: theme.colors.medium }])}allowFontScaling={true} accessible={true} ellipsizeMode=""tail"" textBreakStrategy=""highQuality"">
{item && item[""sale_price""]}
</Text>
<Text style={StyleSheet.flatten([styles.TextfU, theme.typography.subtitle1, { color: theme.colors.light }])}>
$
</Text>
<Text style={StyleSheet.flatten([styles.TextD7, theme.typography.subtitle1, { color: theme.colors.light }])}accessible={true} textBreakStrategy=""highQuality"" ellipsizeMode=""tail"" allowFontScaling={true}>
{item && item[""list_price""]}
</Text>
</View>
<View style={styles.Viewv1}hitSlop={{}} accessible={true} importantForAccessibility=""auto"" pointerEvents=""auto"">
<Text style={StyleSheet.flatten([theme.typography.subtitle2, { color: theme.colors.medium }])}ellipsizeMode=""tail"" allowFontScaling={true} textBreakStrategy=""highQuality"" accessible={true}>
{item && item[""description""]}
</Text>
</View>
</View>
</View>
<Icon style={styles.IconQi}color={theme.colors.strong} name=""Ionicons/ios-arrow-forward"" size={24} />
</View>
<Divider style={styles.DividerX9}height={1} color={theme.colors.divider} />
</Touchable>
} data={data} />)
}}
</Fetch>
</View>
<View style={styles.Viewve}hitSlop={{}} pointerEvents=""auto"" importantForAccessibility=""auto"" accessible={true}>
<Button style={StyleSheet.flatten([styles.ButtonJu, { borderRadius: theme.borderRadius.global }])}type=""solid"">
Visit Store
</Button>
</View>
</KeyboardAvoidingView>
</ScreenContainer>
)
}
const styles = StyleSheet.create({ Imagej8: {
width: 120, marginBottom: 24, height: 120 }, IconyE: {
width: 24, marginRight: 8, height: 24, alignSelf: ""flex-start"" }, Viewia: {
flexDirection: ""row"", alignItems: ""center"" }, Iconj3: {
height: 24, marginRight: 8, alignSelf: ""flex-start"", width: 24 }, ViewbW: {
flexDirection: ""row"", alignItems: ""center"" }, ViewXn: {
justifyContent: ""space-between"", alignItems: ""center"", flexDirection: ""row"", width: ""100%"" }, ImageLH: {
width: 40, height: 40 }, ViewIn: {
width: 40, height: 40, marginRight: 14 }, ViewcK: {
flexDirection: ""row"", alignItems: ""flex-start"", width: ""100%"", maxWidth: ""80%"" }, ViewAU: {
marginBottom: 12, flexDirection: ""row"", justifyContent: ""space-between"", width: ""100%"", paddingBottom: 12, paddingTop: 12, marginTop: 12, alignItems: ""flex-start"" }, ButtonJu: {
height: 54, justifyContent: ""center"", alignItems: ""center"" }, KeyboardAvoidingView_3h: {
flexGrow: 1 }, Viewuv: {
alignItems: ""flex-start"", paddingRight: 32, paddingLeft: 32, paddingTop: 64, paddingBottom: 34 }, Viewul: {
paddingRight: 34 }, IconQi: {
width: 24, height: 24, marginLeft: 14 }, DividerX9: {
height: 1 }, View_7R: {
paddingTop: 34, paddingBottom: 34, paddingRight: 32, paddingLeft: 32 }, ViewkL: {
width: ""100%"", flexDirection: ""row"", alignItems: ""center"", alignItems: ""center"", marginBottom: 8 }, Text_35: {
textAlign: ""left"", marginBottom: 6 }, Viewve: {
paddingRight: 32, paddingLeft: 32, paddingTop: 14, paddingBottom: 34 }, Viewv1: {
overflow: ""hidden"", maxHeight: 120 }, TextiD: {
textAlign: ""left"" }, TextfU: {
textDecorationLine: ""line-through"", marginLeft: 8 }, TextD7: {
textDecorationLine: ""line-through"", marginLeft: 0 }, TouchableF3: {
marginTop: 12, marginBottom: 6, flexWrap: ""wrap"" }, TouchableDF: {
flexWrap: ""wrap"", marginBottom: 6, marginTop: 2 } })
export default withTheme(REPLACE_SCREEN_NAME);
