101 lines
3.0 KiB
React
101 lines
3.0 KiB
React
|
import React from "react";
|
||
|
|
import {
|
||
|
|
FlatList,
|
||
|
|
Image,
|
||
|
|
ScrollView,
|
||
|
|
StyleSheet,
|
||
|
|
Text,
|
||
|
|
TouchableOpacity,
|
||
|
|
View,
|
||
|
|
} from "react-native";
|
||
|
|
|
||
|
|
const Variation = () => {
|
||
|
|
const cat = [
|
||
|
|
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-08-57-885-150x150.png",
|
||
|
|
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-00-222-150x150.png",
|
||
|
|
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-03-056-150x150.png",
|
||
|
|
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-01-689-150x150.png",
|
||
|
|
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-02-255-150x150.png",
|
||
|
|
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-06-540-150x150.png",
|
||
|
|
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-05-217-150x150.png",
|
||
|
|
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-08-59-121-150x150.png",
|
||
|
|
"https://obanana.com/wp-content/uploads/2022/04/Ship-building-Logistics-150x150.png",
|
||
|
|
"https://obanana.com/wp-content/uploads/2022/04/Aggregates-150x150.png",
|
||
|
|
"https://obanana.com/wp-content/uploads/2022/03/viber_image_2022-03-30_15-09-01-102-150x150.png",
|
||
|
|
"https://obanana.com/wp-content/uploads/2022/04/Travel-Tours-150x150.png",
|
||
|
|
"https://obanana.com/wp-content/uploads/2022/08/health-vector-150x150.png",
|
||
|
|
];
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
<Text style={styles.header}>Variation</Text>
|
||
|
|
<View style={{ flexDirection: "row" }}>
|
||
|
|
<FlatList
|
||
|
|
// inverted
|
||
|
|
// style={styles.wrapper}
|
||
|
|
horizontal
|
||
|
|
data={cat ? cat : []}
|
||
|
|
showsHorizontalScrollIndicator={false}
|
||
|
|
renderItem={({ item }) => {
|
||
|
|
return (
|
||
|
|
<TouchableOpacity onPress={() => {}}>
|
||
|
|
<View style={styles.AddUser}>
|
||
|
|
<Image
|
||
|
|
style={styles.img}
|
||
|
|
source={{
|
||
|
|
uri: item,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Text
|
||
|
|
style={{
|
||
|
|
color: "#000",
|
||
|
|
fontSize: 10,
|
||
|
|
flexWrap: "wrap",
|
||
|
|
}}
|
||
|
|
></Text>
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
// flex: 1,
|
||
|
|
backgroundColor: "#fff",
|
||
|
|
// alignItems: "center",
|
||
|
|
// justifyContent: "center",
|
||
|
|
width: "100%",
|
||
|
|
// marginHorizontal: 10,
|
||
|
|
padding: 10,
|
||
|
|
|
||
|
|
// height: "87%",
|
||
|
|
},
|
||
|
|
wrapper: {
|
||
|
|
width: "100%",
|
||
|
|
height: 200,
|
||
|
|
// backgroundColor: "#ffaa00",
|
||
|
|
padding: 10,
|
||
|
|
},
|
||
|
|
header: {
|
||
|
|
fontSize: 14,
|
||
|
|
fontWeight: "700",
|
||
|
|
// textTransform: "uppercase",
|
||
|
|
paddingHorizontal:5
|
||
|
|
},
|
||
|
|
img: {
|
||
|
|
width: 80,
|
||
|
|
height: 80,
|
||
|
|
resizeMode: "cover",
|
||
|
|
borderRadius: 10,
|
||
|
|
backgroundColor: "#ffefce",
|
||
|
|
padding: 10,
|
||
|
|
},
|
||
|
|
AddUser: {
|
||
|
|
padding: 10,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
export default Variation;
|