Vietmap GL SDK for React Native - Expo¶

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

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`.

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

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

Vietmap.setApiKey(null) must be called when the app initial.

Run the project

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