maps for developers

The (former) official Mapbox blog. See mapbox.com/blog for current content.

Follow publication

Maps SDK for React Native

Mapbox
maps for developers
2 min readNov 9, 2017

--

By: Nick Italiano

We just released our Maps SDK for React Native, a cross-platform solution of reusable JavaScript components for building mapping & location into your Android and iOS apps.

With React Native, you can write your app once and reduce the cycle time it takes to develop high-quality mobile applications. It eliminates the need to recompile your code and lets you take advantage of the rich JavaScript components within the React Native framework.

React Native app example of an ice cream store finder on Android (left) and iPhone (right)

Take a look at how we used React Native to build the store locators above for both iOS and Android:

Our Maps SDK for React Native brings all the functionality of our Maps SDKs for Android and iOS to React Native and builds upon the alpha we released a few weeks ago. This new SDK version also supports runtime styling and data-driven styling, allowing you to dynamically change the map style and data displayed on your map in real time within your hybrid app. The SDK includes abstractions like our stylesheet component to quickly style your map layers similar to CSS, as well as full compatibility with React Native’s Animated API.

With the combination of runtime styling and data-driven styling, as well as our stylesheet component, you can customize every single aspect of your map. Here we’ve clustered together thousands of earthquakes as points on a map and visualized how many earthquakes are within a given radius. The ShapeSource in the SDK includes a clusterRadius option allowing you to pass in a data source with a collection of points. With data-driven styling, you can then filter and style the data source based on the radius.

Clustering earthquakes using the Maps SDK for React Native

Explore our Maps SDK for React Native and get started with our First Steps tutorial. Ping me @nitaliano in our GitHub repo with questions, features requests, or if you would like to contribute to the SDK. Stay tuned for more updates as we continue supporting React Native developers building with our tools.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Written by Mapbox

mapping tools for developers + precise location data to change the way we explore the world

Responses (8)

Write a response