React NativeでMapboxを使ったiOSアプリを作る

はじめまして！

パーソルプロセス＆テクノロジー株式会社（以下パーソルP&T）、システムソリューション（SSOL）事業部所属の堀江です。

私はモビリティソリューションデザインチームに所属しており、**モビリティ（ここでは移動手段全般）に関するサービスを考えたり、アプリを構築したりしております。**

いわゆる**「MaaS」**に取り組んでおります。

私たちが「MaaS」に取り組む中で、**現在活用している、もしくは活用する予定の技術やサービスやとりあえず発信したいこと**などなど、幅広くチームメンバーと共に執筆していきたいと思います。
メンバーごとに違った内容を発信していきますので、お楽しみに！

また、「MaaS」について詳しく知りたい方は、チームメンバーの吉田が記事を掲載しておりますので、
ぜひそちらをご覧ください。

[「MaaSとは」でたどり着いて欲しい記事　（1/3 前編）](https://note.com/ppt_msdg_maas/n/naae427dbc37c)
[「MaaSとは」でたどり着いて欲しい記事　（2/3 中編）](https://note.com/ppt_msdg_maas/n/na45c90b2f02f)
[「MaaSとは」でたどり着いて欲しい記事　（3/3 後編）](https://note.com/ppt_msdg_maas/n/n8fd724f7db6c)

## 目次
第１回　React NativeでMapboxを使ったiOSアプリを作る　→今ココ
第２回　[npm install --global expo-cli がエラーになる](https://qiita.com/ppt_msdg_maas/items/659f642b20bf5976e37e)

## やること
**React NativeでMapboxを使ったiOSアプリ**を作成します。
今回は地図が表示されるところまでやります。
次回以降はMapboxのレイヤーを使ってデータの可視化などをしていく予定です。
最終的にリリースまでやれればと思います。

## 事前準備
- Xcodeのインストール
- NodeJSのインストール(v12.18.3でやりました)
- CocoaPodのインストール(v1.10.1でやりました)
- Mapbox Access Tokenの取得(URLは[こちら](https://account.mapbox.com/access-tokens/))

## expo-cliのインストール
プロジェクト作成にexpoを使用します。

```
npm install --global expo-cli
```

## プロジェクトの作成
Bare workflowのminimal (TypeScript)を選択します。

```
mkdir dev
cd dev
expo init react-native-mapbox-demo
? Choose a template: › - Use arrow-keys. Return to submit.
    ----- Managed workflow -----
    blank                 a minimal app as clean as an empty canvas
    blank (TypeScript)    same as blank but with TypeScript configuration
    tabs (TypeScript)     several example screens and tabs using react-navigation and TypeScript
    ----- Bare workflow -----
    minimal               bare and minimal, just the essentials to get you started
❯   minimal (TypeScript)  same as minimal but with TypeScript configuration
```

## デフォルトアプリの起動

```
cd react-native-mapbox-demo/
expo start
```

左メニューの「Run on iOS simulator」をクリック

こんな画面が表示されると思います。
![Simulator Screen Shot - iPhone 11 - 2021-05-12 at 20.09.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/86eb762a-2630-2bd2-c25c-fdd9f064f8e3.png)

## react-native-mapbox-glのインストール
バージョン指定しないとうまくいかなかったので、8.1.0を使いました。

```
yarn add '@react-native-mapbox-gl/maps@^8.1.0'
```

## iOS側のライブラリを更新する

```
cd ios
pod install
```

## App.tsxにMapboxのコードを書く
`<YOUR_ACCESSTOKEN>`に上記で準備したMapbox Access Tokenに置き換ます。

Mapbox Access Tokenは「"」(ダブルコーテーション)で囲ってください。

```App.tsx
import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
import MapboxGL from "@react-native-mapbox-gl/maps";

MapboxGL.setAccessToken("<YOUR_ACCESSTOKEN>");

export default function App() {
  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <MapboxGL.MapView
          style={styles.map}
          styleURL={MapboxGL.StyleURL.Street}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  container: {
    height: 300,
    width: 300,
    backgroundColor: "tomato",
  },
  map: {
    flex: 1,
  },
});
```

## アプリ起動

```
cd ..
yarn run ios
```

![Simulator Screen Shot - iPhone 11 - 2021-05-14 at 17.28.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1457643/93b43be3-899d-bc39-3396-264f23e4d7e8.png)

## 解説
ちょっと解説します。
実は、**expoはreact-native-mapbox-glにまだ対応していない**ようで、`expo start`するとエラーになります。**(※ 2021年5月時点)**

expoで使えないライブラリを使う場合は、プロジェクト作成時にBare workflow選択するか、ejectする必要があります。
Bare workflowにすると、プロジェクト配下にios,androidフォルダが作成されて、
iosの場合は、`pod install`をすることで、JSライブラリがネイティブアプリで使えるようになります。

しかし、Bare workflow(eject)にすると、アプリリリース時にXcodeでビルドしないといけないため、expoのメリットが全く活かせずかなり微妙です・・・
(expoを用いるとアプリリリースがかなり簡単になります)

また、今回expoを使ったのは、typescriptのプロジェクト作成が一番簡単だったからなので、
typescriptでなくても良い方はreact-native initでプロジェクト作成するのが良いかと思います。
（react-nativeでプロジェクト作成するとプロジェクト名にハイフンが入れられないので注意が必要です)


## 最後に
React NativeでMapboxを動かす方法をご紹介しました。
次回はMapboxのマップオプション周りの設定を解説する予定です。お楽しみに！

##### 最後まで読んでいただき、ありがとうございました！