いくつか世の中に出ているセットアップ方法を無心にたどると失敗する。

rubyは結構罠があり、rbenv等を経由してruby-buildを利用する方法は、ビルドを通すのが困難でできてもpod installで失敗する。※2022/12/02現在

system側のrubyにライブラリを追加して、pod installする方針だとうまくいった。

環境

react-native
- 0.66.1
nodejs
- 14.17.1
java
- zulu-11.60.19
ruby
- system(ruby 2.6.10p210)
パッケージ管理
- asdf

Homebrewのインストール

x86, arm版それぞれインストールしておく

# Rosettaをインストール
sudo softwareupdate --install-rosetta

# x86_64版のhomebrewをインストール
arch -x86_64 /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh>)"

# ARM版
arch -arm64e /bin/bash -c "$(curl -fsSL <https://raw.githubusercontent.com/Homebrew/install/master/install.sh>)"

設定

ARM版を優先

~/.zshrcに追記

typeset -U path PATH
path=(
	/opt/homebrew/bin(N-/)
	/usr/local/bin(N-/)
	$path
)

asdfをインストール

brew install gpg gawk
brew install asdf

# zshrcに設定を追記
echo -e "\\n. $(brew --prefix asdf)/libexec/asdf.sh" >> ${ZDOTDIR:-~}/.zshrc

# direnvのプラグインもインストール
asdf plugin-add direnv
asdf direnv setup --shell zsh --version latest

設定ファイルを設置

~/.asdfrc

legacy_version_file = yes

プロジェクトフォルダのルートに設定ファイルを設置

.envrc

use asdf

PATH_add bin ./node_modules/.bin

dotenv

.tool-versions

nodejs 14.17.1
java zulu-11.60.19
ruby system

nodeのインストール

asdf plugin add nodejs
asdf install nodejs 14.17.1

Rubyのセットアップ

rvm, ruby-buildしたrubyを利用するとハマるのでシステムインストールされているrubyを利用する方針で進める。

# ビルド中エラーが出るようなら、下記のようにシンボリックリンクを貼って試してみてください
arch -x86_64 sudo gem install ffi -v '1.12.2'

# バージョンでパスが変わるので適宜合わせてください
cd /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX13.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby/
sudo ln -sf ../../../../Headers/ruby/config.h

cd /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX13.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0
sudo ln -sf universal-darwin22 universal-darwin21

# もっかいトライ
arch -x86_64 sudo gem install ffi -v '1.12.2'
arch -x86_64 sudo gem install cocoapods

bundle install --path vendor/bundle

# うまく行ったらpodもインストール
cd ios
pod install

iOSのビルド確認

react-native run-ios

Javaのインストール

# java
brew tap homebrew/cask-versions
brew install --cask zulu11
brew install maven
asdf plugin-add java https://github.com/halcyon/asdf-java.git
asdf install java adoptopenjdk-11

設定ファイルも設置

.zshrc

# zsh
. ~/.asdf/plugins/java/set-java-home.zsh

.bashrc

# bash
. ~/.asdf/plugins/java/set-java-home.bash

Android Studioの設定

Gradle JDKをzulu-11に設定

Android SDKとか色々インストール

検証しないまま適当に入れた

androidのビルド確認

# これでできるはず
react-native run-android

参考

みんなの M1 Mac における Homebrew のベストプラクティスは間違っている
https://zenn.dev/ress/articles/069baf1c305523dfca3d
bundle installに失敗してから解決するまで https://zenn.dev/nemototea/scraps/01bc0d32a855c7
vim - macOS Mojave 'ruby/config.h' file not found - Stack Overflow https://stackoverflow.com/questions/53135863/macos-mojave-ruby-config-h-file-not-found
M1でReactNativeのセットアップ備忘録（2021/12） https://zenn.dev/hisasann/articles/m1-react-native-setup
android studio - First React Native App: Task :app:processDebugMainManifest FAILED - Stack Overflow https://stackoverflow.com/questions/66696339/first-react-native-app-task-appprocessdebugmainmanifest-failed
[FIXED] Android build failures `No matching variant of com.facebook.react:react-native:0.71.0-rc.0 was found.` · Issue #35210 · facebook/react-native https://github.com/facebook/react-native/issues/35210
Unity2018でAndroid12ビルド対応 - Qiita https://qiita.com/owenc4a4/items/b4430f3eadb25e87fc84

M1 MacにおけるReact Nativeのセットアップ

環境