-- CODE language-jsx --
import React from 'react';
import {
Divider,
FieldSearchBarFull,
ScreenContainer,
withTheme,
} from '@draftbit/ui';
import {
FlatList,
Image,
ScrollView,
StyleSheet,
Text,
View,
} from 'react-native';
import { Fetch } from 'react-request';
const RestaurantListScreen = props => {
const [searchBarValue, setSearchBarValue] = React.useState(undefined);
const { theme } = props;
return (
<ScreenContainer
style={styles.ScreenContainerUM}
hasSafeArea={true}
scrollable={false}
>
<ScrollView
showsHorizontalScrollIndicator={true}
showsVerticalScrollIndicator={true}
bounces={true}
>
<View
style={styles.Viewyk}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<FieldSearchBarFull
style={StyleSheet.flatten([
styles.FieldSearchBarFullhv,
{
borderRadius: theme.borderRadius.global,
borderColor: theme.colors.divider,
},
])}
onChange={searchBarValue => setSearchBarValue(searchBarValue)}
placeholder="Search for nearby restaurants."
value={searchBarValue}
/>
</View>
<Fetch
url={`https://example-data.draftbit.com/restaurants?_limit=10/`}
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.Viewxu}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<Text
style={StyleSheet.flatten([
theme.typography.headline4,
{ color: theme.colors.strong },
])}
>
{'Popular Places'}
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.subtitle1,
{ color: theme.colors.primary },
])}
>
{'5-star Restaurants near your location.'}
</Text>
<FlatList
renderItem={({ item }) => (
<View
style={styles.ViewKI}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<ScrollView
showsHorizontalScrollIndicator={true}
showsVerticalScrollIndicator={true}
bounces={true}
horizontal={true}
>
<View
style={StyleSheet.flatten([
styles.Viewnj,
{
backgroundColor: theme.colors.divider,
borderRadius: theme.borderRadius.global,
},
])}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<Image
style={StyleSheet.flatten([
styles.ImageKO,
{ borderRadius: theme.borderRadius.global },
])}
source={{ uri: item['image'] }}
resizeMode="cover"
/>
<Text
style={StyleSheet.flatten([
styles.TextLb,
theme.typography.headline6,
{ color: theme.colors.strong },
])}
>
{item && item['name']}
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.custom18,
{ color: theme.colors.medium },
])}
>
{item && item['city']}
</Text>
</View>
</ScrollView>
</View>
)}
contentContainerStyle={styles.FlatListRI}
numColumns={1}
data={data}
horizontal={true}
/>
</View>
);
}}
</Fetch>
<Divider
style={styles.DividerpK}
color={theme.colors.divider}
height={1}
/>
<Fetch
url={`https://example-data.draftbit.com/restaurants?_page=3`}
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.ViewPd}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<Text
style={StyleSheet.flatten([
theme.typography.headline4,
{ color: theme.colors.strong },
])}
>
{'In a rush?'}
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.subtitle1,
{ color: theme.colors.primary },
])}
>
{"Here's the fastest delivery for you."}
</Text>
<FlatList
renderItem={({ item }) => (
<View
style={styles.ViewSw}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<ScrollView
showsHorizontalScrollIndicator={true}
showsVerticalScrollIndicator={true}
bounces={true}
horizontal={true}
>
<View
style={StyleSheet.flatten([
styles.ViewE2,
{
backgroundColor: theme.colors.divider,
borderRadius: theme.borderRadius.global,
},
])}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<Image
style={StyleSheet.flatten([
styles.ImageWb,
{ borderRadius: theme.borderRadius.global },
])}
source={{ uri: item['image'] }}
resizeMode="cover"
/>
<Text
style={StyleSheet.flatten([
styles.TextKC,
theme.typography.headline6,
{ color: theme.colors.strong },
])}
>
{item && item['name']}
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.custom18,
{ color: theme.colors.medium },
])}
>
{item && item['city']}
</Text>
</View>
</ScrollView>
</View>
)}
contentContainerStyle={styles.FlatListiz}
numColumns={1}
data={data}
horizontal={true}
/>
</View>
);
}}
</Fetch>
<Divider
style={styles.DividerrH}
color={theme.colors.divider}
height={1}
/>
<Fetch
url={`https://example-data.draftbit.com/restaurants?_page=10`}
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_1P}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<Text
style={StyleSheet.flatten([
theme.typography.headline4,
{ color: theme.colors.strong },
])}
>
{"Today's Offers"}
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.subtitle1,
{ color: theme.colors.primary },
])}
>
{"Offers you can't refuse."}
</Text>
<FlatList
renderItem={({ item }) => (
<View
style={styles.View_1Q}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<ScrollView
showsHorizontalScrollIndicator={true}
showsVerticalScrollIndicator={true}
bounces={true}
>
<View
style={StyleSheet.flatten([
styles.ViewfC,
{
backgroundColor: theme.colors.divider,
borderRadius: theme.borderRadius.global,
},
])}
accessible={true}
importantForAccessibility="auto"
hitSlop={{}}
pointerEvents="auto"
>
<Image
style={StyleSheet.flatten([
styles.ImageZ0,
{ borderRadius: theme.borderRadius.global },
])}
source={{ uri: item['image'] }}
resizeMode="cover"
/>
<Text
style={StyleSheet.flatten([
theme.typography.headline6,
{ color: theme.colors.strong },
])}
>
{item && item['name']}
</Text>
<Text
style={StyleSheet.flatten([
theme.typography.custom18,
{ color: theme.colors.medium },
])}
>
{item && item['city']}
</Text>
</View>
</ScrollView>
</View>
)}
contentContainerStyle={styles.FlatListLk}
numColumns={1}
horizontal={true}
data={data}
/>
</View>
);
}}
</Fetch>
</ScrollView>
</ScreenContainer>
);
};
const styles = StyleSheet.create({
ScreenContainerUM: {
marginLeft: 20,
marginRight: 20,
marginTop: 30,
},
Viewyk: {
marginBottom: 10,
marginTop: 20,
},
FieldSearchBarFullhv: {
borderTopWidth: 1,
borderBottomWidth: 1,
width: '100%',
borderRightWidth: 1,
borderLeftWidth: 1,
},
Viewnj: {
width: 250,
height: 150,
marginRight: 20,
},
ImageKO: {
width: 250,
height: 150,
},
ViewPd: {
marginTop: 24,
},
ViewSw: {
marginTop: 24,
marginBottom: 24,
height: 200,
},
ImageWb: {
width: 250,
height: 150,
},
ViewE2: {
width: 250,
height: 150,
marginRight: 20,
},
View_1P: {
marginTop: 24,
},
View_1Q: {
marginTop: 24,
marginBottom: 24,
height: 220,
},
ImageZ0: {
width: 250,
height: 150,
},
ViewfC: {
width: 250,
height: 150,
marginRight: 20,
},
TextLb: {
marginTop: 4,
},
TextKC: {
marginTop: 4,
},
FlatListRI: {
flexDirection: 'row',
height: 220,
},
DividerpK: {
height: 1,
},
FlatListiz: {
flexDirection: 'row',
height: 220,
},
FlatListLk: {
height: 220,
},
Viewxu: {
marginTop: 10,
},
ViewKI: {
marginTop: 24,
marginBottom: 24,
height: 200,
},
DividerrH: {
height: 1,
},
});
export default withTheme(RestaurantListScreen);