Tutorial App Delivery – React Native + API – Part 6: Maps

react-native-maps

MapView

Install

npm install react-native-maps --save

add in the android/app/src/main/AndroidManifest.xml

 <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="Your Google maps API Key Here"/>

Run project

sudo react-native start --reset-cache

Error ->
Could not get unknown property ‘supportLibVersion’ for object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.


solution fixed
android/build.gradle


buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
        supportLibVersion = "28.0.0"  // <=== add this line
    }
    ...
}

https://github.com/react-native-community/react-native-maps/issues/3108

Create API KEY MAPS

https://console.developers.google.com/apis/credentials

Command for get hashes sha1

keytool -list -v -keystore debug.keystore -alias androiddebugkey -storepass android -keypass android

Importat ===> API Enable

Maps.js

import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';

import MapView from 'react-native-maps';

export default class Cart extends Component {

  constructor(props) {
     super(props);
     this.state = {
       data:"",
       latitude:37.78825,
       longitude:-122.4324
     };
  }

  render() {
    return (
      <View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
         <Text>GOOGLE MAP API</Text>

         <MapView
         style={{width:300, height:400}}
          initialRegion={{
            latitude:  this.state.latitude,
            longitude: this.state.longitude,
            latitudeDelta: 0.0042,
            longitudeDelta: 0.0121,
          }}
        />

      </View>
    );
  }
}

Draggable marker

Marker, add code inside about MapView

<MapView.Marker draggable
            coordinate={{
              latitude: this.state.latitude,
              longitude: this.state.longitude
            }}
   title="Here"  />

function for draggable and add code on the Marker

onDragEnd={(e) => this.movementMarker(e)}
  movementMarker(e){
    const latitude  = e.nativeEvent.coordinate.latitude
    const longitude = e.nativeEvent.coordinate.longitude

    this.setState({
      latitude: latitude,
      longitude: longitude
    })
  }

Add line on the MapViews

onPress={(e) => this.onClickMap(e.nativeEvent)}
  onClickMap(e)
  {
    const {latitude,longitude} = e.coordinate
    this.setState({
      latitude: latitude,
      longitude: longitude
    })
  }

Maps.js

import React, { Component } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';

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

export default class Cart extends Component {

  constructor(props) {
     super(props);
     this.state = {
       data:"",
       latitude:37.78825,
       longitude:-122.4324
     };
  }

  render() {
    return (
      <View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
         <Text>GOOGLE MAP API</Text>

         <MapView
           style={{width:300, height:400}}
            initialRegion={{
              latitude:  this.state.latitude,
              longitude: this.state.longitude,
              latitudeDelta: 0.0042,
              longitudeDelta: 0.0121,
            }}

            onPress={(e) => this.onClickMap(e.nativeEvent)}
          >
          <MapView.Marker draggable
            coordinate={{
              latitude: this.state.latitude,
              longitude: this.state.longitude
            }}
            title="Aqui estoy"
            onDragEnd={(e) => this.movementMarker(e)}
          />
          </MapView>

      </View>
    );
  }

  movementMarker(e){
    const latitude  = e.nativeEvent.coordinate.latitude
    const longitude = e.nativeEvent.coordinate.longitude

    this.setState({
      latitude: latitude,
      longitude: longitude
    })
  }

  onClickMap(e)
  {
    const {latitude,longitude} = e.coordinate
    this.setState({
      latitude: latitude,
      longitude: longitude
    })
  }

}

Geolocation

https://github.com/react-native-community/react-native-geolocation

Install

sudo npm install @react-native-community/geolocation --save

AndroidManifest.xml

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

Import

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

Function

  _getLocation()
  {
    Geolocation.getCurrentPosition((info) => {
      this.setState({
        latitude: info.coords.latitude,
        longitude: info.coords.longitude,
      })
    },(error)=>{
      console.log(JSON.stringify(error))
    })
  }

Full source code

import React, { Component } from 'react';
import { Text, View, TextInput, Dimensions, TouchableOpacity } from 'react-native';

import MapView, { Marker } from 'react-native-maps';
var {height, width } = Dimensions.get('window');
import Icon from 'react-native-vector-icons/Ionicons';

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

export default class Address extends Component {

  constructor(props) {
     super(props);
     this.state = {
       data:"",
       latitude:37.78825,
       longitude:-122.4324
     };
  }

  render() {
    return (
      <View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>

           <MapView
           style={{width:width, height:height-60}}
            region={{
              latitude:  this.state.latitude,
              longitude: this.state.longitude,
              latitudeDelta: 0.0042,
              longitudeDelta: 0.0121,
            }}
            onPress={(e) => this.onClickMap(e.nativeEvent)}

          >



          <MapView.Marker draggable
            coordinate={{
              latitude: this.state.latitude,
              longitude: this.state.longitude
            }}
            onDragEnd={(e) => this.movementMarker(e.nativeEvent)}
            title="Here"  />
        </MapView>

        <TouchableOpacity style={{
            backgroundColor:"white",
            height:60, width:60,
            borderRadius:50,
            alignItems:'center',
            padding:5,
            position:"absolute",
            top :10 ,
            right:10
          }} onPress={()=>this._getLocation()}>
          <Icon name="md-locate" size={50} color={"gray"}  />
        </TouchableOpacity>

      </View>
    );
  }

  _getLocation()
  {
    Geolocation.getCurrentPosition((info) => {
      this.setState({
        latitude: info.coords.latitude,
        longitude: info.coords.longitude,
      })
    },(error)=>{
      console.log(JSON.stringify(error))
    })
  }

  movementMarker(e){
    // get coordinate from mapviews
    const { latitude, longitude } = e.coordinate
    // update coordinate
    this.setState({
      latitude: latitude,
      longitude: longitude
    })
  }

  onClickMap(e)
 {
   const {latitude,longitude} = e.coordinate
   this.setState({
     latitude: latitude,
     longitude: longitude
   })
 }

}

2 comentarios sobre “Tutorial App Delivery – React Native + API – Part 6: Maps”

  1. Hi Sir,
    How AndroidManifest.xml is created.
    And How the the below folder structure is crated.
    appfood -> android -> app -> src -> main
    appfood -> android -> app -> src -> main -> AndroidManifest.xml
    I’m stopped here. I dont have Androidmanifest.xml in my code.

    Please help me as soon as possible.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *