React Native Map Component Based on Leaflet JS

Click below to see a demo of the component in action. YouTube Demo Video The video demonstrates the various types of maps that can be displayed, animated markers, marker and map click-ability, and map centering.

Quiz: Can you figure out what the three different buttons at the bottom are for? The answer is at the end of this post.

So far, react-native-webview-leaflet (RNWL) has been my favorite open source creation. I built it because I wanted a React Native map component that would let me animate markers. This was a capability that the react-native-maps component did not have at the time I created RNWL.

The Leaflet.js library, the React-Leaflet component, and the techniques I wrote about in my Medium blog post titled Sharing Code Between React Web and React Native Applications provided the foundations for bulding this component. The great thing about using Leaflet was that it provides a pure CSS, HTML, JavaScript solution. This means that HTML elements like markers can be animated using standard CSS techniques.

The GitHub repo for the project can be found here: Github Repo

You can test the component by scanning this QR code with the Expo application on your Android device. Scan this code to play the app in Expo

SPOILERS BELOW: The three buttons center the maps on three different theme parks / resorts:

  • The castle is the Walt Disney World Resort in Orlando, Florida
  • The mug of bear is my home-park; Busch Gardens in Williamsburg, Virginia
  • The crown represents Kings Dominion in Doswell, Virginia
Published 20 Dec 2018

A place for my portfolio, blog posts, articles, and projects.
Reginald Johnson on LinkedIn