POST GET ANTAR HALAMAN

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

const Bestseller = ({navigation}) => {
const {buku,idb2} = route.params;
const [dataBakso, setData] = useState([]);
  useEffect(() => {
    fetch('https://www.lp2maray.com/dataku.json?id='+idb2)
      .then((response) => response.json())
      .then((hasil) => setData(hasil.bestseller))
      .catch(error => { console.log; });
  }, []);
//=============================================
  const listBuku = ({item}) => {
    return (
      <TouchableOpacity 
        onPress={()=>navigation.navigate('Detail', { buku : item,idb:item.id_buku } )} >
        <View style={styles.listItem}>
            <Image
              source={{ uri: item.image }}
              style={styles.coverImage}
            />
            <View style={{marginLeft: 5}}>
              <Text style={styles.title}>{item.judul}</Text>
              <Text style={styles.teks}>Harga: Rp. {item.harga}</Text>
              <Text style={styles.teks}>Penulis: {item.penulis}</Text>
            </View>
        </View>
      </TouchableOpacity>
    )
  }
//=============================================
return (
    <View style={styles.container}>
      <FlatList data={dataBakso}
        renderItem={listBuku}
        keyExtractor={item=>item.id}
      />
    </View>
  );  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f8f8',
    alignItems: 'center'
  },
  listItem: {
    marginTop: 10,
    paddingVertical: 20,
    paddingHorizontal: 20,
    backgroundColor: '#fff',
    flexDirection: 'row'
  },
  coverImage: {
    width: 100,
    height: 150,
    borderRadius: 10
  },
  teks: {
    fontSize: 14,
    width: 200,
    padding: 10,
  },
  title: {
    fontSize: 16,
    width: 220,
    fontWeight: 'bold',
    padding: 10,
    marginBottom: 15
  }
});

export default Bestseller;

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

import { Dimensions, FlatList, ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import React, { useEffect, useState } from "react";
import CardHeader from "../../components/CardHeader";
import { baseURL } from "../../config/api";
import CardToko from "../../components/CardToko";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { getDistance } from "geolib";
import * as Location from "expo-location";
import { useIsFocused } from "@react-navigation/native";

const HomeScreen = ({ navigation }) => {
  const isFocused = useIsFocused();
  const [newData, setNewData] = useState([]);
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);
  const [address, setAddress] = useState(null);
  const [nama, setNama] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const getCoordinates = async () => {
      setIsLoading(true);
      let nm = await AsyncStorage.getItem("nama");
      setNama(nm);

      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        setErrorMsg("Permission to access location was denied");
      } else {
        let { coords } = await Location.getCurrentPositionAsync();
        setLocation(coords);
        let { longitude, latitude } = coords;

        let regionName = await Location.reverseGeocodeAsync({
          longitude,
          latitude,
        });
        setAddress(regionName[0]);
      }
      setIsLoading(false);
    };
    getCoordinates();
  }, []);

  useEffect(() => {
    if (location) {
      getToko();
    }
  }, [location]);

  useEffect(() => {
    if (location) {
      getToko();
    }
  }, [isFocused]);

  const getToko = async () => {
    try {
      setIsLoading(true);

      const response = await fetch(baseURL + "ukm/ukm_show.php");
      if (response) {
        const responsedata = await response.json().then();
        let data = responsedata.record;
        let coords = location;
        let radius = 11630;
        data.map((value, index) => {
          let latitude = value.latitude;
          let longitude = value.longitude;
          let dist = getDistance({ latitude: coords.latitude, longitude: coords.longitude }, { latitude: latitude, longitude: longitude });
          value.jarak = dist;
        });
        let newData = data.filter((item) => item.jarak <= radius);
        setNewData(newData);
        console.log(newData);
        setIsLoading(false);
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View style={styles.container}>
      <StatusBar
        animated={true}
        backgroundColor="#0B0063"
      />
      <View style={styles.header}>
        <Text style={styles.textTitle}>Selamat Datang,</Text>
      </View>
      <CardHeader
        nama={nama}
        address={address}
        msg={errorMsg}
      />
      <View style={styles.content}>
        <Text style={styles.textTitle2}>Daftar Pilihan Toko</Text>
        <View style={styles.containerx}>
          <Text style={styles.textRekomendasi}>Rekomendasi</Text>
          <TouchableOpacity onPress={() => navigation.navigate("ListToko")}>
            <Text style={styles.textLihatSemua}>Lihat Semua</Text>
          </TouchableOpacity>
        </View>
        <FlatList
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          style={{ marginTop: 10 }}
          data={newData}
          renderItem={({ item, index }) => <CardToko data={item} />}
          keyExtractor={(item, index) => String(item + index)}
          refreshing={isLoading}
          onRefresh={getToko}
        />
      </View>
    </View>
  );
};

export default HomeScreen;

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#0B0063",
  },

  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,
  },

  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",
  },
});