Open9

react native個人開発のメモ置き場

nyosunyosu

React Nativeでのエミュレータでの確認は、npx expo start -c とかでできる。
Androidがなぜかうまく起動しなかったので、前準備としてAndroid Studioでエミュレータを起動してからやると、うまくいった。

nyosunyosu

Firebase Authを実機でも確認したかったので以下の対応を行った。

  • npx expo prebuildをして、ios/ android/を作成
  • isoでの確認は、 yarn iosを実行
  • androidでの確認は、npx expo run:androidで実行
    これは上の動画でそのように実行されていたから。なぜyarn iosを使ってるのかとかはどこかで調べておく
nyosunyosu

何が原因か忘れてしまったが（多分expo-routerをインストールしたタイミングだったような気がする。。）、react-domが二つのバージョンが併存してビルドできない時があった。以下のエラー。諸々見てみると、package.jsonで指定されたバージョンが不一致ですという話。

iOS Bundled 4555ms (node_modules/expo-router/entry.js)
 ERROR  Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. 
    at ContextNavigator (http://10.18.46.13:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:132566:24)
    at ExpoRoot (http://10.18.46.13:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:132522:28)
    at App
    at ErrorToastContainer (http://10.18.46.13:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:163550:24)
    at ErrorOverlay
    at withDevTools(ErrorOverlay) (http://10.18.46.13:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:163084:27)
    at RCTView
    at View (http://10.18.46.13:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:40346:43)
    at RCTView
    at View (http://10.18.46.13:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:40346:43)
    at AppContainer (http://10.18.46.13:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:40157:36)
    at main(RootComponent) (http://10.18.46.13:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:123933:28)
 ERROR  Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. 
    at ContextNavigator (http://10.18.46.13:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:132566:24)
    at ExpoRoot (http://10.18.46.13:8081/node_modules/expo-router/entry.bundle//&platform=ios&dev=true&hot=false&lazy=true&transform.engine=hermes&transform.bytecode=true&transform.routerRoot=app:132522:28)

解決策としては、
rm -rf node_modules package-lock.jsonを実行して、再度npx expo installを実行するだった気がする

nyosunyosu

Android SDKが最新すぎるがゆえに、expoで対応しておらずAndroidエミュレータでビルドできない事象に直面した。

React Nativeのandroid buildで詰まってしまったけど、大元を紐解いていくと、JDK21を使っており新しすぎたみたい。

あなたは大胆に JDK21 を試しています。反応ネイティブ エコシステムのほとんどは JDK11 から JDK17 に移行したばかりです (一部はまだ JDK11 にあり、AndroidX ライブラリは少し古いものもあります)。

https://github.com/invertase/react-native-firebase/issues/7490

nyosunyosu

具体的には、ios/Podfileを以下のように修正。target 'xxx' doのところには不要だったりするのかも？今回extentionだけなので。 不要だったので、正しくは以下の通り。

target 'xxxShareExtension' do
  pod 'Firebase', :modular_headers => true
  pod 'FirebaseCoreInternal', :modular_headers => true
  pod 'GoogleUtilities', :modular_headers => true
  pod 'FirebaseCore', :modular_headers => true

書き換えたらios/で pod installを実行する