Adding a map using to React-native app

p_torio

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.

JoshGore

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);
    }
}