Getting Started with the Mapbox Maps SDK for React Native

_mapbox-maps-sdk-for-react-native.md

Example code for the blog post: XXXX

Code Examples for my Blog Post: Getting Started with the Mapbox Maps SDK for React Native

example-1.js

import React, {Component} from 'react';
import {View} from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';

MapboxGL.setAccessToken(YOUR_ACCES_TOKEN);

export default class App extends Component<{}> {
  render () {
    return (
      <View style={{flex: 1}}>
          <MapboxGL.MapView
          ref={(c) => this._map = c}
          style={{flex: 1}}>
        </MapboxGL.MapView>
      </View>
      );
  }
}

example-2.js

import React, {Component} from 'react';
import {View} from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';

MapboxGL.setAccessToken(YOUR_ACCES_TOKEN);

export default class App extends Component<{}> {
  render () {
    return (
      <View style={{flex: 1}}>
          <MapboxGL.MapView
          ref={(c) => this._map = c}
          style={{flex: 1}}
          zoomLevel={1}>
        </MapboxGL.MapView>
      </View>
      );
  }
}

example-3.js

import React, {Component} from 'react';
import {View} from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';

MapboxGL.setAccessToken(YOUR_ACCES_TOKEN);

const columbusCircleCoordinates = [
  -73.98197650909422, 40.768793007758816
];

export default class App extends Component<{}> {
  render () {
    return (
      <View style={{flex: 1}}>
          <MapboxGL.MapView
          ref={(c) => this._map = c}
          style={{flex: 1}}
          zoomLevel={15}
          centerCoordinate={columbusCircleCoordinates}>
        </MapboxGL.MapView>
      </View>
      );
  }
}

package.json

{
  "name": "mapboxSdkExample",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@mapbox/react-native-mapbox-gl": "^6.0.2",
    "react": "16.0.0",
    "react-native": "0.51.0"
  },
  "devDependencies": {
    "babel-jest": "22.0.4",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.0.4",
    "react-test-renderer": "16.0.0"
  },
  "jest": {
    "preset": "react-native"
  }
}