2026-02-24 · #21
週刊React Native #21 TanStack Router対応、WebGPUシェーダー効果、KeyboardChatScrollViewほか
react-native-keyboard-controllerに新コンポーネント「KeyboardChatScrollView」追加#
react-native-keyboard-controllerのv1.21.0-beta.3がnpmに公開され、チャットUI向けの新コンポーネントKeyboadChatScrollViewが追加された。従来のKeyboardAvoidingViewではキーボード開閉時に40回以上の再レイアウトが発生していたが、新コンポーネントでは再レイアウトが0回になり、iOS・Android両方でパフォーマンスが大幅に改善されている。安定版v1.21.0も近日公開予定だ。
This is what happens if you are using `KeyboardAvoidingView` from react-native-keyboard-controller for chat interfaces. 40+ re-layouts for keyboard close/hides 🤯 This is not critical for this example project, but if you have very complex layout you will see perf degradation👇
TanStack RouterがReact Nativeに対応、ナビゲーション実験が進行中#
TanStack RouterのReact Native対応が進んでいる。RN Screensとの統合やスワイプバック、<Activity>を使ったスタック仮想化などが動作確認済みで、宣言的なスタックライフサイクル管理やreuse semanticsといった新しいナビゲーション機能の実験も行われている。
My experiments with TanStack Native Router so far are so cool - declarative stack lifecycle virtualization (active / paused / detached) w/ configurable reuse semantics - navigate/<Link> can do standard push/replace, but also a new reuse option! - reuse matching can be nearest, twitter.com/tannerlinsley/stat…
React Navigation 8でReact.Activityとスクリーン管理の実験が進む#
React Navigation 8では、React.Activityを使った非アクティブスクリーンの管理（実験的freezeの置き換え）と、非アクティブスクリーンの完全アンマウントという2つのアプローチが実験されている。ネストされたナビゲーターへの対応が課題だが、ネイティブとWeb両方で動作する実装が検討されている。
For React Navigation 8, we're experimenting with 2 things: - Using `React.Activity` (will replace experimental freeze) - Unmounting inactive screens entirely It's a bit tricky because navigators can be nested. But hopefully it'll work out. twitter.com/satya164/status/20…
Last week I was playing with keeping content visible with `<Activity mode="hidden">` and managed to come up with 2 approaches that work on native and web. Should I write an article about it?
react-native-bootsplashとreact-native-localizeが型付きExpoプラグイン設定に対応#
react-native-bootsplashとreact-native-localizeが、型付きExpoプラグイン設定をサポートした。Expoプロジェクトでのプラグイン設定を型安全に記述できるようになり、設定ミスを事前に防ぎやすくなる。
react-native-bootsplash and react-native-localize now have typed Expo plugin configs. - github.com/zoontek/react-nativ… - github.com/zoontek/react-nativ…
React Native Shine：WebGPUを使ったGPUシェーダーエフェクトライブラリ#
Software MansionがReact Native Shineを発表した。TypeGPUとWebGPUを活用し、React Nativeアプリにインタラクティブなシェーダーエフェクトを追加できるライブラリで、標準のImageコンポーネントと同様の使い勝手でプロダクション環境にも対応している。
React Native Shine ✨ - a fast & efficient way to add interactive GPU-based shader effects to your React Native apps using TypeGPU and WebGPU. What do we think? github.com/software-mansion-la… twitter.com/wojtus_7/status/20…
NativeScript Node-APIがExpo macOSアプリで動作成功#
NativeScript Node-APIをExpo macOSアプリ内で動作させることに初めて成功したと報告された。React Native / ExpoアプリからJavaScriptでmacOS SDKへフルアクセスできる道が開けた形だ。
I just got NativeScript Node-API working inside an Expo macOS app for the first time! 🥳 Write Expo / React Native apps for macOS, with full access to the macOS SDK via JavaScript! Coded this demo together with @jmeistrich on the train back to Tokyo 🚄
react-native-quick-cryptoがNode.js Crypto API完全互換を達成#
react-native-quick-cryptoがNode.js Crypto APIとの完全互換を達成した。React Nativeアプリでより幅広い暗号化機能をネイティブに近いパフォーマンスで利用できる。
Today, react-native-quick-crypto got full NodeJS Crypto API compatibility: github.com/margelo/react-nativ…
Radon AIでReact Nativeアプリ開発をAIエージェントが支援#
Software MansionがRadon AIを紹介した。AIエージェントにReact Nativeの情報へのダイレクトアクセスを提供し、アプリ内部の状況をリアルタイムで把握しながら開発を支援するツールで、14日間のトライアルが用意されている。
Build React Native apps easier with Radon AI 🤖 Radon AI gives your Agent direct access to ALL React Native. This means your agent always knows exactly what’s happening under the hood, reacting instantly without waiting for your input. 🚀 There's a 14-day trial period for
今週のひとこと#
KeyboardChatScrollViewの再レイアウト0回という数字が今週いちばん刺さった。地味な問題ほど、解決されたときのインパクトは大きい。