Obtener localización en React Native y Expo

Tiempo de lectura: 2 minutos

Hoy os voy a enseñar cómo obtener localización utilizando React Native y Expo:

Vamos a utilizar la librería expo-location (https://docs.expo.dev/versions/latest/sdk/location/)

Primero la instalamos:

expo install expo-location

Esta librería añade automáticamente los permisos en Android Manifest (necesarios para utilizar localización):

• ACCESS_COARSE_LOCATION: for approximate device location
• ACCESS_FINE_LOCATION: for precise device location
• FOREGROUND_SERVICE: to subscribe to location updates while the app is in use

Pero no añade el permiso para utilizar localización en segundo plano: ACCESS_BACKGROUND_LOCATION. Si queremos añadir ese permiso, tendremos que hacerlo de forma manual en app.js.

Ahora importamos la librería para utilizarla en nuestro código:

import * as Location from 'expo-location';

Una vez importado, vamos al render y añadimos los métodos necesarios para obtener la localización.

const Component = ({ navigation }) => {

//Estado dónde se va a guardar la localización obtenida
const [location, setLocation] = useState(null);

//Método para obtener permisos de localización y localización:
 const permisoLocalizacion = async () => {
  
        let { status } = await Location.requestForegroundPermissionsAsync();
        if (status !== 'granted') {
            alert('Permission to access location was denied');
            return;
        }

        let location = await Location.getCurrentPositionAsync({});
        setLocation(location);
        console.log('Location: ' + JSON.stringify(location) + " Latitud: " + location.coords.latitude + " Longitud: " + location.coords.longitude);
    };

 return (
        <View style={styles.contenedor}>
            <Button tittle="Localización" onPress={permisoLocalizacion} />
        </View>
    )
};



export default component;

Ahora voy a explicar el código.

Primero se crea un state para almacenar la localización cuándo sea obtenida:

const [location, setLocation] = useState(null);

El método const permisoLocalizacion = async () => { es el que nos permitirá obtener la localización.

• Primero solicita permiso de localización.
• Si se acepta, nos devuelve la localización.

Para obtener las coordenadas, utilizamos los parámetros del objeto que nos devuelve:

location.coords.latitude

location.coords.longitude