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

# Bản đồ cho app Expo — VIETMAP GL React Native SDK

_Thư viện React Native để dựng bản đồ, dựa trên
[Vietmap GL Native SDK cho iOS và Android](https://bit.ly/vietmap-api)_.

`@vietmap/vietmap-gl-react-native` hiển thị **vector tile của VIETMAP** trong app Expo hoặc React Native thuần, cùng dữ liệu với [SDK Web](https://maps.vietmap.vn/docs/vi/sdk-web-gl/overview/) và SDK native Android/iOS: dữ liệu Việt Nam chi tiết tới thôn, ấp, cập nhật hàng tuần. Tile vector được vẽ bằng native nên kéo, zoom mượt ở 60fps và đổi được style lúc đang chạy.

Khác với `react-native-maps` (hiển thị bản đồ nền Google hoặc Apple), SDK này hiển thị bản đồ của chính VIETMAP và dùng chung API key với các API [tìm địa chỉ](https://maps.vietmap.vn/docs/vi/map-api/autocomplete-version/autocomplete-v4/), [chỉ đường](https://maps.vietmap.vn/docs/vi/map-api/route-version/route-v4/) và phí cầu đường.

!!! warning "Không chạy được trên Expo Go"
    SDK có code native nên không chạy trong app **Expo Go**, vì Expo Go chỉ chứa các module native do Expo đóng gói sẵn. Hãy dùng **development build** (`expo prebuild` rồi chạy local, hoặc EAS Build). Build trên EAS cloud chạy bình thường. **Không** cần eject.

## Bắt đầu

## **QUAN TRỌNG**
> Làm theo các bước dưới thì app không chạy được trên Expo Go nữa, phải debug bằng development build. Build trên EAS cloud vẫn chạy bình thường.


## Thêm package
```bash
yarn add @vietmap/vietmap-gl-react-native
```

Phiên bản mới nhất xem tại [https://www.npmjs.com/package/@vietmap/vietmap-gl-react-native](https://www.npmjs.com/package/@vietmap/vietmap-gl-react-native)
<br>
## Chạy prebuild để sinh thư mục android và ios
```bash
npx expo prebuild
```
## Thêm thư mục android và ios vào .gitignore
```bash
echo "/android/" >> .gitignore && echo "/ios/" >> .gitignore
``` 
Khi chạy `eas build`, Expo cloud tự sinh lại hai thư mục android và ios.
```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`.

```

Xem thêm: [https://docs.expo.dev/workflow/continuous-native-generation/](https://docs.expo.dev/workflow/continuous-native-generation/)
## Cấu hình native
- Cần cấu hình thêm cho module native thì làm như sau.
Thêm một object con vào object `ios` trong `app.json`, ví dụ:

```json
"infoPlist": {
  "NSLocationWhenInUseUsageDescription": "When in use permissions description"
},
"android":{
    ...
    "permission":["YOUR_PERMISSION_HERE"],
    ...
}
```
## Hiển thị bản đồ
Thêm đoạn sau vào `package.json`
```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"
```
Chạy `npm i` hoặc `yarn install` để cài package

Thêm hai file [ShowMap.js](https://maps.vietmap.vn/docs/vi/sdk-mobile/react-native/docs/ShowMapSample/) và [Navigation.js](https://maps.vietmap.vn/docs/vi/sdk-mobile/react-native/docs/NavigationSample/) vào thư mục gốc dự án

Thêm đoạn sau vào `App.js` hoặc `App.tsx`
```js
export default function App() {
  return (
    <SafeAreaView style={{flex:1}}>
      <Navigation />
    </SafeAreaView>
  );
}
```

Chạy dự án

Tài liệu đầy đủ xem ở [SDK React Native](https://maps.vietmap.vn/docs/vi/sdk-mobile/react-native/map/) hoặc [repository trên GitHub](https://github.com/vietmap-company/vietmap-gl-react-native.git)