Geofencing: filter data 5km radius and display in BottomSheet

[alakdam]

I am using React native maps for my app. I have restaurants data with latitude and longitude. I have setup user’s current location by using expo location. I map out the data and display my restaurant’s location by using Marker. Based on my User current location around 2 km radius I want to display nearest restaurants in the BottomSheet. When the user will Zoom out the map it will display more restaurant options. I have read about geo fencing but did not find any example. I will really glad if someone help me out.

I share code in Snack. ps: this will work only ios and android not webView.

This is my map code

import React, { ReactElement, useEffect, useRef, useState } from 'react';
import {
  Animated, Button, Dimensions, Image, PermissionsAndroid, StatusBar,
  StyleSheet, Text, TouchableOpacity, View

} from 'react-native';

import Constants from 'expo-constants';
import datas from './components/task.json';
import MapView, { Callout, Circle, Marker, PROVIDER_GOOGLE } from 'react-native-maps';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';
import { FAB, Searchbar } from "react-native-paper";
import BottomSheet from "react-native-bottomsheet-reanimated";

export default function Map({ navigation }: Props): ReactElement {
  const [state, setstate] = useState({
    "latitude": 60.1098678,
    "longitude": 24.7385084,
    "latitudeDelta": 0.9,
    "longitudeDelta": 0.0
  });
  useEffect(() => {
     _onMapReady();
   }, []);
   const _onMapReady = async () => {
     const { status } = await Permissions.askAsync(Permissions.LOCATION);
    console.log(status);
    if (status !== `granted`) {
       console.log(`Permisson Denied`);
     }

    const location = await Location.getCurrentPositionAsync({ "accuracy": Location.Accuracy.High });
     setstate({
      ...state,
      "latitude": location.coords.latitude,
       "longitude": location.coords.longitude
     });
   };

  return (
    <View style={styles.container}>
      <StatusBar hidden={true} />
      <MapView
        provider={PROVIDER_GOOGLE}
        region={state}
        showsIndoors={true}
        showsMyLocationButton={true}
        zoomControlEnabled={true}
        zoomEnabled={true}
        zoomTapEnabled={true}
        showsScale={true}
        showsBuildings={true}
        showsUserLocation={true}
        showsCompass={true}
       onMapReady={_onMapReady}
        style={styles.mapStyle} >
        {
          datas?.data?.map((i, index) => {
            return (
              <Marker
                key={index}
                coordinate={{ "latitude": i.location.lat, "longitude": i.location.lng }}
                animation={true}

              >
                <Callout
                  style={{ "width": 100, "height": 50 }}>
                  <View>
                    <Text>{i.restaurant}</Text>
                  </View>
                </Callout>
              </Marker>);
          })
        }
      </MapView>
      <Searchbar
        placeholder="Search"
        style={{
          "position": `absolute`,
          "top": 20,
          "margin": 10
        }}
        icon="menu"
        onIconPress={() => {}}
      />
      <BottomSheet
        bottomSheerColor="#FFFFFF"
        initialPosition={`30%`}  // 200, 300
        snapPoints={[`30%`, `100%`]}
        isBackDropDismisByPress={true}
        isRoundBorderWithTipHeader={true}
        containerStyle={{ "backgroundColor": `#0af` }}
        header={
          <View>
            <Text style={styles.text}>header</Text>
          </View>
        }
        body={
          <View style={styles.body}>
            <Text>Hi</Text>
          </View>
        }
      />
    </View>
  );
}

const styles = StyleSheet.create({
  "container": {
    "flex": 1,
    "backgroundColor": `#fff`,
    "alignItems": `center`,
    "justifyContent": `center`
   
  },
  "mapStyle": {
    "height": Dimensions.get(`window`).height,
    "width": Dimensions.get(`window`).width
  },
  "body": {
    "justifyContent": `center`,
    "alignItems": `center`
  },
  "text": {
    "fontSize": 20,
    "fontWeight": `bold`
  }
});