Map integration in React Native

Friday, 21/08/2020

Tram Ho

Introduce

This article I will introduce you to integrating Map into React Native App with react-native-maps library.

With this library, on Android devices will use Google Maps, while on iOS devices can use Google Maps or Apple Map.

Setting

First, run the following command to install the library:

npm install react-native-maps --save

1 2	npm install react-native-maps --save

yarn add react-native-maps

1 2	yarn add react-native-maps

Configure on iOS

Use React Native Link (React Native <= 0.59)

Run react-native link react-native-maps to link the library, then we can use this library on iOS

Using CocoaPods (React Native <= 0.59)

Edit Podfile in the ios/Podfile directory, replace _YOUR_PROJECT_TARGET_ with your target project (project name by default)

<span class="token comment"># Uncomment the next line to define a global platform for your project</span>
<span class="token comment"># platform :ios, '9.0'</span>

target <span class="token string">'_YOUR_PROJECT_TARGET_'</span> <span class="token keyword">do</span>
  rn_path <span class="token operator">=</span> <span class="token string">'../node_modules/react-native'</span>
  rn_maps_path <span class="token operator">=</span> <span class="token string">'../node_modules/react-native-maps'</span>

  <span class="token comment"># See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies</span>
  pod <span class="token string">'yoga'</span> <span class="token punctuation">,</span> path <span class="token punctuation">:</span> <span class="token string">" <span class="token interpolation"><span class="token delimiter tag">#{</span> rn_path <span class="token delimiter tag">}</span></span> /ReactCommon/yoga/yoga.podspec"</span>
  pod <span class="token string">'React'</span> <span class="token punctuation">,</span> path <span class="token punctuation">:</span> rn_path <span class="token punctuation">,</span> subspecs <span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token string">'Core'</span> <span class="token punctuation">,</span>
    <span class="token string">'CxxBridge'</span> <span class="token punctuation">,</span>
    <span class="token string">'DevSupport'</span> <span class="token punctuation">,</span>
    <span class="token string">'RCTActionSheet'</span> <span class="token punctuation">,</span>
    <span class="token string">'RCTAnimation'</span> <span class="token punctuation">,</span>
    <span class="token string">'RCTGeolocation'</span> <span class="token punctuation">,</span>
    <span class="token string">'RCTImage'</span> <span class="token punctuation">,</span>
    <span class="token string">'RCTLinkingIOS'</span> <span class="token punctuation">,</span>
    <span class="token string">'RCTNetwork'</span> <span class="token punctuation">,</span>
    <span class="token string">'RCTSettings'</span> <span class="token punctuation">,</span>
    <span class="token string">'RCTText'</span> <span class="token punctuation">,</span>
    <span class="token string">'RCTVibration'</span> <span class="token punctuation">,</span>
    <span class="token string">'RCTWebSocket'</span> <span class="token punctuation">,</span>
  <span class="token punctuation">]</span>

  <span class="token comment"># React Native third party dependencies podspecs</span>
  pod <span class="token string">'DoubleConversion'</span> <span class="token punctuation">,</span> <span class="token symbol">:podspec</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token string">" <span class="token interpolation"><span class="token delimiter tag">#{</span> rn_path <span class="token delimiter tag">}</span></span> /third-party-podspecs/DoubleConversion.podspec"</span>
  pod <span class="token string">'glog'</span> <span class="token punctuation">,</span> <span class="token symbol">:podspec</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token string">" <span class="token interpolation"><span class="token delimiter tag">#{</span> rn_path <span class="token delimiter tag">}</span></span> /third-party-podspecs/glog.podspec"</span>
  <span class="token comment"># If you are using React Native &lt;0.54, you will get the following error:</span>
  <span class="token comment"># "The name of the given podspec `GLog` doesn't match the expected one `glog`"</span>
  <span class="token comment"># Use the following line instead:</span>
  <span class="token comment">#pod 'GLog', :podspec =&gt; "#{rn_path}/third-party-podspecs/GLog.podspec"</span>
  pod <span class="token string">'Folly'</span> <span class="token punctuation">,</span> <span class="token symbol">:podspec</span> <span class="token operator">=</span> <span class="token operator">&gt;</span> <span class="token string">" <span class="token interpolation"><span class="token delimiter tag">#{</span> rn_path <span class="token delimiter tag">}</span></span> /third-party-podspecs/Folly.podspec"</span>

  <span class="token comment"># react-native-maps dependencies</span>
  pod <span class="token string">'react-native-maps'</span> <span class="token punctuation">,</span> path <span class="token punctuation">:</span> rn_maps_path
  <span class="token comment"># pod 'react-native-google-maps', path: rn_maps_path  # Uncomment this line if you want to support GoogleMaps on iOS</span>
  <span class="token comment"># pod 'GoogleMaps'  # Uncomment this line if you want to support GoogleMaps on iOS</span>
  <span class="token comment"># pod 'Google-Maps-iOS-Utils' # Uncomment this line if you want to support GoogleMaps on iOS</span>
