react-native-maps

  • Default markers will be rendered unless a custom marker is specified.
  • Callouts to markers can be completely arbitrary react views, similar to markers.
  • Marker views can use the animated API to enhance the effect.
  • Markers can be customized by just using images, and specified using the image prop.
  • Issue: Since android needs to render its marker views as a bitmap, the animations APIs may not be compatible with the Marker views.

React Native Mapview component for iOS + Android

@spikebrehm: Just published react-native-maps@0.9.0-rc.0, with new features: Google Maps on iOS, custom tiles, Android litemode

Due to the rapid changes being made in the React Native ecosystem, we are not officially going to support this module on anything but the latest version of React Native. With that said, we will do our best to stay compatible with older versions as much that is practical, and the peer dependency of this requirement is set to

“react-native”: “*”

explicitly for this reason. If you are using an older version of React Native with this module though, some features may be buggy.

. React Native versions from 0.18 should be working out of the box, for lower versions you should add

or

This MapView component is built so that features on the map (such as Markers, Polygons, etc.) are specified as children of the MapView itself. This provides an intuitive and react-like API for declaratively controlling features on the map.

component and its child components have several events that you can subscribe to. This example displays some of them in a log as a demonstration.

prop. The component methods will allow one to animate to a given position like the native API could.

prop be declared as an animated value. This allows one to animate the zoom and position of the MapView along with other gestures, giving a nice feel.

Further, Marker views can use the animated API to enhance the effect.

Issue: Since android needs to render its marker views as a bitmap, the animations APIs may not be compatible with the Marker views. Not sure if this can be worked around yet or not.

Markers’ coordinates can also be animated, as shown in this example:

, and

component.

prop.

Callouts to markers can be completely arbitrary react views, similar to markers. As a result, they can be interacted with like any other view.

‘s

and

props.

Custom callout views can be the entire tooltip bubble, or just the content inside of the system default bubble.

prop.

Markers are draggable, and emit continuous drag events to update other UI during drags.

The API of this Map has been built with the intention of it being able to utilize the Animated API.

In order to get this to work, you will need to modify the

file in the source of react-native with this one.

Ideally this will be possible in the near future without this modification.

prop. This allows you to utilize the Animated API to control the map’s center and zoom.

value as a coordinate.

currently only for ios, android implementation WIP

Pass an array of marker identifiers to have the map re-focus.

Bad:

react-native-maps