Expo - React Native GeoFence with API Data - api

Question

I am trying to work on a simple proof of concept for geofencing around certain latitude and longitudes
Structure: - location service is turned on (no need background updates for now just initial location) - user location is determined - looks at data of locations in json file and finds the ones in close proximity #10km (refer to URL for API)
EXPO has recently updated the SDK to manage this, but with looking through multiple searches nothing really comes up with managing a simple task of placing static location to a database and then runs the proximity radius.
Using a basic setup for the concept but not sure next steps... Below is the setup that I have for now and would like some direction on where the GeoFence calls begins
import React, {Component} from 'react';
import { AppRegistry, Text, View, StyleSheet, FlatList, Image } from 'react-native';
import { Constants, MapView, Location, Permissions } from 'expo';
export default class App extends Component {
constructor() {
super ()
this.state = {
dataSource: []
}
}
state = {
mapRegion: null,
hasLocationPermissions: false,
locationResult: null
};
_handleMapRegionChange = mapRegion => {
console.log(mapRegion);
this.setState({ mapRegion });
};
_getLocationAsync = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted') {
this.setState({
locationResult: 'Permission to access location was denied',
});
} else {
this.setState({ hasLocationPermissions: true });
}
let location = await Location.getCurrentPositionAsync({});
this.setState({ locationResult: JSON.stringify(location) });
// Center the map on the location we just fetched.
this.setState({mapRegion: { latitude: location.coords.latitude, longitude: location.coords.longitude, latitudeDelta: 0.0922, longitudeDelta: 0.0421 }});
};
renderItem = ({item}) => {
return (
<View>
<View>
<Text>{item.code}
<Text>{item.name}
<Text>{item.lat}
<Text>{item.lon}
</Text>
</Text>
</Text>
</Text>
</View>
</View>
)}
componentDidMount() {
this._getLocationAsync();
//const url = 'https://www.json-generator.com/api/json/get/ccLAsEcOSq?indent=1'
const url = 'https://gist.githubusercontent.com/tdreyno/4278655/raw/7b0762c09b519f40397e4c3e100b097d861f5588/airports.json'
fetch(url)
.then((repsonse) => repsonse.json())
.then((responseJson) => {
this.setState({
dataSource: responseJson
})
})
.catch((error) => {
console.log(error)
})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Pan, zoom, and tap on the map!
</Text>
{
this.state.locationResult === null ?
<Text>Finding your current location...</Text> :
this.state.hasLocationPermissions === false ?
<Text>Location permissions are not granted.</Text> :
this.state.mapRegion === null ?
<Text>Map region doesn't exist.</Text> :
<MapView
style={{ alignSelf: 'stretch', height: 200 }}
region={this.state.mapRegion}
onRegionChange={this._handleMapRegionChange}
/>
}
<Text>
Location: {this.state.locationResult}
</Text>
<View style={styles.container}>
<FlatList
//={[{ key: 'a'}, { key: 'b'}]}
//renderItem={({item }) => <Text>{item.key}</Text>}
data={this.state.dataSource}
renderItem={this.renderItem}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
This is only proof of concept and just need some directions which will help me move on. Links and Tutorials anything will help
Thanks (still learning)