React Native Webview with openlayers

Well, I've been working with ReactJS and Leaflet and I'm quite satisfied. I can integrate leaflet pluggins with React easily, do my own pluggin, add styles, and so on. But if you need to add some kind of map rotation, leaflet will not work, you'll have to do it.

About the ReactNative issue: you can see this link, its a 'Webview based Leaflet Component for React Native'.

You can replace the WebView component by this component:

<WebViewLeaflet  ref={(component) => (this.webViewLeaflet = component)}  onLoad={this.onLoad}  eventReceiver={this} // the component that will receive map events/>

And add a function named onLoad to load the layers:

onLoad = (event) => {  // log a message showing the map has been loaded  console.log('onLoad received : ', event);  //example of array of layers  const mapLayers = [    {      name: 'streets',  // the name of the layer, this will be seen in the layer selection control      checked: 'true',  // if the layer is selected in the layer selection control      type: 'TileLayer',  // the type of layer as shown at https://react-leaflet.js.org/docs/en/components.html#raster-layers      baseLayer: true,      // url of tiles      url: `https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=${mapboxToken}`,      // attribution string to be shown for this layer      attribution:        '&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'    }  ]  // set state  this.setState(    {      ...this.state,      mapState: { ...this.state.mapState, mapLoaded: true }    },    () => {      // send an array of map layer information to the map      this.webViewLeaflet.sendMessage({        mapLayers      });    }  );}

If you need to add some Google map tiles or map data from Open Street Maps it will not work. If this is your case, you can try that link, (I never used it, is just a sugestion).

This is a bit outdated question, but since it has still active voting let's take a closer look. I would recommend you to use react-native-maps, since it's broadly supported with nice documentation. Other 3rd party libraries like react-native-webview-leaflet has a bit less flexibility.