はじめまして！

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

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

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

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

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

「MaaSとは」でたどり着いて欲しい記事　（1/3 前編）
「MaaSとは」でたどり着いて欲しい記事　（2/3 中編）
「MaaSとは」でたどり着いて欲しい記事　（3/3 後編）

目次

第１回　React NativeでMapboxを使ったiOSアプリを作る　→今ココ
第２回　npm install --global expo-cli がエラーになる

やること

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

事前準備

Xcodeのインストール
NodeJSのインストール(v12.18.3でやりました)
CocoaPodのインストール(v1.10.1でやりました)
Mapbox Access Tokenの取得(URLはこちら)

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」をクリック

こんな画面が表示されると思います。

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

解説

ちょっと解説します。
実は、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のマップオプション周りの設定を解説する予定です。お楽しみに！

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