Use react-map-gl in React Native or Ionic React mobile app?

[RobJacobson]

I'm working on a web app that uses react-map-gl. My goal is to eventually port the web app to a cross-platform Android/iOS mobile app using React Native, Ionic, or a similar framework. (Ionic now supports React in addition to Angular.)

Is it possible to integrate react-map-gl into a mobile app using either React Native or Ionic React? My current understanding is:

1. There isn't a react-map-gl component for React Native. However, React Native does have an optional webview component. Would react-map-gl work inside of a React Native webview?
   https://github.com/react-native-community/react-native-webview

2. Ionic is essentially a native wrapper around a regular HTML page. Therefore, it should be possible to incorporate react-map-gl within Ionic React. Does anyone have experience with this or have different information?

Of course, Mapbox GL has its own native SDKs for Android and iOS. However, these SDKs don't use React and they don't appear to be compatible with cross-platform mobile frameworks like React Native or Ionic. There's also a separate Github project that provides a React Native wrapper for Mapbox GL, but I would prefer to stick with react-map-gl, if possible.
https://github.com/react-native-mapbox-gl/maps

Thanks very much in advance for any tips.

[kylebarron]

Not a maintainer, but I quite like react-native-mapbox-gl. Both it and react-map-gl emulate the Mapbox GL API. So since they both run on the Mapbox Style Spec, essentially all of the concepts of Sources and Layers fully overlap, but react-native-mapbox-gl will be more performant since it runs on native code.

[RobJacobson]

Thanks @kylebarron! I'll look further into this possibility.

My primary hesitation with react-native-mapbox-gl is that it isn't supported by Expo, the popular build tool for React Native. Unless I'm mistaken, I'd need to create a "bare metal" React Native project using the React Native CLI along with XCode and Android Studio. I'm a newbie to React Native, so this prospect seems intimidating. (All of the getting-started tutorials for React Native essentially say "use Expo, not the CLI.")

I'm also using Marker objects in react-map-gl for the markers in my code, rather than layers. There doesn't seem to be an equivalent component in react-native-mapbox-gl. Please correct me if I'm mistaken.

[kylebarron]

Right, it isn't supported by expo, so that's just a choice you have to make. For me, the benefits of using Mapbox GL native outweigh the difficulty of making an app outside expo's ecosystem. It's not a great app yet since I'm also new to React Native, but you can check out my WIP open source project using react-native-mapbox-gl. Also the react-native-mapbox-gl examples are extremely helpful.

[wafisher]

We also ejected Expo to be able to use react-native-mapbox-gl. I think you'll find it well worth it in terms of performance to eject and use the native SDK's.

It will require some code duplication but if you factor stuff out into pure functions that aren't display-related, it shouldn't be that bad IMHO.

[RobJacobson]

Thanks very much for the suggestions, guys! I'll need to study React Native and play around with react-native-mapbox-gl to get comfortable with it.