Geolocalização no React Native.
By João Paulo Siqueira At Thu Dec 30 2021 22:45:52 GMT+0000 (Coordinated Universal Time)
Crie um novo projeto:
npx react-native init GeoApp
Renomeie:
cd GeoApp
npx react-native-rename "Geo App" -b br.com.joaops.geoapp
É importante escolher um identificador de pacote (Bundle Identifier) para o aplicativo, pois o Android utiliza essa informação para instalar ou atualizar os aplicativos instalados, ao tentar instalar um aplicativo com o mesmo pacote de outro, o Android irá atualizar o existente em vez de instalar como um aplicativo novo.
Instale a biblioteca de geolocalização:
npm i react-native-geolocation-service
Localize o arquivo:
android/app/src/main/AndroidManifest.xml
E adicione a seguinte permissão:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
Modifique o arquivo App.js para ficar igual ao seguinte:
import React, { useState, useEffect } from 'react'
import { StyleSheet, View, Text, Button, PermissionsAndroid } from 'react-native'
import Geolocation from 'react-native-geolocation-service'
const App = () => {
const [hasLocationPermission, setHasLocationPermission] = useState(false)
const [userPosition, setUserPosition] = useState({ latitude: '', longitude: '' })
useEffect(() => {
if (!hasLocationPermission) {
verifyLocationPermission()
}
}, [hasLocationPermission])
const verifyLocationPermission = async () => {
try {
const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log('Permissão Concedida')
setHasLocationPermission(true)
} else {
console.log('Permissão Negada')
setHasLocationPermission(false)
}
} catch (error) {
console.warn(error)
}
}
const pegarPossicao = () => {
if (hasLocationPermission) {
Geolocation.getCurrentPosition(
(position) => {
console.log(position)
setUserPosition({
latitude: position.coords.latitude,
longitude: position.coords.longitude
})
},
(error) => {
// See error code charts below.
console.log(error.code, error.message);
},
{ enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
)
}
}
return (
<View style={styles.view}>
<Text style={styles.text}>Olá Geo App!</Text>
<Button title="Pegar Possição" onPress={pegarPossicao} />
<Text style={styles.text}>Latitude: {userPosition.latitude}</Text>
<Text style={styles.text}>Longitude: {userPosition.longitude}</Text>
</View>
)
}
const styles = StyleSheet.create({
view: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
text: {
fontSize: 24
}
})
export default App
Então siga o tutorial de Como Compilar o Aplicativo React Native para poder gerar o APK e testar no seu celular.