2026-04-03 · #26
週刊React Native #26 Reanimated v4.3.0、reactnative.run公開、React Navigation SplitViewほか
Brownieでネイティブ・React Native間の型安全な状態共有#
React Nativeのbrownfieldアプリ（既存のネイティブアプリ内にReact Nativeを組み込むようなアプリ）向けに、型安全に状態を共有する方法が紹介されています。
デモではReact Nativeからカウントをインクリメントするとネイティブ側にもリアルタイムに同期されて表示される様子が確認できます。
Type-safe shared state for React Native brownfield apps: now across iOS and Android (with Kotlin support). Less glue code, fewer mismatches. Take a look 👀 Link to the full article below 👇
Unistyles 3.2.0で実運用向けの改善#
Unistyles 3.2.0では、C++側で保持されたjsi::Runtimeの削除やSuspenseツリーへの対応が入りました。
dropShadow対応など、その他にもいくつかの改善が含まれています。
I've just dropped Unistyles 3.2.0 (it's not a joke!): - remove stored jsi::Runtime on C++ side - support for Suspense trees - community contribution about RTL ShadowTree updates - support for dropShadow - nitro 0.35.2 support Enjoy! 🥳 github.com/jpudysz/react-nativ…
React Native Reanimated v4.3.0が公開#
SVGのCSSアニメーション対応や、マルチスレッドでのアニメーション制御が容易になるなど、いくつかの新機能が追加されました。
Reanimated 4.3.0 is out with a lot of exciting features! 🚀 ✦ CSS animations for SVG components – animate vector graphics with just a few lines of code ✦ Shared Values on multiple threads at once – easily control animations in apps that already have a lot of multithreaded
React Native Header Motion v1が公開#
スクロールに応じたヘッダーアニメーションを簡単にアプリに組み込める、React Native Header Motionのv1が公開されました。
タブがある場合などは実装が面倒だったりするので、こちらのライブラリはありがたいですね。
React Native Header Motion v1 is out 🎉 Build scroll-driven animated headers your own way! 🖐️ New in v1: header panning Users can drag the header itself to scroll, making the gesture feel continuous with the scrollable. 🗒️ pawicao.github.io/react-native… More details in the thread 👇
react-native-fast-confetti v2が公開#
APIをコンポジションパターンに書き直し、物理演算も一から再構築されました。
これによりAPIがシンプルになり、より自然なアニメーションが実現されました。
react-native-fast-confetti v2 is here. v1 had two fundamental problems: 1. Every new feature made the API more complex 2. Animations looked mechanical because they were driven by linear timing + easings I've been working on this rewrite for a while. Here's what changed 👇
Expo UIの活用例: テキストのアニメーションをSwiftUIで行う#
Expo UIでSwiftUIのTextコンポーネントを使い、手軽にテキストのアニメーションを設定できます。
iOS以外ではフォールバックが必要ですが、Expo UIによって簡単にネイティブのUIを扱えるようになったのは良いですね。
this react native tip just saved me hours of work. no need to reinvent the wheel when you can just go native. @expo keeps getting better and better every year 👏 ``` import { Text } from '@expo/ui/swift-ui' <Text modifiers={[ contentTransition("numericText"), twitter.com/hewad_mubariz/stat…
ブラウザ上でReact Nativeを実行できる、reactnative.runが公開#
React Native向けのVibeCodingが行えるサービスを提供しているRapidNativeから、ブラウザ上でReact Nativeを実行できるreactnative.runが公開されました。
Expo Snackのようなツールを自分でホストしたり、RapidNativeのようなVibeCodingアプリを作りたいときに良いかもしれませんね。
Introducing reactnative.run 🚨 (open-source) The fastest way to run React Native / Expo apps in the browser. Metro bundler mapped to the web with HMR, Expo Router, assets, source maps! Go and try it now!
react-native-enriched-markdownでContextMenuをサポート#
react-native-enriched-markdownにcontextMenuItems Propsが追加されました。
これにより、テキスト選択時にカスタムアクションを実行できるようになります。
Level up your Markdown experience in React Native! 🚀 New contextMenuItems prop is here for react-native-enriched-markdown. Now you can trigger custom actions on any selected text in both Text and Input components. Check out this "Summarize with AI" demo using
React NavigationでSplitViewに対応予定#
React NavigationでiOSのSplitViewに対応する予定とのことです。
Native iOS split view is coming to React Navigation 🔜 Powered by React Native Screens 🫶 Let us know your use cases so we can test and ensure that the API is suitable for a wide range of usage 👇
react-native-reshuffled v0.2.0が公開#
ドラッグ＆ドロップにも対応した高機能なGridレイアウトライブラリであるreact-native-reshuffledのv0.2.0が公開されました。
Nitro Modulesやreact-native-workletsを活用し、高いパフォーマンスを実現しています。
react-native-reshuffled 0.2.0 is here 🚀 Introducing onDragEnd callbacks based on @swmansion react-native-worklets But that's not all: Collisions, custom algorithms and more 👀 Check out new demo and visit github.com/Guccio163/react-nat…, for more details, we are so close to 100⭐️
次期バージョンのagent-deviceで画面外の要素をエージェントに渡さないように改善#
次期バージョンのagent-deviceでは、画面外の要素を除外してエージェントに情報を渡すようになります。
これにより次のようなメリットがあります。
- アプリ探索時のエラー率の低下
- 長いリストでのトークン使用量を最大80％削減
- エージェントの動作がより人間らしくなる
In the next version of agent-device: we hide off-screen elements from agents This single change: → reduces error rates for agent exploring apps → reduces token usage by up to 80% for long lists → makes agents behave more human-like
今週のひとこと#
ここ最近はRozeniteとagent-deviceが開発の必需品となってきました。
Rozeniteもagent-deviceも開発が活発で、どんどん便利になってきていますね！