How to integrate OpenStreetMap into a react-native project?

Question

I am trying to integrate OpenStreetMap into a React Native project. But I can't find any library or anything related to React Native in their GitHub account.

The only thing I can find relating to these to topics is the link below, in which there is no proper answer.

https://www.reddit.com/r/reactnative/comments/5fi6bg/how_to_add_openstreetmap_to_a_react_native_project/

But I heard once that Mapbox uses OpenStreetMap as their source. Mapbox suggests a good way to integrate it into a React Native project:

https://github.com/mapbox/react-native-mapbox-gl

Is there a way to integrate OpenStreetMap into a React Native project or is it the case there's not proper support for it yet.

Answer 1

Using Mapbox GL

Another option is to use Mapbox GL, which is free as long as you don't use anything in the Mapbox platform. Unlike other options, this won't require an API key ([source 1] [source 2]).

There's often confusion about Mapbox, since the platform (global styles, tilesets, datasets, Mapbox Studio, etc) is paid, but Mapbox GL is a library which you may use to display content that is either self-hosted or hosted by the Mapbox platform.

Below is an snippet of an example using Stamen Watercolor tiles (which are also OSM-based):

render() {   const rasterSourceProps = {     id: 'stamenWatercolorSource',     tileUrlTemplates: [       'https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg',     ],     tileSize: 256,   };    return (     <MapboxGL.MapView style={sheet.matchParent}>       <MapboxGL.Camera         zoomLevel={16}       />        <MapboxGL.RasterSource {...rasterSourceProps}>         <MapboxGL.RasterLayer           id="stamenWatercolorLayer"           sourceID="stamenWatercolorSource"           style={{rasterOpacity: this.state.opacity}}         />       </MapboxGL.RasterSource>     </MapboxGL.MapView>   ); } 

Other options

As mentioned earlier, one other option for React Native (both Android and iOS) is react-native-maps.

It's at best unclear, though, if you must use a Google API key to use this lib if you don't display a Google map: Google says "To use the Maps SDK for Android you must have an API key", but react-native-maps appears to use a drop-in Maps SDK replacement called AirMapView, which supports other providers and claims you'd need to setup the native Maps SDK on Android only "to support native Google Maps". To be on the safe side, most people end up setting up a billing account with Google to generate an API key (even if you don't plan to ever count a single map view), something which Mapbox doesn't require.

Answer 2

You can use a custom Tile Overlay (OpenStreetMap too) in react-native-maps package: https://github.com/react-native-maps/react-native-maps

(scroll to Using a custom Tile Overlay section)

You need to add api key. You don't need to use Maps API at all and the key won't be used in that case.