週刊React Native #20 RN 0.84 Hermes V1、Rozenite for Web、RN Testing Library Agentほか

React Native 0.84がリリース - Hermes V1がデフォルトに#

React Native 0.84が正式にリリースされました。 今回のアップデートでは、JavaScriptエンジンのHermes V1がデフォルトエンジンとして採用されたのが大きな変更点です。 またiOSではプリコンパイル済みバイナリがデフォルト化され、ビルド時間の短縮が期待できます。

アップグレード作業はAgent Skillsを使えば簡単に行えます。

Michał Pierzchała (@thymikee) on XReact Native 0.84 is out! → Hermes V1 as Default → Precompiled Binaries on iOS by Default → Legacy Architecture Components Removed Upgrade easily with: » npx skills callstackincubator/agent-skillsX (formerly Twitter)

react-native-bottom-sheet-stack 1.8.0でライブラリ非依存に#

react-native-bottom-sheet-stackのバージョン1.8.0が公開されました。 このバージョンから完全にライブラリ非依存となり、特定のボトムシートライブラリに縛られずに利用できます。

これまでは @gorhom/bottom-sheet に依存していましたが、1.8.0では組み込みのボトムシートが追加されました。 カスタムアダプターを使えば、@gorhom/bottom-sheet のような任意のモーダルやボトムシートライブラリと統合できます。

arekkub (@tsolfitsmexx) on XBig update for react-native-bottom-sheet-stack 1.8.0 - it's now fully library-agnostic. No longer tied to @gorhom/bottom-sheet. You can now create custom adapters to integrate with any modal or bottom sheet library you prefer. Ships with built-in adapters for: -X (formerly Twitter)

react-native-video v7 beta.6リリース - 通知コントロール機能が改善#

動画再生ライブラリのreact-native-videoでv7 beta.6がリリースされました。 通知コントロール機能が大幅に改善され、YouTubeプレイヤーと同等の操作性を実現しています。

ユーザーは通知領域から直感的に動画を操作できるようになり、より洗練されたメディア再生体験を提供できます。 動画機能を実装しているアプリケーションには品質向上につながるアップデートです。

Kamil Moskała (@moskalakamil) on Xreact-native-video v7 beta.6 is out! 🚀 notification controls that actually work Left: @YouTube's player, right: react-native-videoX (formerly Twitter)

Rozenite for Webが登場 - Web版でもネイティブと同じデバッグ体験#

React Native Devtools向けのプラグインフレームワークであるRozeniteがWebに対応します。

現在Callstack社内でテストが行われており、近日中に一般公開される予定です。

Szymon Chmal (@ChmalSzymon) on XIntroducing Rozenite for Web - debug React Native on web with the same great experience you get on native. Fully compatible with existing Rozenite plugins. Plus, it's ready for upcoming agentic features. Currently being tested internally at Callstack - coming soon for everyone 🔥X (formerly Twitter)

React Native Testing Libraryの公式Agent Skillが公開#

React Native Testing Library(RNTL)の公式Agent Skillがリリースされました。 このスキルにより、AIエージェントがRNTLの全機能を正しく使えるようになり、ベストプラクティスの適用やアンチパターンの検出が自動化されます。

v13とv14 betaの両方をサポートしており、アクセシビリティファーストなテストの作成を推進します。 テストコードの品質向上とメンテナンス性の改善が期待できます。

Maciej Jastrzębski (@mdj_dev) on XReact Native Testing Library now has an official agent skill! 🎉 It gives your agent full knowledge of RNTL so it can: - Use every query, matcher, and event APIs correctly - Apply best practices & detect anti-patterns - Support both v13 and v14 beta - Follow a11y-first testingX (formerly Twitter)

Uniwind Proが公開#

パフォーマンスに優れたTailwindライクなAPIでスタイリングができるUniwind Proが正式に公開されました。 無料で利用できるUniwindとは異なり、C++でレンダリングエンジンが実装されており、よりパフォーマンスに優れています。

Uniwind Skillsも公開され、UniwindのベストプラクティスやNativewindからの移行が簡単に行えます。

Jacek (@jpudysz) on XUniwind Pro is now publicly available 🥳 After 4 weeks of beta, RC.1 is here. - Battle-tested by dozens of teams - Waitlist is gone - Every early adopter gets their license extended to March 2027 Zero re-renders. Let's push performance to the limit 🚀X (formerly Twitter)

Jacek (@jpudysz) on XIntroducing Uniwind Skills 🔥 You can now one-shot migrate from Nativewind to Uniwind. No extra effort needed. The skill includes best practices, a step-by-step guide, and fixes for all issues previously reported by users. Migrate today: npx skills add uni-stack/uniwindX (formerly Twitter)

React Native StorybookにRe.Packサポートが追加#

React Native向けStorybookのv10.2.2-alpha.3で、Reac Native用のモジュールバンドラーであるRe.Packがサポートされました。

モジュールバンドラーとしてRe.Packを使っているプロジェクトでも、Storybookを活用したコンポーネント開発ができるようになります。

Daniel Williams (@Danny_H_W) on XBeen working on adding @repack_rn support to React Native @storybookjs and the first working version is in v10.2.2-alpha.3 🎉 Use the Storybook plugin to handle configuration, and the agent setup skill now knows how to configure Repack projects too.X (formerly Twitter)

json-render × React Nativeで動的UIを実現#

json-renderとReact Nativeを組み合わせた新しいアプローチが紹介されました。 Generative UIを活用したUGI(User-Generated Interfaces)の実現に向けた取り組みです。

ユーザーごとにパーソナライズされた動的UIを、信頼性を損なうことなく提供できます。 事前定義されたコンポーネントとアクションにより、安全で予測可能な出力が保証されます。

Chris Tate (@ctatedev) on XIntroducing json-render × React Native Another step toward UGI (User-Generated Interfaces), powered by Generative UI. Dynamic, personalized UIs per user without sacrificing reliability. Predefined components and actions for safe, predictable output.X (formerly Twitter)

iOS/AndroidデバイスでAIエージェントの動作確認が可能に#

AIエージェントの開発ワークフローに新しいツールが登場しました。 npx agent-device コマンドを使うことで、AIエージェントが生成した結果をiOSおよびAndroidデバイス上で直接確認・操作できます。

これまでエージェントの動作検証はシミュレーターやエミュレーターに限定されることが多かったですが、このツールで実機での検証が容易になります。 実際のデバイス上でエージェントの動作を確認できることで、より実用的な開発とテストが可能になります。

Callstack Engineers (@callstackio) on XYour agents can now "see" and "touch" their generated outcomes directly on iOS and Android devices. » npx agent-device Read more 👇 Link in the comments 👇X (formerly Twitter)

今週のひとこと#

Rozeniteについて知らなかったのですが便利そうですね！ Tanstack QueryやReact Navigationの状態をデバッグするプラグインなどが提供されているので、私も使ってみようと思います。