久しぶりにPC環境を一新したので、ゼロから環境構築を行います。
尚、XCodeはインストール済みとします。

使用OS

macOS Monterey v12.5

１、Homebrewのインストール

何はともあれHomebrewがないと始まらないです。
公式ドキュメントに則ってインストールしましょう。

# ターミナルで下記コマンドをたたく
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

２、Node.jsのインストール

ReactNativeはNode.jsで動いてるので、これも必須です。
また、僕はバージョン管理ツールとしてfnmを使用してますが、ここは個人の好きなやつで問題ないです。

# fnmをインストール
curl -fsSL https://fnm.vercel.app/install | bash
# .zshrcに下記を追記
eval "$(fnm env --use-on-cd)"
# 2022/8/6時点で安定版の16.16.0のNode.jsをインストール
fnm install 16.16.0
# 16.16.0を使うように設定
fnm use 16.16.0

# nodeのバージョン確認
node -v
v16.16.0

3、yarnのインストール

好みですが、僕はyarnを使用します。
npmを使う方はここスキップして良いです。

brew yarn

４、watchmanのインストール

次はReactNative公式にもあるように、watchmanをインストールします。

brew install watchman

５、Rubyのインストール

systemのRubyを使う方はスキップで良いです。
僕は最新版を使います。
また、rbenvでバージョン管理を行います。これも好みなので好きなの使ってください。

# rbenvのインストール
brew install rbenv
# 公式の手順に乗っ取り初期化
rbenv init
# .zshrcに下記を追記しろと言われるので、追記する。
eval "$(rbenv init - zsh)"
# rbenv-doctorをたたいて、問題ないことを確認する。
curl -fsSL https://github.com/rbenv/rbenv-installer/raw/main/bin/rbenv-doctor | bash
# インストール出来るRubyのバージョン一覧を確認。
rbenv install -l
# 2022/8/6時点で3.1.2が最新っぽいのでインストールする。
rbenv install 3.1.2
# 3.1.2を設定する
rbenv global 3.1.2
# ターミナルを再起動してRubyのバージョン確認
ruby -v
ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x86_64-darwin21]

６、bundlreもインストールする

rubyの設定が済んだらbundlreもインストールしましょう。
僕の記憶が正しければこれも必要だったはず

gem install bundler

７、cocoapodsのインストール

これは必要です。インストールしましょう。
インストールが済んだら一度ターミナルを再起動した方が良いです。

brew install cocoapods

８、Android Studioのダウンロード

iosはxcodeとコマンドラインツールがあれば起動できますが、AndroidはAndroid Stdioが必要です。
android developers公式からダウンロードしましょう。

ダウンロードしたら一度Android Studuioを開き初期設定を行いましょう。
初めて開いたらsetting configファイルはどこ？みたいなことを聞かれますが、最初だとそんなの無いので、do not ~を選んで進みましょう。
次は環境設定の画面が出ると思うので、全て同意し、必要なライブラリを全てインストールしてください。
More Actions -> SDK Manager を開き、show Package Detailsをオンにします。
Android 12 (S)をONにします。
Intel x86 Atom_64 System ImageをONにします。(Apple M1の方はGoogle APIs ARM 64 v8a System ImageをONにする)
インストールしてください。
一旦これでOKです。

９、Java Development Kitのインストール

公式ドキュメントを参考にしながら、下記コマンドを叩きましょう。

brew tap homebrew/cask-versions
brew install --cask zulu11

１０、ANDROID_SDK_ROOT 環境変数を構成する

.zshrcに下記の環境変数を設定してください。

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

11、準備は整った

まずは今まで設定したツールのPATHを読み込むために、念の為ターミナルを再起動しましょう。
それではReactNative公式にあるnpx react-native init AwesomeProjectコマンドを好きなディレクトリでたたきましょう。
これでReactNativeプロジェクトが生成されるはずです。

また、途中でreact-nativeのCLIをインストールするように勧められるので、yを押下してインストールしましょう。

# JavaScriptが良い方
npx react-native init AwesomeProject

# TypeScriptが良い方
npx react-native init AwesomeTSProject --template react-native-template-typescript

たまに下記エラーが出る時があります。

cocoapodsのパスが通ってないか、xcodeコマンドラインツールが設定されたないかの二択だと思います。
僕の場合は後者だったので、Xcode -> Preferences -> Locations のCommandLineToolsが設定して解決しました。

error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: "cd ./AwesomeTSProject/ios && pod install".

iosでの起動確認

無事にプロジェクトが生成されたら、yarn iosでiPhoneシュミレータが起動し、下記画面が表示されたら成功です！

androidでの起動

androidを起動させるには、先ず初めにandroidエミュレーターを起動しておく必要があります。

Android Studioの起動 -> More Actions -> VirtualDeviceManagerを押下すると、まだ何のデバイスもないと思うので、Crate Deviceで作成しましょう。
作成するデバイスは何でも良いです。僕はPixel5にしました。
Pixed5を選択してNextを選択すると、System Imageのインストールを求められるので、指示に従いインストールしましょう。
あとはFinish -> Next -> Finishで追加されるはずです。
追加されたPixel5を三角ボタンを押下して起動します。

yarn startを実行、別ターミナルでyarn androidを実行し、下記画面が表示されたら成功です！

終わり

おめでとうございます🎉
あとは自分が作りたいことをコードを書いて実現するだけです！
ライブラリも豊富にあるので、色々ググって色んなことを試してみてください！

それではまた👋

【ReactNative】 環境構築手順