Get user city from location coords data, in react native? - reactjs

Question

I got the coords but cannot get it to show the city. I almost got it. I even got the API key it requires but cannot do anything more. Please help me, I am going nuts. If you have any other way that I could do it, you can show it aswell it would be appreciated. Thank you. Here's what I could do so far:
import React from "react";
import { Button, PermissionsAndroid, SafeAreaView, StatusBar, StyleSheet, Text, View, Platform } from "react-native";
import GetLocation from 'react-native-get-location'
const locationToAdress = async(location) =>
{
const locationPublish = `${location.latitude},${location.longitude}`; //PUBLISH
const url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${locationPublish}&sensor=true&key=${config.myGoogleAPIisaSecretnumber}`;
fetch(url)
.then((result) => {
const { results } = result;
console.log(results);
})
.catch((e) => {
console.log(e);
});
}
const requestLokasyonPermission = async () => {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
GetLocation.getCurrentPosition({
enableHighAccuracy: true,
timeout: 15000,
})
.then(location => {
console.log(location);
console.log(location.latitude);
console.log("lokasyon seysi bu" + location.longitude);
locationToAdress(location);
})
.catch(error => {
const { code, message } = error;
console.warn(code, message);
})
);
};
const requestCameraPermission = async () => {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
title: "Cool Photo App Camera Permission",
message:
"Cool Photo App needs access to your camera " +
"so you can take awesome pictures.",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK"
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log("You can use the camera");
} else {
console.log("Camera permission denied");
}
} catch (err) {
console.warn(err);
}
};
const App = () => (
<View style={styles.container}>
<Text style={styles.item}>Try permissions</Text>
<Button title="request permissions" onPress={
() => { requestCameraPermission();}
}/>
<Text style={styles.item}>Try permissions</Text>
<Button title="request permissions" onPress={
() => { requestLokasyonPermission();}
}/>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingTop: StatusBar.currentHeight,
backgroundColor: "#ecf0f1",
padding: 8
},
item: {
margin: 24,
fontSize: 18,
fontWeight: "bold",
textAlign: "center"
}
});
export default App;

Answer 1

In locationToAdress you have used geocode service which converts address to latitude and longitude. In your case, you want the opposide - i.e. from latitude and longitude coordinates to address for which one should use reverse geocoding service as given here

Answer 2

I haven't worked on react-native-get-location, but you can refer below example for your code.
I am using react-native-geolocation-service.
Remove ${config.} before API Key
P.S. : Never Post Your Google Map API Key directly on any site.
import React from "react";
import { Button, PermissionsAndroid, SafeAreaView, StatusBar, StyleSheet, Text, View, Platform } from "react-native";
import Geolocation from 'react-native-geolocation-service'
const locationToAdress = async (location) => {
const locationPublish = `${location.latitude},${location.longitude}`; //PUBLISH
const url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${locationPublish}&sensor=true&key=YOURGOOGLEMAPAPIKEY`;
fetch(url)
.then((result) => {
console.log(result);
})
.catch((e) => {
console.log(e);
});
}
const requestLokasyonPermission = async () => {
if (Platform.OS === "android") {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
title: "Location Permission",
message:
"This App needs access to your location " +
"so we can know where you are.",
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log("You can use locations ");
} else {
console.log("Location permission denied");
}
} catch (err) {
console.warn(err);
}
}
Geolocation.getCurrentPosition(
(location) => {
console.log(location);
locationToAdress(location.coords)
},
(error) => {
console.log(error);
},
{ enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 }
);
};
const requestCameraPermission = async () => {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
{
title: "Cool Photo App Camera Permission",
message:
"Cool Photo App needs access to your camera " +
"so you can take awesome pictures.",
buttonNeutral: "Ask Me Later",
buttonNegative: "Cancel",
buttonPositive: "OK"
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log("You can use the camera");
} else {
console.log("Camera permission denied");
}
} catch (err) {
console.warn(err);
}
};
const App = () => (
<View style={styles.container}>
<Text style={styles.item}>Try permissions</Text>
<Button title="request permissions" onPress={
() => { requestCameraPermission(); }
} />
<Text style={styles.item}>Try permissions</Text>
<Button title="request permissions" onPress={
() => { requestLokasyonPermission(); }
} />
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingTop: StatusBar.currentHeight,
backgroundColor: "#ecf0f1",
padding: 8
},
item: {
margin: 24,
fontSize: 18,
fontWeight: "bold",
textAlign: "center"
}
});
export default App;