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`
}
});