Imagem de Capa

Geolocalização no React Native

Geolocalização no React Native.

By João Paulo Siqueira At Thu Dec 30 2021 22:45:52 GMT+0000 (Coordinated Universal Time)

#reactnative

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.