HandlePress React Native

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

import AsyncStorage from "@react-native-async-storage/async-storage";
import { useNavigation } from "@react-navigation/native";
import { API, baseURL, Resource } from "../../config/api";

import Ionicons from "@expo/vector-icons/Ionicons";
const DetailMenu = ({ route }) => {
  // Data
  const navigation = useNavigation();

  // State
  const [count, setCount] = useState(1);
  const [total, setTotal] = useState(1);
  const [isLoading, setIsLoading] = useState(false);
  const {data}= route.params;
  // Function

  const handlePress = async () => {
    setIsLoading(true);
    let id_pelanggan = await AsyncStorage.getItem("auth");
    let formData = new FormData();
    formData.append("id_pelanggan", id_pelanggan);
    formData.append("id_ukm", data.id_ukm);
    formData.append("id_produk", data.id_produk);
    formData.append("jumlah", count);

    let url = baseURL + "order/order_add.php";
    const config = {
      headers: {
        "Content-Type": "application/json",
      },
    };
    fetch(url, {
      method: "post",
      config,
      body: formData,
    })
      .then((response) => response.json())
      .then((responseJson) => {
        setIsLoading(false);
        console.log(responseJson);
        if (responseJson.sukses === 1) {
          setIsLoading(false);
          Alert.alert("Sukses!", "Ditambahkan ke keranjang.", [{ text: "Ok" }]);
          navigation.navigate("Cart");
        } else {
          setIsLoading(false);
          Alert.alert("Gagal!", "Gagal tambah data.", [{ text: "Ok" }]);
        }
      })
      .catch((err) => {
        setIsLoading(false);
        console.log(err);
        Alert.alert("Gagal!", "Error", [{ text: "Ok" }]);
      });
  };

  const plustCount = () => {
    setCount(count + 1);
  };

  const minusCount = () => {
    setCount(count === 1 ? count - 0 : count - 1);
  };
  return (
    <View style={styles.container}>
      <Image
        source={{
          uri: Resource + "/" + data.gambar1,
        }}
        style={{ width: "100%", height: "40%", marginTop: -40 }}
      />
      <View style={styles.containerInside}>
        <View style={styles.back}>
          <TouchableOpacity onPress={() => handleBack()}></TouchableOpacity>
          <Text style={styles.title}>Detail Produk</Text>
        </View>
        <ScrollView showsVerticalScrollIndicator={false}>
          <View>
            <View style={[styles.count, { flex: 1, flexDirection: "row", justifyContent: "space-between", alignItems: "center" }]}>
              <Text
                style={{
                  fontSize: 32,
                  fontFamily: "Poppins_700Bold",
                  color: "#0B0063",
                }}
              >
                {data ? data.nama_produk : ""}
              </Text>
              <View style={{ flexDirection: "row" }}>
                <TouchableOpacity onPress={() => minusCount()}>
                  <View style={styles.buttonCount}>
                    <Text style={{ fontSize: 18, color: "#0B0063", fontFamily: "Poppins_700Bold", marginBottom: 5 }}>-</Text>
                  </View>
                </TouchableOpacity>
                <Text
                  style={{
                    alignSelf: "center",
                    marginHorizontal: 10,
                    fontSize: 24,
                    fontFamily: "Poppins_700Bold",
                    color: "#0B0063",
                  }}
                >
                  {count}
                </Text>
                <TouchableOpacity onPress={() => plustCount()}>
                  <View style={styles.buttonCount}>
                    <Text style={{ fontSize: 18, color: "#0B0063", fontFamily: "Poppins_700Bold" }}>+</Text>
                  </View>
                </TouchableOpacity>
              </View>
            </View>

            <Text
              numberOfLines={6}
              style={{
                fontSize: 16,
                fontFamily: "Poppins_400Regular",
              }}
            >
              {data ? data.deskripsi : ""}
            </Text>
            <Text
              style={{
                fontSize: 14,
                fontFamily: "Poppins_400Regular",
                fontWeight: "500",
                marginTop: 10,
                color: "black",
              }}
            >
              Jenis :
            </Text>
            <Text style={{ fontFamily: "Poppins_400Regular", fontSize: 14, backgroundColor: "green", borderRadius: 2, paddingHorizontal: 10, color: "#fff" }} numberOfLines={1}>
              {data.jenis}
            </Text>
          </View>

          <View style={{ marginVertical: 20, height: "30%", flexDirection: "row" }}>
            <View style={{ flexDirection: "column", width: "55%" }}>
              <Text
                style={{
                  fontSize: 14,
                  fontFamily: "Poppins_400Regular",
                  fontWeight: "500",
                }}
              >
                Harga :{" "}
              </Text>
              <Text
                style={{
                  fontSize: 16,
                  fontFamily: "Poppins_700Bold",
                  fontWeight: "500",
                  color: "#ab0505",
                }}
              >
                Rp {data ? data.harga : 0}
              </Text>
            </View>

            <View style={{ flexDirection: "column", width: "45%" }}>
              <TouchableOpacity
                onPress={() => handlePress({ data: data })}
                style={{
                  width: "100%",
                  height: 45,
                  marginTop: 10,
                  backgroundColor: "#0B0063",
                  justifyContent: "center",
                  alignItems: "center",
                  borderRadius: 8,
                }}
              >
                <Text
                  style={{
                    fontSize: 14,
                    fontFamily: "Poppins_700Bold",
                    fontWeight: "500",
                    alignSelf: "center",
                    color: "#fff",
                  }}
                >
                  Masukkan Keranjang
                </Text>
              </TouchableOpacity>
            </View>
          </View>
        </ScrollView>
      </View>
    </View>
  );
};

