title: Expo-React-native-map: Find nearest restaurants from user's current-location's 5 km radius
body: <p>I am using <a href="https://github.com/react-native-maps/react-native-maps" rel="noreferrer">React native maps</a> for my app. I have restaurants data with latitude and longitude. I have setup user's current location by using expo location(<strong>Current location logic will work on real device not <code>Simulator or expo's Snack</code></strong>). I sorting the restaurant locations based on <code>latitude and longitude</code> and display my restaurant's location by using <code>Marker</code>. Based on my User current location around 5 km radius I want to display nearest restaurants in the <code>BottomSheet</code>. When the user will Zoom out the map it will display more restaurant options and also display in the  <code>BottomSheet</code>. I have used expo <code>Geofence</code> logic. But the thing I am looking I did not find anywhere in Expo documentation.</p>
  <p>I share code in <a href="https://snack.expo.io/@alakdam/map" rel="noreferrer">Snack</a>. <code>ps: this will work only ios and android not webView.</code></p>
  <p><strong>This is my map code</strong></p>
  <pre><code>   import React, { ReactElement, useEffect, useRef, useState } from 'react';
  import {
    Animated, Button, Dimensions, Image, PermissionsAndroid, StatusBar,
    StyleSheet, Text, TouchableOpacity, View
  
  } from 'react-native';
  
  
  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 { LocationGeofencingEventType } from 'expo-location';
  import { FAB, Searchbar } from &quot;react-native-paper&quot;;
  import * as TaskManager from 'expo-task-manager';
  import BottomSheet from &quot;react-native-bottomsheet-reanimated&quot;;
  
  
  export default function Map({ navigation }: Props): ReactElement {
      const [searchItem, setsearchItem] = useState({
      &quot;item&quot;: ``
    });
    const [state, setstate] = useState({
      &quot;latitude&quot;: 60.1098678,
      &quot;longitude&quot;: 24.7385084,
      &quot;latitudeDelta&quot;: 0.9,
      &quot;longitudeDelta&quot;: 0.0
    });
    useEffect(() =&gt; {
       _onMapReady();
     }, []);
     const _onMapReady = async () =&gt; {
       const { status } = await Permissions.askAsync(Permissions.LOCATION);
      console.log(status);
      if (status !== `granted`) {
         console.log(`Permisson Denied`);
       }
  
      const location = await Location.getCurrentPositionAsync({ &quot;accuracy&quot;: Location.Accuracy.High });
       setstate({
        ...state,
        &quot;latitude&quot;: location.coords.latitude,
         &quot;longitude&quot;: location.coords.longitude
       });
  
          Location.startGeofencingAsync(`LOCATION_GEOFENCE`, [
        {
          &quot;identifier&quot;: `estates logs properties`,
          &quot;latitude&quot;: state.latitude,
          &quot;longitude&quot;: state.longitude,
          &quot;radius&quot;: 2000,
          &quot;notifyOnEnter&quot;: true,
          &quot;notifyOnExit&quot;: true
        }
      ]);
     };
   const nameFilter = datas.data.filter((list) =&gt; {
      return list?.restaurant?.toLowerCase().includes(searchItem?.item?.toLowerCase());
    });
    return (
      &lt;View style={styles.container}&gt;
        &lt;StatusBar hidden={true} /&gt;
        &lt;MapView
          provider={PROVIDER_GOOGLE}
          region={state}
          showsIndoors={true}
          showsMyLocationButton={true}
          zoomControlEnabled={true}
          zoomEnabled={true}
          zoomTapEnabled={true}
          showsScale={true}
          // showsTraffic={true}
          showsBuildings={true}
          showsUserLocation={true}
          showsCompass={true}
          onMapReady={_onMapReady}
          style={styles.mapStyle} &gt;
          {
            nameFilter?.map((i, index) =&gt; {
              return (
                &lt;Marker
                  key={index}
                  coordinate={{ &quot;latitude&quot;: i.location.lat, &quot;longitude&quot;: i.location.lng }}
                  animation={true}
  
                &gt;
                  &lt;Callout
                    style={{ &quot;width&quot;: 100, &quot;height&quot;: 50 }}&gt;
                    &lt;View&gt;
                      &lt;Text&gt;{i.restaurant}&lt;/Text&gt;
                    &lt;/View&gt;
                  &lt;/Callout&gt;
                &lt;/Marker&gt;);
            })
          }
        &lt;/MapView&gt;
        &lt;Searchbar
          placeholder=&quot;Search&quot;
          style={{
            &quot;position&quot;: `absolute`,
            &quot;top&quot;: 20,
            &quot;margin&quot;: 10
          }}
            value={searchItem?.item}
          onChangeText= {(item) =&gt; setsearchItem({ ...searchItem, item })}
          icon=&quot;menu&quot;
          onIconPress={() =&gt; {}}
        /&gt;
       &lt;BottomSheet
          bottomSheerColor=&quot;#FFFFFF&quot;
          initialPosition={`30%`}  // 200, 300
          snapPoints={[`30%`, `100%`]}
          isBackDropDismisByPress={true}
          isRoundBorderWithTipHeader={true}
          containerStyle={{ &quot;backgroundColor&quot;: `#0af` }}
          header={
            &lt;View&gt;
              &lt;Text style={styles.text}&gt;Places Near you&lt;/Text&gt;
            &lt;/View&gt;
          }
          body={
            &lt;View style={styles.body}&gt;
              {datas?.data.map((i, index) =&gt; &lt;Text key={index}&gt;{i.restaurant}&lt;/Text&gt;)}
            &lt;/View&gt;
          }
        /&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    &quot;container&quot;: {
      &quot;flex&quot;: 1,
      &quot;backgroundColor&quot;: `#fff`,
      &quot;alignItems&quot;: `center`,
      &quot;justifyContent&quot;: `center`
      // position: 'absolute',
      // height: Dimensions.get(&quot;window&quot;).height,
      // width: Dimensions.get(&quot;window&quot;).width
    },
    &quot;mapStyle&quot;: {
      // &quot;width&quot;: 390,
      // &quot;height&quot;: 390
      &quot;height&quot;: Dimensions.get(`window`).height,
      &quot;width&quot;: Dimensions.get(`window`).width
    },
    &quot;body&quot;: {
      &quot;justifyContent&quot;: `center`,
      &quot;alignItems&quot;: `center`
    },
    &quot;text&quot;: {
      &quot;fontSize&quot;: 20,
      &quot;fontWeight&quot;: `bold`
    }
  });
  
  
  TaskManager.defineTask(`LOCATION_GEOFENCE`, ({ &quot;data&quot;: { eventType, region }, error }) =&gt; {
    console.log(`Region`, region);
    if (error) {
      // check `error.message` for more details.
      console.log(`ERROR: ` + error);
      return;
    }
    if (eventType === Location.GeofencingEventType.Enter) {
      alert(`enter in region!`);
      console.log(`You've entered region:`, region);
    } else if (eventType === Location.GeofencingEventType.Exit) {
      console.log(`You've left region:`, region);
    }
  });
  </code></pre>