How to catch the current Geolocation of the cell phone using React Native?

Question

I’m trying to get my latitude and longitude, so I used the following code:

import { View, Text, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import { Marker } from 'react-native-maps';
import Geolocation from '@react-native-community/geolocation';

export default function Map({ navigation }) {
    
    const [latitude, setLatitude]=useState(0)
    Geolocation.getCurrentPosition(data=>{
        setLatitude(data.coords.latitude)
    });

    const [longitude, setLongitude]=useState(0)
    Geolocation.getCurrentPosition(data=>{
        setLongitude(data.coords.longitude)
    });

    return (
        <MapView
            provider={PROVIDER_GOOGLE}
            region={{
                latitude: latitude,
                longitude: longitude,
                latitudeDelta: 0.0042,
                longitudeDelta: 0.0031,
            }}
            style={styles.mapView}
            rotateEnabled={false}
        >
            <Marker
                coordinate={{
                    latitude: latitude,
                    longitude: longitude
                }}
            />
        </MapView>
    );
}
const styles = StyleSheet.create({
    mapView: {
        flex: 1,
    }
})

It returns me a latitude and longitude, but they are not of my current position, it is of another location (another city in the USA). I need latitude and longitude to store in a comic book I already own.

I’m using Android Simulator and when I use Google Maps it gets my location right.

PS: I already added permissions on Android Manifest.

Answer 1

import Geolocation from '@react-native-community/geolocation';

const [CurrentRegion, setCurrentRegion] = useState(null);

async function loadInitialPosition(){
    await Geolocation.getCurrentPosition(
        (position) => {
            const {coords} = position
            const {latitude, longitude} = coords
            setCurrentRegion({
                latitude,
                longitude,
                latitudeDelta: 0,
                longitudeDelta: 0.005,
            })
        },
    );
}

useEffect(() => {
    loadInitialPosition();
},[]);


function handleRegionChange(region) {
    console.log("regiao", region)
    setCurrentRegion(region);
}

if (!getCurrentRegion) {
    return null;
}


<MapsView
    onRegionChangeComplete={handleRegionChange}
    style={{ flex: 1 }}
    initialRegion={getCurrentRegion}
    showsUserLocation
    loadingEnabled
/>

Run and tell me if it worked.