Source: https://maps.vietmap.vn/docs/sdk-mobile/react-native/expo-map/

# 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](https://bit.ly/vietmap-api)_.

`@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](https://maps.vietmap.vn/docs/sdk-web-gl/overview/) 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](https://maps.vietmap.vn/docs/map-api/autocomplete-version/autocomplete-v4/), [routing](https://maps.vietmap.vn/docs/map-api/route-version/route-v4/) and toll APIs.

!!! warning "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
```bash
yarn add @vietmap/vietmap-gl-react-native
```

Check the latest version at [https://www.npmjs.com/package/@vietmap/vietmap-gl-react-native](https://www.npmjs.com/package/@vietmap/vietmap-gl-react-native)
<br>
## Run prebuild to generate android & iOS folder
```bash
npx expo prebuild
```
## Add android and iOS folders to gitignore
```bash
echo "/android/" >> .gitignore && echo "/ios/" >> .gitignore
``` 
Expo cloud build will auto-generate the android & ios folders while run eas build.
```text
"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/](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:

```json
"infoPlist": {
  "NSLocationWhenInUseUsageDescription": "When in use permissions description"
},
"android":{
    ...
    "permission":["YOUR_PERMISSION_HERE"],
    ...
}
```
## Show the map
Add the below code to `package.json` file
```json
    "@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](https://maps.vietmap.vn/docs/sdk-mobile/react-native/docs/ShowMapSample/) and [Navigation.js](https://maps.vietmap.vn/docs/sdk-mobile/react-native/docs/NavigationSample/) files to the root project 

Add the below code to `App.js/App.tsx` file
```js
export default function App() {
  return (
    <SafeAreaView style={{flex:1}}>
      <Navigation />
    </SafeAreaView>
  );
}
```

Run the project

For more documentation, follow guide from [VietMap React Native document](https://maps.vietmap.vn/docs/sdk-mobile/react-native/map/) or [this repository](https://github.com/vietmap-company/vietmap-gl-react-native.git)