How to use leaflet.js with react-native

Question

I am having a difficult time setting up Leaflet.js with react-native. The documentation tells me to add the following script in my html...

<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

But I am not sure how I do this using react. Right now my main page is being rendered as follows...

AppRegistry.registerComponent('beacon', () => Home);

And my Home is simply something like...

export default Home = () => {
    return (
        <Provider store={store}>
            <MainMap />
        </Provider>
    );
}

Where/How do I add this script tag to include Leaflet.js? Is it even possible? Is there perhaps another solution?

I haven't seen any examples of react-native and Leaflet.js, if there is one, on github or what not, I'd be happy to see it.

score 19 · Accepted Answer · answered Nov 02 '16 at 06:14

19

There is a project react-leaflet through which you can use leaflet.js with react.

But currently there is no support for using leaflet.js in react-native. See this issue for more info.

answered Nov 02 '16 at 06:14

Jickson

5,133
2
27
38

score 5 · Answer 2 · edited Jun 20 '20 at 09:12

5

Please check this out react-native-maps recommended by react native

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 24 '17 at 06:19

Sareuon

637
1
7
9

2

yeah I ended up going with this – buydadip Jan 24 '17 at 17:03
11

It's a good answer, although not good enough if you were looking for a map API compatible with React Native that uses Open Street Map data. react-native-maps uses Apple Maps and Google Maps. – xarlymg89 Oct 24 '17 at 13:15
10

We don't want to pay to Google. $200 free tier is not enough. – johnny Jan 08 '19 at 18:11
use https://github.com/rnmapbox/maps instead - uses mapbox – flaky Jan 20 '23 at 11:12

score 5 · Answer 3 · answered Jul 08 '19 at 16:13

5

There is one project I found online that addresses leaflet with React Native: https://github.com/reggie3/react-native-webview-leaflet

answered Jul 08 '19 at 16:13

Matthieu Brucher

21,634
7
38
62

2

Do you know is there any performance penalty for using this instead of `react-native-maps`? I want to use this with `openstreetmap` data. – pouya Jan 25 '20 at 21:36
I ended up using react-native-maps, despite this shortcoming, as otherwise I had problems due to the fact that it's a webview and not a native component. – Matthieu Brucher Jan 26 '20 at 09:52
1

This project is deprecated because no longer maintained. This one is said to be the most recent and up to date : https://github.com/pavel-corsaghin/react-native-leaflet – Brice Joosten Feb 07 '22 at 09:14

score 0 · Answer 4 · answered Apr 22 '23 at 00:41

If you actually want to use leftlet you can host it on website and use react native webview to run in you can sent data between app and web via postMessage function of webview but performance is not good though compare to react native map but atleat you can use bunch of leftlet plugin

How to use leaflet.js with react-native

4 Answers4

Linked