React Native Mapbox のサンプルアプリを動かしてみる

## はじめに

最近ネイティブアプリを React Native を使用して、アプリを開発する機会が増えていると思います。React と JS の知識が必要ですが、クロスプラットフォームの恩恵を受けることができます。一つのソースコードで、iOS と Android のアプリが開発できるので、メリットは大きいです。
今回は、地図アプリの開発で便利な SDK の一つでもある Mapbox が提供している [React Native Mapbox](https://github.com/react-native-mapbox-gl) を使って、iOS でサンプルアプリを動かすところまでを紹介したいと思います。そのため、今回使用した PC は Mac OS となります。
 
実は、当初は、React Native で mapbox を使用する場合に苦戦していた部分もあり、特にサンプルアプリを動かすまでに少しはまりましたので、その部分もお伝えできればと思います。
<img width="350" alt="React Native Mapbox インストール" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/0b6ae4a9-86cf-c372-44f7-295c2e7ce69d.png">

## インストールでの注意事項
[インストールガイド](https://github.com/react-native-mapbox-gl/maps)では幾つか手順が書いていますが、はじめに Installation の記載の通りのステップで行い、その後、Installation Guides の example に記載しているガイドに従って行いましたが、うまくいかず失敗しました。注意点としては、Installation でのステップは行わず、必ず example に入ってから `npm install` を行う必要があります。

|<img width="350" alt="React Native Mapbox インストール" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/ab072d42-1d4a-f6ca-da6b-7b09680cb01d.png">|
|:-:|

## インストール手順
基本は、example の[インストールガイド](https://github.com/react-native-mapbox-gl/maps/tree/master/example) に従って実行すれば問題なく、シュミレーターで確認することができました。

npm、node の各バージョンは、以下のとおりです。

```
$ npm -v
6.14.2

$ node -v
v13.9.0
```

### 1. 本体をダウンロード
サンプルアプリを起動するまでのステップですが、まず、react-native-mapbox-gl の [maps](https://github.com/react-native-mapbox-gl/maps) をクローンします。クローン後、example に移動します。

### 2. accesstoken の作成
example に移動後、accesstoken を作成します。accesstoken は、mapbox の地図を使用する場合に必要となります。accesstoken は Mapbox の token を入れます。 ダブルコーテーション "" などは入れないでください。詳しくは、[Mapbox access token](https://www.mapbox.com/studio/account/tokens/) を参照してください。

### 3. npm install の実行
accesstoken を作成後に npm install を行います。もし、`npm install` で失敗する場合は、`$ rm -rf node_modules/*/.git/`で削除してから、再度 `npm install` をしてください。

```
npm ERR! code EISGIT
npm ERR! git /Users/fredrikve/Stagecast/goteborgsvarvapp/node_modules/react-native-safe-area-view: Appears to be a git repo or submodule.
npm ERR! git     /Users/fredrikve/Stagecast/goteborgsvarvapp/node_modules/react-native-safe-area-view
npm ERR! git Refusing to remove it. Update manually,
npm ERR! git or move it out of the way first.
```

### 4. iOS シミュレーターの実行
`npm install`後に以下のコマンドを実行します。

```
$ cd ios && pod install --verbose && cd ..
$ react-native run-ios
```

`$ cd ios && pod install --verbose && cd ..`では、インストールに少し時間がかかります。インストールに失敗しなければ以下のような画面が表示されます。その後、`$ react-native run-ios`を実行することで、iOS シミュレーターが起動します。

```
....
Integrating client project

Integrating target `Pods-RNMapboxGLExample` (`RNMapboxGLExample.xcodeproj` project)

Integrating target `Pods-RNMapboxGLExample-tvOS` (`RNMapboxGLExample.xcodeproj` project)

Integrating target `Pods-RNMapboxGLExample-tvOSTests` (`RNMapboxGLExample.xcodeproj` project)

Integrating target `Pods-RNMapboxGLExampleTests` (`RNMapboxGLExample.xcodeproj` project)
  - Writing Lockfile in `Podfile.lock`
  - Writing Manifest in `Pods/Manifest.lock`
  - Running post install hooks
    - cocoapods-stats from
    `/Users/kamiya/.rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/gems/cocoapods-stats-1.1.0/lib/cocoapods_plugin.rb`
      CDN: trunk Relative path: CocoaPods-version.yml exists! Returning local because checking is only perfomed in repo
      update

-> Pod installation complete! There are 39 dependencies from the Podfile and 46 total pods installed.
```

Rect Native Mapbox GL の各機能の挙動が確認できます。
<img width="350" alt="Rect Native Mapbox GL" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/d50c970f-1856-6cee-7827-ff2f25078f47.png">

### 5. 最後に

実際に開発する時に必要となる API リファレンスなどは、以下で確認いただけます。
https://github.com/react-native-mapbox-gl/maps/tree/master/docs

また、開発者向けのグループとして、Gitter があり、こちらでは活発に質問などが行われています。
[Gitter developer group!](https://gitter.im/react-native-mapbox-gl/Lobby)