Adding a map using to React-native app

3302
1
06-15-2021 03:23 PM
p_torio
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
JoshGore
New Contributor III

Yes the best way would be to wrap the Andriod/IOS SDKs , see for example https://github.com/glazou/react-native-arcgis-sdk-demo 
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;
}

@Override
public String getName() {
return REACT_CLASS;
}

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

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

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

@Override
protected void onAfterUpdateTransaction(@NonNull MapView view) {
super.onAfterUpdateTransaction(view);
loadMap(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));
}
view.setMap(map);
}

@ReactProp(name = "portalUrl")
public void setPortalUrl(MapView view, String portalUrl) {
if (portalUrl == null) {
mPortalUrl = "https://www.arcgis.com";
}
else {
mPortalUrl = portalUrl;
}
loadMap(view);
}

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

 

0 Kudos