export default DetailMenu;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#77BAF4",
  },
  containerInside: {
    paddingHorizontal: 16,
    backgroundColor: "white",
    height: "68%",
    width: "100%",
    position: "absolute",
    bottom: 0,
    borderTopLeftRadius: 25,
    borderTopRightRadius: 25,
  },
  back: {
    flexDirection: "row",
    paddingTop: 20,
    alignItems: "center",
  },
  count: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 25,
  },
  textHarga: {
    color: "black",
    fontSize: 14,
    fontWeight: "600",
    fontFamily: "Poppins_400Regular",
    letterSpacing: 0.6,
  },
  harga: {
    fontSize: 13,
    color: "#0B0063",
    marginTop: 5,
    fontWeight: "800",
    letterSpacing: 0.2,
    fontFamily: "Poppins_400Regular",
  },
  title: {
    fontSize: 24,
    color: "#0B0063",
    fontFamily: "Poppins_700Bold",
  },
  menuBox: {
    marginTop: 30,
  },
  textRingkasan: {
    color: "black",
    fontSize: 18,
    fontWeight: "600",
    fontFamily: "Poppins_400Regular",
    letterSpacing: 0.6,
  },
  image: {
    width: 126,
    height: 111,
    borderRadius: 10,
  },
  buttonCount: {
    justifyContent: "center",
    width: 30,
    height: 30,
    borderRadius: 10,
    backgroundColor: "#FFF",
    alignItems: "center",
    borderColor: "#0B0063",
    borderWidth: 2,
  },
  textDetail: {
    fontSize: 20,
    lineHeight: 30,
    letterSpacing: 0.5,
    color: "black",
    fontFamily: "Poppins_700Bold",
  },
});

===================================

Folder CardProduk/index.js  ATAU CardProduk.js

import { Text, View, Image, TouchableOpacity, StyleSheet, Alert } from "react-native";
import React from "react";
import { useNavigation } from "@react-navigation/native";
import { Resource } from "../../config/api";
import Ionicons from "@expo/vector-icons/Ionicons";

const CardProduk = ({ data }) => {
  const navigation = useNavigation();
  const handlePress = () => {
    navigation.navigate("DetailProduk", {
      data: data,
    });
  };

  return (
    <TouchableOpacity onPress={() => handlePress()}>
      <View style={styles.container}>
        <View style={styles.boxLeft}>
          <Image
            style={{ width: "90%", height: 100, borderRadius: 10, borderColor: "#0B0063" }}
            resizeMode={"cover"}
            source={{
              uri: Resource + "/" + data.gambar1,
            }}
          />
        </View>
        <View style={styles.boxRight}>
          <View style={{ flexDirection: "column" }}>
            <Text style={styles.titleWarung} numberOfLines={1}>
              {data.nama_produk}
            </Text>
            <View style={{ flexDirection: "row" }}>
              <Text style={{ fontFamily: "Poppins_400Regular", fontSize: 14 }} numberOfLines={2}>
                {data.deskripsi}
              </Text>
            </View>
            <View style={{ flexDirection: "row" }}>
              <Text style={{ fontFamily: "Poppins_400Regular", fontSize: 14, backgroundColor: "green", borderRadius: 2, paddingHorizontal: 10, color: "#fff" }} numberOfLines={1}>
                {data.jenis}
              </Text>
            </View>
          </View>
          <View
            style={{
              flexDirection: "row",
              marginTop: 5,
              justifyContent: "space-between",
            }}
          >
            <View
              style={{
                flex: 1,
                flexDirection: "row",
                justifyContent: "flex-start",
                alignItems: "center",
              }}
            >
              <Ionicons name="pricetags" size={14} color="#0B0063" />
              <Text style={{ color: "#ab0505", fontFamily: "Poppins_700Bold" }}> Rp {data.harga}</Text>
            </View>
            <TouchableOpacity onPress={() => handlePress()}>
              <View style={styles.ButtonLihatMenu}>
                <Text style={styles.textLihatMenu}> Detail </Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );
};
export default CardProduk;

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    width: "100%",
    marginBottom: 20,
  },
  titleWarung: {
    fontSize: 18,
    fontFamily: "Poppins_700Bold",
    color: "#0B0063",
  },
  boxLeft: {
    width: "40%",
  },
  boxRight: {
    width: "60%",
    flexDirection: "column",
  },
  ButtonLihatMenu: {
    width: 91,
    height: 30,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#0B0063",
    borderRadius: 10,
  },
  textLihatMenu: {
    color: "white",
    fontSize: 12,
    fontFamily: "Poppins_400Regular",
  },
});

