react-native-yandexmapkit v0.1.4

react-native-yandex-map-kit

This is a wrapper around Yandex Map Kit for iOS and Android.

Since original projects are in deep coma, here I only support features that I needed for my other projects. If you need markers, callouts or polygons, I suggest you use react-native-maps. However, if you must use yandex map kit in your react-native projects and you need any of these features, I encourage you to contribute. Just be sure to check out both of the original SDKs before you implement anything, because they are quite different!

Note that Android version might not work properly on emulators, which results in map tiles not being rendered.

Installation

$ npm install react-native-yandexmapkit --save

Android

1. Run react-native link

2. Add following permissions to your android/app/src/AndroidManifest.xml:

   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
   <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
   <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
   <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
   <uses-permission android:name="android.permission.READ_PHONE_STATE" />
   <uses-permission android:name="android.permission.WRITE_SETTINGS" />

3. Add yandexmapkit-android repo to your android/build.gradle:

   allprojects {
     repositories {
         ...
         maven { url 'https://github.com/yandexmobile/yandexmapkit-android/raw/maven/' }
     }
   }

iOS

1. This module requires CocoaPods to be used in iOS project. To add CocoaPods to your React Native project, follow steps 2 throught 7 of this tutorial. Add this line

   ```ruby
   pod 'react-native-yandexmapkit', :path => '../node_modules/react-native-yandexmapkit'
   ```
   to your Podfile (you may need to adjust path if you have non-standard project structure).
   	And then run `pod install` (if you’re setting up Cocoapods for the first time) or `pod update` (if you’re adding MoPub to an existing CocoaPods project).

2. Add NSLocationWhenInUseUsageDescription key in Info.plist if you want to display user's location.

3. Make sure that yandex maps can download stuff by configuring App Transport Security

Usage

1. You'll need Yandex Map Kit API key. To obtain it, you need to send e-mail to Yandex support. You can find more info on this here: EN, RU.

2. import { YandexMapKit, YandexMapView } from 'react-native-yandexmapkit';

3. Make sure to call YandexMapKit.setApiKey(YANDEXMAPKIT_API_KEY); before mounting YandexMapView component.

4. Render YandexMapView component:

   	<YandexMapView ref="yandexMap" onInteraction={this.onInteraction} region={this.state.region}
                          showMyLocation={true} geocodingEnabled={true} onGeocoding={this.onGeocoding}
                          showMyLocationButton={true}/>

Component API

Props

Android-only props

The component exposes some Android-only props that control map UI:

• showBuiltInScreenButtons: PropTypes.bool,
• showFindMeButton: PropTypes.bool,
• showJamsButton: PropTypes.bool,
• showScaleView: PropTypes.bool,
• showZoomButtons: PropTypes.bool,
• interactive: PropTypes.bool,
• hdMode: PropTypes.bool,

Events

Methods

YandexMapKit API

Example

You can find it here

You'll need to create .env.development property file in example dir and put your YANDEXMAPKIT_API_KEY in it.