Zenn
📒

React Native 0.73のReleaseNoteのまとめと新しいデバッガーの確認

2023/12/25に公開
Android
iOS
React Native
Expo
tech

こんにちは、元々React Native製のアプリを作っていたところから、転職して今はWebアプリの開発をしているまっつんです。

今回はReact Nativeアドベントカレンダー2023の25日目の記事です。
https://qiita.com/advent-calendar/2023/react-native

久しぶりにReact Nativeを触ってみるので、Release Noteでも読んで気になるところをまとめてみようと思いました。
また、デバッグに関しては以前開発している時はFlipperを使っていて、新しいデバッグツールが出たというreleaseだったので、公式ドキュメントから立ち位置を探ってみました。
https://reactnative.dev/blog/2023/12/06/0.73-debugging-improvements-stable-symlinks

React Native 0.73 リリースノート

Debugging Improvements

  • Hermes engineが全てのconsole.logをキャプチャー
    • デバッガーが接続されたら、コンソールタブに送られる
    • 今までのReact Nativeだとconsole.logはデバッガーに接続してからじゃないと記録されなかった
    • これらはFlipper, Chrome devtools、新しいデバッガーで動作する
  • Debugging部分のドキュメントをアップデート
    https://reactnative.dev/docs/debugging
  • 新しい実験的なデバッガー登場
    • Flipperを置き換える予定!!
    • ということなんで一番下で使ってみました
  • 0.72でbetaサポートされたSymlinkサポートがデフォルトで設定

Kotlin Template on Android

  • AndroidのアプリをReact Nativeで書くときにKotlinが推奨言語となった！
    • MainActivityやMainApplicationをkotlinファイルに置き換え
  • .javaファイルを.ktファイルにアップデートするヘルパーも提供

Android 14 Support

  • Android14にフルサポート
    • API Level 34(Upside Down Cake)
  • ↑のために、Android Gradle Pluginのバージョンを上げた
  • Java17がAndroidのアプリのビルドに必要になったので、バージョンをあげる必要あり
    • JAVA_HOMEもアップデート

その他

新しいデバッグツールを使ってみる

自分の記憶が正しければ、以前はFlipperを使って通信のレスポンスを見たりしていて開発には必須だった覚えがあり、これを今後置き換えていくなら使う必要があるだろうと思いました。

現在のMacは以前のMacとは異なり、Pure React Nativeの開発環境を整えていなかたので、Expoで。

Expoのbeta版がreact-native0.73を使っているので試したところ、以下のようなログが出てしまい、デバッガーが起動しませんでした。

Debug: No compatible apps connected. JavaScript Debugging can only be used with the Hermes engine. Learn more

Expoと戦っても面倒なので、Pure RNの環境を整えて(なんか昔より楽になったような・・・)、起動

yarn start --experimental-debugger

// yarn無ければ
// npx react-native start --experimental-debugger

// metroのいつもの画面が出たらjボタンを押す

ものすごいChromeの検証画面に似た画面が出てきて安心感があります。また、console.log, console.errorなども良い感じに表示されるし、見やすいなという印象。
が、現在のものだとNetworkタブがないので、どうしても通信を行うアプリのデバッグにはFlipperなどを使う必要があるのかなと思いました。今後のアプデに期待。(もしできたら教えてください🙇)

Discussion