Obanana_test/app/components/product/Variation.jsx

import React, { useEffect, useState } from "react";
import {
  FlatList,
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";

const Variation = ({ vars, prod, setactiveVar }) => {
  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",
  ];
  const [varss, setvarss] = useState([]);
  useEffect(() => {
    const variation = [prod];

    setvarss([...vars]);
    // console.log(vars+"----");
    // console.log(vars)
  }, [vars, prod]);

  const [active, setactive] = useState(null);
  return (
    <View style={styles.container}>
      <Text style={styles.header}>Select Variation</Text>
      <View style={{ flexDirection: "row" }}>
        <FlatList
          // inverted
          //   style={styles.wrapper}
          horizontal
          data={varss ? varss : []}
          showsHorizontalScrollIndicator={false}
          renderItem={({ item, index }) => {
            return (
              <TouchableOpacity
                onPress={() => {
                  setactive(index);
                  setactiveVar(index);
                }}
              >
                <View
                  style={
                    index === active ? styles.AddUserActive : styles.AddUser
                  }
                >
                  <Image
                    style={styles.img}
                    source={{
                      uri: item.product_image,
                    }}
                  />
                  <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,
    paddingBottom: 0,
    //   height: "87%",
  },
  wrapper: {
    width: "100%",
    height: 200,
    // backgroundColor: "#ffaa00",
    // padding: 10,
  },
  header: {
    fontSize: 14,
    fontWeight: "700",
    // textTransform: "uppercase",
    paddingHorizontal: 5,
    marginBottom: 15,
  },
  img: {
    width: 80,
    height: 80,
    resizeMode: "cover",
    borderRadius: 10,
    backgroundColor: "#f1f1f1",
    // padding: 10,
  },
  AddUser: {
    padding: 10,
    paddingBottom: 0,

    borderWidth: 2,
    borderColor: "#eee",
  },
  AddUserActive: {
    padding: 10,
    paddingBottom: 0,

    borderWidth: 2,
    borderColor: "#ffaa00",
  },
});
export default Variation;