React Native と Expo ( Bare workflow ) のアプリ立ち上げを一挙手一投足解説

## React Nativeを使う
クロスプラットフォーム開発ならFlutterもあるけどなぜReactNativeを選んだのかというと、単にもともとReactに馴染みがあったからです。それだけです。

## Expoを使う
Expoとは、ReactNativeでのアプリ開発をめちゃくちゃ楽にしてくれるライブラリ群を備えたツールです。[React Nativeの公式ドキュメント](https://reactnative.dev/docs/environment-setup)でも、Expoを使うかReact Native CLIだけを使うかの2通りで紹介されています。
これを使わない手は無いかと思います。便利なので使います。

さらにExpoには、「Managed workflow」と「Bare workflow」が存在します。
詳しい違いなどは他の記事を参照していただきたいのですが、アプリ開発を通してマイナーな機能やライブラリを実装する場合を考慮して、今回は汎用性の高いBare workflowを使います。
Bare workflowを使うとManaged workflowと違って、XcodeやAndroidStudioでの管理が必要になるのが面倒ですが、その分カスタマイズ性が上がります。
またBare workflowでは、Expo Goという簡単に実機テストができるシステムを使えない可能性があります。だからXcodeとAndroidStudioでそれぞれビルドして動作確認をします。

## 実行環境
react-native 0.73.2
expo 50.0.14
Node.js 12.3.0
Watchman 2024.03.18.00
Xcode 15.1
Android Studio Hedgehog | 2023.1.1 Patch 2

## アプリの立ち上げ
[Expo公式ドキュメント](https://docs.expo.dev/get-started/installation/)に手順が記載されています。

![スクリーンショット 2024-03-28 11.55.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/838fafc5-716c-2ff8-c66b-2ff45603b9fc.png)

### 事前インストール
Requirementsの部分を見ると、
- [Node.js](https://nodejs.org/en/)
- [Git](https://git-scm.com/)
- [Watchman](https://facebook.github.io/watchman/docs/install#buildinstall)（Linux か macOS の利用者のみ）

が必要ということなので、それぞれインストールをします。（↑インストール先のリンク挿入済み）
これらをインストールすると、npxを通じてExpoCLIが利用できるようになります。

上記に付け加えて、

- Xcode
- AndroidStudio
- yarn
- VScode

も入れておきます。
yarnはNodeのパッケージ管理ツールですが、特にこだわりがなければnpmに代わってこちらを使用します。（部署の方針とか、好みとか便利さとかで判断）

### アプリ新規作成
[Expo公式ドキュメント](https://docs.expo.dev/get-started/installation/)の __Get started__ の部分を進めていきます。
アプリの雛形を生成します。
~~~bash
$ npx create-expo-app --template

? Choose a template: › - Use arrow-keys. Return to submit.
    Blank
    Blank (TypeScript)
    Navigation (TypeScript)
❯   Blank (Bare)
        blank app with the native code exposed (expo prebuild)
~~~
`--template`を指定すると上記のようにテンプレートの選択肢が表示されます。
今回はBare workflowで開発を進めるので`Blank (Bare)`を選択します。
~~~bash
✔ Choose a template: › Blank (Bare)
✔ What is your app named? … test-app
~~~
アプリ名も聞かれるので適切なアプリ名を設定しておきます。（これが正式なアプリ名としてインストール後のスマホに表示されるというわけではありませんので`〇〇-app`とかでいいかと。）

これらを確定させるとインストールが始まります。

### yarn導入
任意ですが、インストール完了後、npmをyarnに変更しておきます。
packege.jsonやpackege-lock.jsonがあるアプリのルートディレクトリで、
~~~bash
yarn
~~~
とだけ入力して実行します。

## 動作確認

### シミュレータ
#### iOS
XcodeがPCにインストールされていることを確認してください。
アプリのルートディレクトリから、以下のコマンドを順に打ちます。
~~~bash
$ cd ios

$ pod install

$ cd ../

$ yarn run ios
~~~

`pod install`では、現在インストールされているパッケージを参照して、iOS用のライブラリをインストールしているようなイメージです。
今後は、`yarn install`で何かしらのパッケージをインストールしたときだけ実行すれば大丈夫です。

`yarn run ios`を実行すると、ビルドが走ってそのままシミュレータが自動的に起動します。
![スクリーンショット 2024-03-28 12.42.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/af01a146-0788-9560-7ba1-b8b47e7bf2c5.png)

#### Android
AndroidもiOSと同様に、
~~~
yarn run android
~~~
でビルドができますが、そのままだとエラーになる可能性があります。
~~~bash
FAILURE: Build failed with an exception.

* What went wrong:
Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.
> Could not determine the dependencies of null.
   > SDK location not found. Define a valid SDK location with an ANDROID_HOME environment variable or by setting the sdk.dir path in your project's local properties file at '/Users/kawasakih/work/expo-practice/test-app/android/local.properties'.
~~~

AndroidSDKの場所を指定する必要があります。

まず、AndroidSDKの場所を確認します。

![スクリーンショット 2024-03-28 13.02.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/69c55e46-8ee4-47ae-eb9f-2c11aaaeb5e8.png)
![スクリーンショット 2024-03-28 13.02.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/243442ee-c661-7d8a-31de-af35ebecf8f3.png)


「Android SCK location」の部分に書かれているsdkのパスをコピーします。

そしてプロジェクトの `/android/` ディレクトリに local.properties ファイルを作成して、先ほどのパスを指定します。

~~~properties: test-app/android/local.properties
sdk.dir=/Users/kawasakih/Library/Android/sdk
~~~

これで再度ビルドを実行します。

~~~bash
yarn run android
~~~

ビルドに成功したら、AndroidStudioを開きます。
すると右側の「Running Devices」でエミュレータが起動しているはずです。

![スクリーンショット 2024-03-28 13.16.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/b7278b25-3f4d-6e55-e09c-0d69670dc6be.png)

##### Androidエミュレータでネットワークに接続する場合
多くのアプリではインターネットに接続する必要があるかと思います。iOSのシミュレータでは必要ありませんでしたが、Androidのエミュレータではmacのネットワーク設定をしないとインターネットに接続できません。

システム設定 > ネットワーク > 詳細 > DNS > 検索ドメイン
ここに、`8.8.8.8`を追加します
![スクリーンショット 2024-04-03 10.35.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/59be26f2-6ce1-6469-7b4f-ce0f486e91e3.png)
![スクリーンショット 2024-04-03 10.35.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/e5b61bbe-f684-f1a2-3d50-5c109692e715.png)

### 実機

#### iOS
１. アプリのルートディレクトリで
~~~
npx react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'
~~~
ビルドしてiOSの実行ファイルが`/ios/`に生成されます。
２. iPhoneを有線で接続
３. `/ios/testapp.xcworkspace`をXcodeで開いて各種設定
- User Script Sandboxingを「No」に設定
![スクリーンショット 2024-03-29 10.27.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/120e42c5-a246-2467-d74b-113477704669.png)
- Signing & Capabilitiesでビルドを行うAppleDeveloperアカウントを選択
（初めてXcodeを使う場合は「add acount」をする必要がある）
![スクリーンショット 2024-03-29 10.28.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/dc382a14-25b2-38fb-3d44-5a8139bcfe2e.png)

- 「１.」で生成したビルドファイルをiOSプロジェクトに追加
`/ios/`フォルダ内の`main.jsbundle`をxcworkspaceプロジェクトの直下に追加します。
ファイルを追加する際のポップアップで、「Copy items if needed」を選択し、「Create groups」を選択します。
![スクリーンショット 2024-03-29 10.30.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/82e206de-1f56-aa68-7b25-0ca304a7b1ed.png)
![スクリーンショット 2024-03-29 10.31.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2388259/ca9c1174-29af-e2d6-a678-b80bb433a8c2.png)



４. Xcodeでビルド

__2回目以降のデバッグ時は、１.のbundleビルドと４.のXcodeでのビルドだけで良いです。__

#### Android
1. アプリのルートディレクトリで
~~~
npx react-native bundle --entry-file='index.js' --bundle-output='./android/app/src/main/assets/index.android.bundle' --dev=false --platform='android' --assets-dest='./android/app/src/main/res'
~~~
ビルドしてAndroidの実行ファイルが`/android/`に生成されます。
2. Android端末を有線で接続
3. `/android/`フォルダをAndroidStudioで開いてRUN