# MapMagic GL SDK for React Native
MapMagic is a React-Native library that simplifies your life.

Visit our official website at https://www.mapmagic.co.th
## Installation

**Dependencies**

* [node](https://nodejs.org)
* [npm](https://www.npmjs.com/)
* [React Native](https://facebook.github.io/react-native/) recommended version 0.50 or greater

**Yarn**
```
yarn add react-native-mapmagic-gl
```

**Npm**
```
npm install react-native-mapmagic-gl --save
```

**or**

**Source Code**

* clone source code from [gitlab](https://gitlab.thinknet.co.th/mobile/react-native-mapmagic-gl)
```
git clone git@gitlab.thinknet.co.th:mobile/react-native-mapmagic-gl.git
```
* install node_module dependencies
```
cd react-native-mapmagic-gl
npm install
```
* pack project to node_module ( result in react-native-mapmagic-gl-x.x.x.tgz file)
```
npm pack
```
* move file to `project` and edit file `package.json`
```
 "dependencies": {
    ...
    ,
    "react-native-mapmagic-gl": "file:{pathtofile}"
  },
```
* install node_module dependencies in `project`
```
npm install
```

## Installation Guides

* [Android](/android/install.md)
* [iOS](/ios/install.md)

#### Note on `iOS`
In the `Info` of your application target Add Key `MGLMapboxMetricsEnabledSettingShownInApp` -> `YES` 

## Run Example in Source Code

* [android example](/example/runandroid.md)
* [ios example](/example/runios.md)

## Example
```javascript
import MapboxGL from 'react-native-mapmagic-gl';

....

<MapboxGL.MapMagicView 
  style={{ flex: 1 }}
  showUserLocation={true}
  zoomLevel={12}
  app_id={'xxxx'}
  api_key={'xxx'}
  lang={'en'}
  userTrackingMode={MapboxGL.UserTrackingModes.Follow}/>
```