Longdo Map Component for React Native

• Setting Up (Expo)
• Setting Up (Native)
• Getting Started
• Documentation
• Version

Setting Up (Expo)

Install & init project

npm install -g expo-cli
expo init <project name>
cd <project name>
expo install react-native-webview
npm install longdo-map-react-native

Config babel.config.js

    presets: [
      'babel-preset-expo',
      ['@babel/preset-env', { "targets": "iOS >= 11, Android >= 56" }],
    ],

Config app.json

    "ios": {
      "bundleIdentifier": "BUNDLE_ID",
...
    "android": {
      "package": "PACKAGE_NAME",

Then, Register BUNDLE_ID, PACKAGE_NAME at https://map.longdo.com/api to obtain API_KEY

Setting Up (Native)

Follow React Native CLI Quickstart instruction and run

npm install react-native-webview longdo-map-react-native
npm install -D @babel/preset-env

Config babel.config.js

  presets: [
    'module:metro-react-native-babel-preset',
    ['@babel/preset-env', { "targets": "iOS >= 11, Android >= 56" }],
  ],

From app.json

  "name": PROJECT_NAME,

Register PROJECT_NAME at https://map.longdo.com/api to obtain API_KEY

Getting Started

Add MapView in App.js

import Longdo from 'longdo-map-react-native';

In main App function

Longdo.apiKey = 'API_KEY';

If module fail to auto-detect app's bundle ID, add Longdo.bundleId = 'REGISTERED_ID';

Under root View

<Longdo.MapView />

In StyleSheet

alignItems: 'stretch'

For complete file, see example/App.js

Run in Simulator

npm run ios
npm run android

Follow this instruction to run on Mac M1

Documentation

• Reference 3.x
• Reference 1.x
• JavaScript documentation

Version

• 3.x: Vector map GL backend
• 1.x: Raster map backend