Expo Maps for Vietnam — VIETMAP GL React Native SDK

A React Native library for building maps with
the Vietmap GL Native SDK for iOS & Android.

@vietmap/vietmap-gl-react-native renders VIETMAP vector tiles inside an Expo or bare React Native app — the same map data used by the Web GL SDK and the native Android/iOS SDKs, built for Vietnam and refreshed weekly down to village level. Because it draws vector tiles natively, it pans and zooms at 60fps and styles can be changed at runtime.

Unlike react-native-maps, which renders the Google or Apple base map, this SDK renders VIETMAP's own map and shares one API key with the VIETMAP address search, routing and toll APIs.

Expo Go will not work

The SDK ships native code, so it cannot run inside the Expo Go app — Expo Go only contains the native modules Expo bundles itself. Use a development build (expo prebuild + a local run, or EAS Build). EAS cloud builds work normally. You do not need to eject.

Get started

IMPORTANT

If you run below flow, the app will not run with the Expo Go app, you must debug with the development build. The EAS cloud build will run normally.

Add the package

yarn add @vietmap/vietmap-gl-react-native

Check the latest version at https://www.npmjs.com/package/@vietmap/vietmap-gl-react-native

Run prebuild to generate android & iOS folder

npx expo prebuild

Add android and iOS folders to gitignore

echo "/android/" >> .gitignore && echo "/ios/" >> .gitignore

Expo cloud build will auto-generate the android & ios folders while run eas build.

"Prebuild" just generates the native android and ios projects and 
applies any config plugins while doing so.

On the build server, if the android and ios directories are missing, 
then the build server will automatically run prebuild to generate them.

So while prebuild is required for every Expo app, the user 
has the choice of running it themselves and uploading it to the build servers, 
or letting the build servers generate the native projects.

Also, if you run `npx expo run` then it will first prebuild and then build using 
`gradlew/xcodebuild`.

See also: https://docs.expo.dev/workflow/continuous-native-generation/

Native configuration

• If you need add some configuration on the native module, follow this guide You can add an object as a child of an ios object in the app.json like so:

"infoPlist": {
  "NSLocationWhenInUseUsageDescription": "When in use permissions description"
},
"android":{
    ...
    "permission":["YOUR_PERMISSION_HERE"],
    ...
}

Show the map

Add the below code to package.json file

    "@vietmap/vietmap-gl-react-native": "^0.0.6",
    "@react-navigation/native": "5.7.3",
    "@react-navigation/stack": "5.9.0",
    "@types/geojson": "^7946.0.14",
    "react-native-elements": "3.4.3",
    "react-native-gesture-handler": "1.10.3",
    "react-native-safe-area-context": "3.3.2",
    "react-native-select-dropdown": "3.4.0",
    "react-native-vector-icons": "^10.0.3"

Run npm i or yarn install to install the packages

Add ShowMap.js and Navigation.js files to the root project

Add the below code to App.js/App.tsx file

export default function App() {
  return (
    <SafeAreaView style={{flex:1}}>
      <Navigation />
    </SafeAreaView>
  );
}

Run the project

For more documentation, follow guide from VietMap React Native document or this repository