Adding a map using to React-native app

06-15-2021 03:23 PM
New Contributor

Hello, I have a mobile app that uses React-Native 0.60.

I want to know what's the best way to go about adding a map. I've used the Esri-loader and the @arcgis/core library but react-native doesn't have HTML DOM. So I started using the iOS SDK to add a map using Xcode but, I'm not too sure if that is the right way of doing it.

1 Reply
New Contributor

Yes the best way would be to wrap the Andriod/IOS SDKs , see for example 
or another example for Andriod:

package com.reactnativearcgisruntime.mapping.view;

import android.view.View;

import androidx.annotation.NonNull;

import com.esri.arcgisruntime.ArcGISRuntimeEnvironment;
import com.esri.arcgisruntime.mapping.ArcGISMap;
import com.esri.arcgisruntime.mapping.Basemap;
import com.esri.arcgisruntime.mapping.BasemapStyle;
import com.esri.arcgisruntime.mapping.view.MapView;
import com.esri.arcgisruntime.portal.Portal;
import com.esri.arcgisruntime.portal.PortalItem;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.ViewGroupManager;
import com.facebook.react.uimanager.annotations.ReactProp;
// import com.reactnativearcgisruntime.layers.RCTAGSFeatureLayer;

public class RCTAGSMapViewManager extends ViewGroupManager<MapView> {
public static final String REACT_CLASS = "RCTAGSMapView";
private String mWebMapId;
private String mPortalUrl;

ReactApplicationContext mCallerContext;

public RCTAGSMapViewManager (ReactApplicationContext reactContext) {
mCallerContext = reactContext;

public String getName() {

public MapView createViewInstance(ThemedReactContext context) {
MapView mapView = new MapView(context);
// mapView.setMap(map);
return mapView;

public void addView(MapView mapView, View childView, int index) {
// super.addView(parent, child, index);
// if (childView instanceof RCTAGSFeatureLayer) {
// ((RCTAGSFeatureLayer) childView).addToView(mapView);
// }

public void removeView(MapView parent, View view) {
super.removeView(parent, view);

protected void onAfterUpdateTransaction(@NonNull MapView view) {

public void loadMap(MapView view) {
ArcGISMap map;
if (mWebMapId == null || mPortalUrl == null) {
Basemap tempBasemap = new Basemap(BasemapStyle.OSM_DARK_GRAY_BASE);
map = new ArcGISMap(tempBasemap);
} else {
map = new ArcGISMap(new PortalItem(new Portal(mPortalUrl), mWebMapId));

@ReactProp(name = "portalUrl")
public void setPortalUrl(MapView view, String portalUrl) {
if (portalUrl == null) {
mPortalUrl = "";
else {
mPortalUrl = portalUrl;

@ReactProp(name = "webMapId")
public void setWebMapId(MapView view, String webMapId) {
mWebMapId = webMapId;


0 Kudos