=========================

ListProduk 

import { Dimensions, FlatList, Image, ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import React, { useEffect, useState } from "react";
import { baseURL, Resource } from "../../config/api";
import { useIsFocused } from "@react-navigation/native";
import CardProduk from "../../components/CardProduk";

import Ionicons from "@expo/vector-icons/Ionicons";

const ListProduk = ({ route }) => {
  const isFocused = useIsFocused();
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    getProduk();
  }, [isLoading]);

  const getProduk = async () => {
    try {
      let id_ukm = route.params.data.id_ukm;
      const response = await fetch(baseURL + "produk/produk_show.php?id_ukm=" + id_ukm);
      if (response) {
        const responsedata = await response.json();
        setData(responsedata.record);
        setIsLoading(false);
      }
    } catch (error) {
      setIsLoading(false);

      console.error(error);
    }
  };
  return (
    <View style={styles.container}>
      <StatusBar
        animated={true}
        backgroundColor="#0B0063"
      />
      <View style={styles.header}>
        <Text style={styles.textTitle}>{route.params.data.nama_ukm}</Text>
      </View>
      <View style={styles.cardcontainer}>
        <View style={styles.boxLeft}>
          <Image
            style={{ width: "100%", height: 70, borderRadius: 5 }}
            resizeMode={"cover"}
            source={{
              uri: Resource + "/" + route.params.data.gambar,
            }}
          />
        </View>
        <View style={[styles.boxRight, { padding: 10 }]}>
          <View style={styles.informasi}>
            <View style={styles.text}>
              <Text style={styles.label}>{route.params.data.nama_ukm}</Text>
            </View>
            <View style={styles.text}>
              <Ionicons
                name="call"
                size={14}
                color="#0B0063"
              />
              <Text style={styles.label}> {route.params.data.telepon}</Text>
            </View>
            <View style={styles.text}>
              <Ionicons
                name="location"
                size={14}
                color="#0B0063"
              />
              <Text style={styles.label}> {route.params.data.alamat}</Text>
            </View>
          </View>
        </View>
      </View>

      <View style={styles.content}>
        <Text style={styles.textTitle2}>Produk Toko</Text>
        <FlatList
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          style={{ marginTop: 10 }}
          data={data}
          renderItem={({ item, index }) => <CardProduk data={item} />}
          keyExtractor={(item, index) => String(item + index)}
          refreshing={isLoading}
          onRefresh={getProduk}
        />
      </View>
    </View>
  );
};

export default ListProduk;

const { height } = Dimensions.get("screen");
const height_logo = height * 0.2;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#0B0063",
  },
  cardcontainer: {
    flexDirection: "row",
    marginBottom: 10,
    borderRadius: 5,
    padding: 5,
    marginHorizontal: 16,
    backgroundColor: "white",
    shadowColor: "#000",
    shadowOpacity: 0.6,
    elevation: 3,
    shadowOffset: {
      width: 0,
      height: 1,
    },
  },

  header: {
    flex: 0.5,
    width: "100%",
    height: 50,
    justifyContent: "flex-start",
    alignItems: "flex-start",
    paddingHorizontal: 16,
  },
  content: {
    flex: 5,
    backgroundColor: "#fff",
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingHorizontal: 16,
    paddingVertical: 20,
  },

  boxLeft: {
    flex: 0.3,
    alignItems: "center",
    justifyContent: "center",
    width: "20%",
  },
  boxRight: {
    flex: 1,
    paddingHorizontal: 10,
    flexDirection: "column",
    marginLeft: 10,
  },

  textTitle: {
    marginTop: 5,
    fontSize: 48,
    color: "#fff",
    fontFamily: "Poppins_700Bold",
    fontWeight: "bold",
  },

  textTitle: {
    marginTop: 5,
    fontSize: 48,
    color: "#fff",
    fontFamily: "Poppins_700Bold",
    fontWeight: "bold",
  },

  textSubtitle: {
    fontSize: 20,
    fontFamily: "Poppins_400Regular",
    color: "#fff",
  },

  textTitle2: {
    fontSize: 24,
    color: "#0B0063",
    fontFamily: "Poppins_700Bold",
    fontWeight: "bold",
  },
  logo: {
    width: height_logo,
    height: height_logo,
  },

  containerx: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  textRekomendasi: {
    fontSize: 16,
    color: "#0B0063",
    fontWeight: "bold",
    textAlign: "center",
    fontFamily: "Poppins_400Regular",
  },
  textLihatSemua: {
    fontSize: 16,
    textAlign: "center",
    fontWeight: "normal",
    fontFamily: "Poppins_400Regular",
  },
  text: {
    flexDirection: "row",
  },
  informasi: {
    width: "100%",
  },
  label: {
    fontSize: 16,
    fontFamily: "Poppins_400Regular",
  },
});