MapirReatNativeSDK

React Native wrapper for mapbox-gl-js. Expose a bunch of component meant to be simple to use for React Native.

Get API Key

🔑 You should first get api key from Map.ir

Installation

Dependencies

• node
• npm
• React Native recommended version ^0.62.2

npm install mapir-react-native-sdk

Platform Specific Installation Guides

• Android
• iOS
• example

Quick start

Import module

import React, {Component} from 'react';
import { SafeAreaView, StyleSheet, View} from 'react-native';
import Mapir from 'mapir-react-native-sdk'

Generate Component

export default function App() {
  onRegionDidChange = (e) => {
    console.log('onRegionDidChange', e.geometry.coordinates);
  };
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.container}>
        <Mapir
          apiKey={'YOUR_MAPIR_API_KEY'}
          onRegionDidChange={(e) => onRegionDidChange(e)}
          style={styles.container}
        >
          <Mapir.Camera
            zoomLevel={13}
            centerCoordinate={[51.422548, 35.732573]}
          />
        </Mapir>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

📖 English Documentation

📖 Persian Documentation