Implementar Google Maps API en React Native en Android

Para este pequeño proyecto, vamos a añadir el mapa de google maps con un marcador de nuestra posicion actual. Partiremos de que ya hemos creado nuestra app de react-native con el comando react-native init myAwesomeProject

Requisitos

  • API key de google
  • Tener habilitado google maps api en la consola de google

Lo comentado lo conseguimos aqui

Instalación de paquetes

ejecuta el comando

yarn add react-native-maps -S

o

npm install react-native-maps -S

Luego:

react-native link react-native-maps

Si tienes problemas pueder ver la documentacion oficial de react-native-maps

Configuración

Abrimos nuestro archivo AndroidManifest.xml en la carpeta android > app >src > main.

Dentro de la etiqueta manifest colocaremos la siguiente instruccion:

Si queremos una ubicacion relativa:

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

Si queremos la ubicacion precisa:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

Dentro de la etiqueta applicacion colocamos la siguiente instruccion:

<meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="YOUR_API_KEY"/>

Reemplaza YOUR_API_KEY por tu llave proporcionada en la consola

Importacion de paquetes

Abrimos nuestro archivo App.js (que es el componente que crea react-native por defecto y nos servira para nuestro ejercicio) e importamos lo sigiente:

import MapView, {Marker, PROVIDER_GOOLE} from 'react-native-maps'

Lógica del ejercicio

Vamos a establecer un estado en el constructor de la clase, por defecto la app no lo tiene, pero se lo agregaremos.

constructor(props){
  super(props)
  
  // Estado inicial de los componentes
  this.state = {
    // Tendrá las coordenadas del marcador
    latLng: {
      latitude: 0,
      longitude: 0,
    },

    // Configuración del mapa
    region: {
      latitude: 0,
      longitude: 0,
      latitudeDelta: 0.002,
      longitudeDelta: 0.002,
    }
  }
}

Cambiaremos el metodo render por el siguiente:

render() {
  return (
    <MapView
      style={ {flex:1} }
      provider={PROVIDER_GOOLE}
      region={this.state.region}>

      <Marker 
        coordinates={this.state.latLng}
      />

    </MapView>
  );
}

Ahora, cambiaremos el estado inicial por el de nuestra ubicacion en el ciclo de vida componentDidMount .

componentDidMount(){
  navigator.geolocation.getCurrentPosition( ({coords}) => {
    const {latitude, longitude} = coords
    this.setState({
      latLng: {latitude, longitude},
      region: {
        ...this.state.region,
        latitude,
        longitude
      }
    })
  })
}

Documentacion de la geolocación de react-native.

Ejecuta tu aplicación y debería funcionar sin problemas.