2026-08-06 · #38
週刊React Native #38 RN 0.87でbackgroundImageが安定化、react-native-workers公開、React Native Plain Text登場ほか
React Native 0.87.xでbackgroundImageが安定化、ネイティブでlinear/radialグラデーションに対応#
React Native 0.87.xで、backgroundImageが正式に安定化しました。
linear/radialグラデーションがサードパーティ依存なしで標準サポートされるようになり、react-native-linear-gradientが不要になるとのことです。
グラデーションのためだけに外部ライブラリを追加する必要がなくなるので、依存関係を減らせるのは嬉しい変化ですね。
🎨 𝚋𝚊𝚌𝚔𝚐𝚛𝚘𝚞𝚗𝚍𝙸𝚖𝚊𝚐𝚎 is officially stable in #ReactNative 𝟬.𝟴𝟳.𝘅! 𝗟𝗶𝗻𝗲𝗮𝗿 and 𝗿𝗮𝗱𝗶𝗮𝗹 gradients now work out of the box with zero third-party dependencies. Goodbye 𝚛𝚎𝚊𝚌𝚝-𝚗𝚊𝚝𝚒𝚟𝚎-𝚕𝚒𝚗𝚎𝚊𝚛-𝚐𝚛𝚊𝚍𝚒𝚎𝚗𝚝 👋🚀 t.co/cvBMRywAIb
react-native-workers公開alpha、Web Worker APIライクな形でRNに本物のバックグラウンドスレッド#
Ammar Ahmed氏が、React Nativeに本物のバックグラウンドスレッドを提供するreact-native-workersのパブリックalphaを公開しました。
Web Worker APIを意識したAPIになっており、大きなペイロードのパースやファイルのハッシュ計算、画像処理といった、UIスレッドを圧迫しがちな重い処理を別スレッドに逃がせるようになっています。
React Nativeは基本的にシングルスレッドで動作しますが、重い処理でUIの描画落ちが起きるようなケースを避ける手段として使えそうです。
React Native is single-threaded where it matters most. Parse a big payload, hash a file, filter an image — it all competes with your UI for the same runtime. react-native-workers brings real background threads to RN, behind the Web Worker API Public alpha today🧵 t.co/hoXYlbgdii
React Native Plain Text：<Text>より高速・低メモリな代替コンポーネント#
Software MansionのMaciej Jastrzębski氏が、React Native <Text>の高速・低メモリな代替となる「React Native Plain Text」を公開しました。
シンプルなテキスト表示向けに、コストの大きいprop処理を省いてUILabel / TextViewsへ直接レンダリングする設計になっています。
サポートするpropsとスタイルの範囲ではRN Textと100%互換とされているため、既存の<Text>をそのまま置き換えられる場面も多そうです。
Introducing 🎉 React Native Plain Text! 🎉 A faster, lower-memory React Native <Text> alternative for simple text views. It renders directly to UILabel/TextViews while avoiding heavy prop processing. For supported props & styles is 100% API compatible with RN Text, and so far t.co/26TwtMYYJO
VisionCamera 5.2.0リリース、SkiaCameraに新機能を追加#
Marc Rousavy氏が、react-native-vision-camera 5.2.0をリリースしました。
<SkiaCamera>にzoom / exposure / torchMode / controller / targetResolutionといった新機能が追加され、Vulkan/Metal GPU Resizerにはstretchが加わっています。
クラッシュや不具合の修正も併せて含まれているとのことです。
Just released VisionCamera 5.2.0! 👉 New features for <𝚂𝚔𝚒𝚊𝙲𝚊𝚖𝚎𝚛𝚊> such as 𝚣𝚘𝚘𝚖, 𝚎𝚡𝚙𝚘𝚜𝚞𝚛𝚎, 𝚝𝚘𝚛𝚌𝚑𝙼𝚘𝚍𝚎, 𝚌𝚘𝚗𝚝𝚛𝚘𝚕𝚕𝚎𝚛 and 𝚝𝚊𝚛𝚐𝚎𝚝𝚁𝚎𝚜𝚘𝚕𝚞𝚝𝚒𝚘𝚗 👉 Adds '𝚜𝚝𝚛𝚎𝚝𝚌𝚑' to the Vulkan/Metal GPU Resizer 👉 Crash/Bug-fixes
react-native-reanimated-carousel v5.0.0リリース、全面的なAPI再設計#
Caspian氏が、およそ1年ほど停滞していたreact-native-reanimated-carouselのv5.0.0をリリースしました。
直近2週間ほど集中して取り組み、全面的なAPI再設計や紛らわしいpropsの大幅削減、正しいRTLサポート、統一されたAPIなどが盛り込まれた大型リリースになっています。
finally shipped react-native-reanimated-carousel v5.0.0 🎉 this one was stuck for almost a year. i went quiet on this project for way too long, then spent the last two weeks basically living in it — full api redesign, way fewer confusing props, proper rtl support, one unified t.co/81UNYvR3lp
React Native Gesture Handler 3でTextのインラインフラグメントにジェスチャーを付与できるように#
Software Mansionが、React Native Gesture Handler 3を使えばTextコンポーネントやインラインフラグメントに簡単にジェスチャーを付けられることを、あらためて紹介しました。
対象のフラグメントをVirtualGestureDetectorで囲み、親のTextをInterceptingGestureDetectorで囲むだけで、単語単位でジェスチャーを受け取れます。
文章全体ではなく特定の単語やインライン要素にだけ反応させたい場合に有効な構成です。
Just a quick reminder that with RN Gesture Handler 3, you can easily attach gestures to Text components and inline fragments. 🚀 Wrap the fragment in a VirtualGestureDetector, put an InterceptingGestureDetector around the parent Text, and you get gestures on a single word or
TouchableがPressableより約300ms高速化、まもなくリリース#
Software Mansionが、React Native Gesture HandlerのTouchableをさらに高速化する取り組みを進めていると紹介しました。 1,000個のボタンを含むリストのベンチマークで、ボタンを離してからリストが描画されるまでの時間がReact NativeのPressableより約300ms速かったと報告されています。
改善は「Coming soon」として予告されており、近いうちのリリースに含まれる見込みです。
We've been working on making Touchable in React Native Gesture Handler even faster. ⚡ In one of our benchmarks (1000 buttons in a list), Touchable rendered ~300 ms faster than React Native's Pressable (measured from button release to list render). Coming soon; stay tuned 👀
React Native Testing Library v14の採用が急拡大#
Maciej Jastrzębski氏によると、React Native Testing Library v14はリリースから2ヶ月で、利用されているバージョンの中で2位にまで急速に広がっているとのことです。 新しいテストレンダラーや非同期APIといった根本的な変更を含む大型リリースであり、AIエージェントとcodemodの組み合わせによってバージョンアップの負担が以前より軽くなったことも背景として挙げられています。
React Native Testing Library v14 is quickly increasing user adoption. Two months after release it's no. 2 most popular ver 🎉 Happy to see it, as it's a big one with fundamental changes: new test renderer and async API. Agents + codemods make keeping up to date much easier 🙌 t.co/bkkWlTxLLl
Argentで操作記録からE2Eテストを自動生成#
Software Mansionが、Argentで操作シーケンスであるFlowを記録・再生し、そこからE2Eテストを自動生成できるようになったと発表しました。 記録したFlowを後から再生できるため、UIリグレッションの検出を普段の開発ループに自然に組み込めるとされています。
/argent-create-flowスキルから今すぐ試せるとのことです。
E2E tests can be generated automatically now. Argent lets you record Flows (sequences of interactions) and replay them later. Generating tests becomes part of the loop, making sure UI regressions never happen. 🛡️ Try it out now with the /argent-create-flow skill!
react-native-enriched-html 1.1.0でWebサポートが安定版に#
react-native-enriched-html 1.1.0がリリースされ、Webサポートが正式に安定版となりました。
iOS・Androidと同等の機能を備えており、Webでの採用を待っていた場合は1.1.0を導入時のベースラインにするとよさそうです。
react-native-enriched-html v1.1.0 is out! 🎉 Web support is now stable, with full feature parity with iOS and Android. If you've been waiting to adopt it on the web, 1.1.0 is the baseline to start from 🚀
Expoが既存アプリ (ブラウンフィールド) への導入を継続的に改善#
Expoが、最近のSDKで既存のブラウンフィールドアプリへの導入をよりしやすくする改善を続けていると説明しました。 以前から各チームは、新しい画面や機能をすばやく作るために既存アプリへExpoを導入してきましたが、その導入時に生じがちだった管理面の複雑さを減らす方向に進めているとのことです。
In recent SDKs we've made it easier for existing apps (brownfield apps) to add Expo. For years teams have been using Expo as a way to introduce a new screen or feature to an existing app. It made feature development fast but it required adding some complexity to manage.
React NativeとExpo向けのネイティブブラービュー#
rit3zh氏が、React NativeとExpo向けのネイティブブラービューを公開しました。 GitHubで公開されており、ネイティブのブラー効果を扱いたいシンプルなユースケースで使えそうです。
❄️ Native blur views for React Native + Expo. 🔗 Github: t.co/Lrh4OV3P0J t.co/AJZgpoJoAz
RNRepoと3層キャッシュでネイティブビルドを高速化#
ビルドキャッシュ以外にReact Nativeのネイティブビルド自体を高速化する方法として、Software Mansion製のRNRepoが紹介されました。
事前にコンパイル済みのライブラリを使うことでビルド対象を減らすアプローチで、buildCacheProvider → RNRepo → ccacheの3レイヤーでキャッシュすると全工程でビルドが速くなるそうです。
build cache以外に、RNネイティブビルド自体を高速化する方法としておすすめなのはRNRepo。 事前にコンパイル済みのライブラリを使用することでビルド対象を減らすアプローチ buildCacheProvider -> RNRepo -> ccacheと3レイヤーでキャッシュすると全工程でビルド早くなる github.com/software-mansion/rn…
今週のひとこと#
今週はReact Native 0.87.xでbackgroundImageが標準対応になったのが嬉しいですね！
React Native Gesture Handler 3でテキストのインライン要素にジェスチャーを付けられるのも、文中の一部だけをリンクにしたい場合などに活用できそうです。