Getting Started¶

Congratulations, you successfully installed vietmap-gl-react-native! 🎉 This quickstart guide provides a zero-to-map intro, and from there you can check out the examples folder if you want to jump in the deep end.

Prerequisites¶

On Android we support API 23 and higher
You will need a vector tile source from Vietmap for production use;

Dependencies¶

Installation¶

Set up a React Native project¶

If you don't have an existing React Native project, create one:

npx react-native init MyApp

Install Package¶

From your React Native project's root directory, add the package via either yarn or npm (pick one).

# install with Yarn
yarn add @vietmap/vietmap-gl-react-native

# install with NPM
npm install @vietmap/vietmap-gl-react-native --save

Review platform specific info¶

Check out the installation guide(s) for additional information about platform-specific setup, quirks, and steps required before running.

Adding a map¶

Here is an example minimal App.js

import React, {Component} from 'react';
import {StyleSheet, View} from 'react-native';
import Vietmap from '@vietmap/vietmap-gl-react-native';

// Will be null for most users (only Vietmap authenticates this way).
// Required on Android. See Android installation notes.

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  map: {
    flex: 1,
    alignSelf: 'stretch',
  },
});

export default class App extends Component {
  render() {
    return (
      <View style={styles.page}>
        <Vietmap.MapView
          style={styles.map}
          styleURL="https://maps.vietmap.vn/api/maps/light/styles.json?apikey=YOUR_API_KEY_HERE"
        />
      </View>
    );
  }
}

Run it!¶

iOS¶

# Run with yarn
yarn run ios

# or Run with NPM
npm run ios

Android¶

# Run with yarn
yarn run android

# or Run with NPM
npm run android