elm-native-ui-maps

Elm bindings to react-native-maps which takes over original MapView component in the #react-native. As of the version 0.42, the reference to MapView is removed from React Native components.

Dependencies

This package is tested on the following versions,

• [email protected] and 42.0
• [email protected]
• [email protected]
• elm-native-ui@latest

Running the example

I have created a simple exapmle showing a MapView and a ScrollView with a list of station names. By touching a station name, the map center move to the selected stations's coordinate, then shows the corresponding callout, the marker pop ups to front and animates slightly. Not sophisticated UI design, but it is working pretty well.

React Native part

Create a new React Native app:

$ react-native init GoogleMapsExample

Install required npm packages:

$ cd GoogleMapsExample
$ npm install

Before going futher you need to setup react-native-maps by following their installation instructions. If you want to use Google Maps on iOS devices, you should apply ONLY Option 1 exactly. For React Natie 0.42.0 support please refer this.

Elm part

Copy all files in the examples/GoogleMapsExample to the top level of the app directory.

$ cp examples/GoogleMapsExample/* .

Install Elm packages with elm-install.

$ elm-install

Then compile as nomral Elm code.

$ npm run build

Start the app.

$ react-native run-ios

or

$ react-native run-android

Limitations

• Some features are supported only specific platform only, please consult with the original documentations and issues.