<span class="token keyword">end</span>

post_install <span class="token keyword">do</span> <span class="token operator">|</span> installer <span class="token operator">|</span>
  installer <span class="token punctuation">.</span> pods_project <span class="token punctuation">.</span> targets <span class="token punctuation">.</span> <span class="token keyword">each</span> <span class="token keyword">do</span> <span class="token operator">|</span> target <span class="token operator">|</span>
    <span class="token keyword">if</span> target <span class="token punctuation">.</span> name <span class="token operator">==</span> <span class="token string">'react-native-google-maps'</span>
      target <span class="token punctuation">.</span> build_configurations <span class="token punctuation">.</span> <span class="token keyword">each</span> <span class="token keyword">do</span> <span class="token operator">|</span> config <span class="token operator">|</span>
        config <span class="token punctuation">.</span> build_settings <span class="token punctuation">[</span> <span class="token string">'CLANG_ENABLE_MODULES'</span> <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'No'</span>
      <span class="token keyword">end</span>
    <span class="token keyword">end</span>
  <span class="token keyword">end</span>
<span class="token keyword">end</span>

# Uncomment the next line to define a global platform for your project

# platform :ios, '9.0'

target '_YOUR_PROJECT_TARGET_' do

rn_path = '../node_modules/react-native'

rn_maps_path = '../node_modules/react-native-maps'

# See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies

pod 'yoga' , path : " #{ rn_path } /ReactCommon/yoga/yoga.podspec"

pod 'React' , path : rn_path , subspecs : [

'Core' ,

'CxxBridge' ,

'DevSupport' ,

'RCTActionSheet' ,

'RCTAnimation' ,

'RCTGeolocation' ,

'RCTImage' ,

'RCTLinkingIOS' ,

'RCTNetwork' ,

'RCTSettings' ,

'RCTText' ,

'RCTVibration' ,

'RCTWebSocket' ,

]

# React Native third party dependencies podspecs

pod 'DoubleConversion' , :podspec = > " #{ rn_path } /third-party-podspecs/DoubleConversion.podspec"

pod 'glog' , :podspec = > " #{ rn_path } /third-party-podspecs/glog.podspec"

# If you are using React Native <0.54, you will get the following error:

# "The name of the given podspec `GLog` doesn't match the expected one `glog`"

# Use the following line instead:

#pod 'GLog', :podspec => "#{rn_path}/third-party-podspecs/GLog.podspec"

pod 'Folly' , :podspec = > " #{ rn_path } /third-party-podspecs/Folly.podspec"

# react-native-maps dependencies

pod 'react-native-maps' , path : rn_maps_path

# pod 'react-native-google-maps', path: rn_maps_path # Uncomment this line if you want to support GoogleMaps on iOS

# pod 'GoogleMaps' # Uncomment this line if you want to support GoogleMaps on iOS

# pod 'Google-Maps-iOS-Utils' # Uncomment this line if you want to support GoogleMaps on iOS

end

post_install do | installer |

installer . pods_project . targets . each do | target |

if target . name == 'react-native-google-maps'

target . build_configurations . each do | config |

config . build_settings [ 'CLANG_ENABLE_MODULES' ] = 'No'

end

Then run the commands:

cd ios
pod install

cd ios

pod install

and open the workspace file ( .xcworkspace ) in XCode to build the project.

Use CocoaPods (React Native> = 60)

For React Native version> = 60 then you just need to run the commands:

cd ios
pod install

cd ios

pod install

Configure on Android

(React Native <= 0.59) add react-native-maps project to android/settings.gradle :

<span class="token operator">...</span>
include <span class="token string">':react-native-maps'</span>
<span class="token function">project</span> <span class="token punctuation">(</span> <span class="token string">':react-native-maps'</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> projectDir <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">File</span> <span class="token punctuation">(</span> rootProject <span class="token punctuation">.</span> projectDir <span class="token punctuation">,</span> <span class="token string">'../node_modules/react-native-maps/lib/android'</span> <span class="token punctuation">)</span>

...

include ':react-native-maps'

project ( ':react-native-maps' ) . projectDir = new File ( rootProject . projectDir , '../node_modules/react-native-maps/lib/android' )

(React Native <= 0.59) add dependency react-native-maps to android/app/build.gradle :

<span class="token operator">...</span>
dependencies <span class="token punctuation">{</span>
  <span class="token operator">...</span>
  implementation <span class="token function">project</span> <span class="token punctuation">(</span> <span class="token string">':react-native-maps'</span> <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

...

dependencies {

...

implementation project ( ':react-native-maps' )

}

Add the dependency gms service to android/app/build.gradle :

...
dependencies {
   ...
   implementation(project(':react-native-maps')){
       exclude group: 'com.google.android.gms', module: 'play-services-base'
       exclude group: 'com.google.android.gms', module: 'play-services-maps'
   }
   implementation 'com.google.android.gms:play-services-base:17.2.1'
   implementation 'com.google.android.gms:play-services-maps:17.0.0'
}

...

dependencies {

...

implementation(project(':react-native-maps')){

exclude group: 'com.google.android.gms', module: 'play-services-base'

exclude group: 'com.google.android.gms', module: 'play-services-maps'

}

implementation 'com.google.android.gms:play-services-base:17.2.1'

implementation 'com.google.android.gms:play-services-maps:17.0.0'

}

Add Google Map API Key to manifest file ( android/app/src/main/AndroidManifest.xml )

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> application</span> <span class="token punctuation">&gt;</span></span>
   <span class="token comment">&lt;!-- You will only need to add this meta-data tag, but make sure it's a child of application --&gt;</span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> meta-data</span>
     <span class="token attr-name"><span class="token namespace">android:</span> name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> com.google.android.geo.API_KEY <span class="token punctuation">"</span></span>
     <span class="token attr-name"><span class="token namespace">android:</span> value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> Your Google maps API Key Here <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
  
   <span class="token comment">&lt;!-- You will also only need to add this uses-library tag --&gt;</span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> uses-library</span> <span class="token attr-name"><span class="token namespace">android:</span> name</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> org.apache.http.legacy <span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">android:</span> required</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> false <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> application</span> <span class="token punctuation">&gt;</span></span>

< application >

< meta-data

android: name = " com.google.android.geo.API_KEY "

android: value = " Your Google maps API Key Here " />

< uses-library android: name = " org.apache.http.legacy " android: required = " false " />

</ application >

To get API Key: https://developers.google.com/maps/documentation/android-api/signup

(React Native <= 0.59) Add import com.airbnb.android.react.maps.MapsPackage; and new MapsPackage() to MainApplication.java file:

<span class="token keyword">import</span> <span class="token namespace">com <span class="token punctuation">.</span> airbnb <span class="token punctuation">.</span> android <span class="token punctuation">.</span> react <span class="token punctuation">.</span> maps</span> <span class="token punctuation">.</span> <span class="token class-name">MapsPackage</span> <span class="token punctuation">;</span>
<span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span>
    <span class="token annotation punctuation">@Override</span>
    <span class="token keyword">protected</span> <span class="token class-name">List</span> <span class="token generics"><span class="token punctuation">&lt;</span> <span class="token class-name">ReactPackage</span> <span class="token punctuation">&gt;</span></span> <span class="token function">getPackages</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token class-name">Arrays</span> <span class="token punctuation">.</span> <span class="token generics"><span class="token punctuation">&lt;</span> <span class="token class-name">ReactPackage</span> <span class="token punctuation">&gt;</span></span> <span class="token function">asList</span> <span class="token punctuation">(</span>
                <span class="token keyword">new</span> <span class="token class-name">MainReactPackage</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">,</span>
                <span class="token keyword">new</span> <span class="token class-name">MapsPackage</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span>
        <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

import com . airbnb . android . react . maps . MapsPackage ;

. . .

@Override

protected List < ReactPackage > getPackages ( ) {

return Arrays . < ReactPackage > asList (

new MainReactPackage ( ) ,

new MapsPackage ( )

) ;

}

Use

The react-native-maps library provides components:

General use

<span class="token keyword">import</span> MapView <span class="token keyword">from</span> <span class="token string">'react-native-maps'</span> <span class="token punctuation">;</span>

1 2	<span class="token keyword">import</span> MapView <span class="token keyword">from</span> <span class="token string">'react-native-maps'</span> <span class="token punctuation">;</span>

MapView Component is the parent component, built up from other components such as Marker, Polygon … which are children of MapView

Render Map with initialization area

With given logitude and latitude we can render the Map showing:

 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> MapView</span>
    <span class="token attr-name">initialRegion</span> <span class="token attr-value"><span class="token punctuation">=</span> {{</span>
      <span class="token attr-name"><span class="token namespace">latitude:</span></span> <span class="token attr-name">37.78825,</span>
      <span class="token attr-name"><span class="token namespace">longitude:</span></span> <span class="token attr-name">-122.4324,</span>
      <span class="token attr-name"><span class="token namespace">latitudeDelta:</span></span> <span class="token attr-name">0.0922,</span>
      <span class="token attr-name"><span class="token namespace">longitudeDelta:</span></span> <span class="token attr-name">0.0421,</span>
    <span class="token attr-name">}}</span>
  <span class="token punctuation">/&gt;</span></span>

< MapView

initialRegion = {{

latitude: 37.78825,

longitude: -122.4324,

latitudeDelta: 0.0922,

longitudeDelta: 0.0421,

}}

/>

Render Map when changing area

<span class="token function">getInitialState</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    region <span class="token operator">:</span> <span class="token punctuation">{</span>
      latitude <span class="token operator">:</span> <span class="token number">37.78825</span> <span class="token punctuation">,</span>
      longitude <span class="token operator">:</span> <span class="token operator">-</span> <span class="token number">122.4324</span> <span class="token punctuation">,</span>
      latitudeDelta <span class="token operator">:</span> <span class="token number">0.0922</span> <span class="token punctuation">,</span>
      longitudeDelta <span class="token operator">:</span> <span class="token number">0.0421</span> <span class="token punctuation">,</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">onRegionChange</span> <span class="token punctuation">(</span> <span class="token parameter">region</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> region <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span> MapView
      region <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> region <span class="token punctuation">}</span>
      onRegionChange <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> onRegionChange <span class="token punctuation">}</span>
    <span class="token operator">/</span> <span class="token operator">&gt;</span>
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

getInitialState ( ) {

return {

region : {

latitude : 37.78825 ,

longitude : - 122.4324 ,

latitudeDelta : 0.0922 ,

longitudeDelta : 0.0421 ,

} ,

} ;

}

onRegionChange ( region ) {

this . setState ( { region } ) ;

}

render ( ) {

return (

< MapView

region = { this . state . region }

onRegionChange = { this . onRegionChange }

/ >

) ;

}

Render the Markers:

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

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> MapView</span>
  <span class="token attr-name">region</span> <span class="token attr-value"><span class="token punctuation">=</span> {this.state.region}</span>
  <span class="token attr-name">onRegionChange</span> <span class="token attr-value"><span class="token punctuation">=</span> {this.onRegionChange}</span>
<span class="token punctuation">&gt;</span></span>
  {this.state.markers.map(marker =&gt; (
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> Marker</span>
      <span class="token attr-name">coordinate</span> <span class="token attr-value"><span class="token punctuation">=</span> {marker.latlng}</span>
      <span class="token attr-name">title</span> <span class="token attr-value"><span class="token punctuation">=</span> {marker.title}</span>
      <span class="token attr-name">description</span> <span class="token attr-value"><span class="token punctuation">=</span> {marker.description}</span>
    <span class="token punctuation">/&gt;</span></span>
  ))}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> MapView</span> <span class="token punctuation">&gt;</span></span>

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

< MapView

region = {this.state.region}

onRegionChange = {this.onRegionChange}

>

{this.state.markers.map(marker => (

< Marker

coordinate = {marker.latlng}

title = {marker.title}

description = {marker.description}

/>

))}

</ MapView >

Render Marker with custom image:

&lt;Marker
  coordinate={marker.latlng}
  image={require('../assets/pin.png')}
/&gt;

<Marker

coordinate={marker.latlng}

image={require('../assets/pin.png')}

Get the Snapshot Map

<span class="token keyword">import</span> MapView <span class="token punctuation">,</span> <span class="token punctuation">{</span> Marker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-maps'</span> <span class="token punctuation">;</span>

<span class="token function">getInitialState</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    coordinate <span class="token operator">:</span> <span class="token punctuation">{</span>
      latitude <span class="token operator">:</span> <span class="token constant">LATITUDE</span> <span class="token punctuation">,</span>
      longitude <span class="token operator">:</span> <span class="token constant">LONGITUDE</span> <span class="token punctuation">,</span>
    <span class="token punctuation">}</span> <span class="token punctuation">,</span>
  <span class="token punctuation">}</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">takeSnapshot</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 'takeSnapshot' takes a config object with the</span>
  <span class="token comment">// following options</span>
  <span class="token keyword">const</span> snapshot <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> map <span class="token punctuation">.</span> <span class="token function">takeSnapshot</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span>
    width <span class="token operator">:</span> <span class="token number">300</span> <span class="token punctuation">,</span>      <span class="token comment">// optional, when omitted the view-width is used</span>
    height <span class="token operator">:</span> <span class="token number">300</span> <span class="token punctuation">,</span>     <span class="token comment">// optional, when omitted the view-height is used</span>
    region <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token punctuation">.</span> <span class="token punctuation">.</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span>    <span class="token comment">// iOS only, optional region to render</span>
    format <span class="token operator">:</span> <span class="token string">'png'</span> <span class="token punctuation">,</span>   <span class="token comment">// image formats: 'png', 'jpg' (default: 'png')</span>
    quality <span class="token operator">:</span> <span class="token number">0.8</span> <span class="token punctuation">,</span>    <span class="token comment">// image quality: 0..1 (only relevant for jpg, default: 1)</span>
    result <span class="token operator">:</span> <span class="token string">'file'</span>   <span class="token comment">// result types: 'file', 'base64' (default: 'file')</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  snapshot <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">uri</span> <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function">setState</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> mapSnapshot <span class="token operator">:</span> uri <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token function">render</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span> View <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> MapView initialRegion <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span> ref <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token parameter">map</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> map <span class="token operator">=</span> map <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span> Marker coordinate <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> coordinate <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> <span class="token operator">/</span> MapView <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> Image source <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token punctuation">{</span> uri <span class="token operator">:</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> state <span class="token punctuation">.</span> mapSnapshot <span class="token punctuation">.</span> uri <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token operator">/</span> <span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span> TouchableOpacity onPress <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> takeSnapshot <span class="token punctuation">}</span> <span class="token operator">&gt;</span>
        Take Snapshot
      <span class="token operator">&lt;</span> <span class="token operator">/</span> TouchableOpacity <span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span> <span class="token operator">/</span> View <span class="token operator">&gt;</span>
  <span class="token punctuation">)</span> <span class="token punctuation">;</span>
<span class="token punctuation">}</span>

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

getInitialState ( ) {

return {

coordinate : {

latitude : LATITUDE ,

longitude : LONGITUDE ,

} ,

} ;

}

takeSnapshot ( ) {

// 'takeSnapshot' takes a config object with the

// following options

const snapshot = this . map . takeSnapshot ( {

width : 300 , // optional, when omitted the view-width is used

height : 300 , // optional, when omitted the view-height is used

region : { . . } , // iOS only, optional region to render

format : 'png' , // image formats: 'png', 'jpg' (default: 'png')

quality : 0.8 , // image quality: 0..1 (only relevant for jpg, default: 1)

result : 'file' // result types: 'file', 'base64' (default: 'file')

} ) ;

snapshot . then ( ( uri ) => {

this . setState ( { mapSnapshot : uri } ) ;

} ) ;

}

render ( ) {

return (

< View >

< MapView initialRegion = { ... } ref = { map => { this . map = map } } >

< Marker coordinate = { this . state . coordinate } / >

< / MapView >

< Image source = { { uri : this . state . mapSnapshot . uri } } / >

< TouchableOpacity onPress = { this . takeSnapshot } >

Take Snapshot

< / TouchableOpacity >

< / View >

) ;

}

Conclude

There are many more features with map supported by this library, please refer to: https://github.com/react-native-community/react-native-maps

Share the news now

Source : Viblo

Map integration in React Native

Introduce

Setting

Configure on iOS

Use React Native Link (React Native <= 0.59)

Using CocoaPods (React Native <= 0.59)

Use CocoaPods (React Native> = 60)

Configure on Android

Use

General use

Render Map with initialization area

Render Map when changing area

Render the Markers:

Render Marker with custom image:

Get the Snapshot Map

Conclude

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers