週刊React Native
← 一覧へ戻る

2025-10-16 · #6

週刊React Native #6 React Conf 2025開催、React Native 0.82、Liquid Glass with Skiaほか

今回はReact Confの話題を中心です。

React Conf 2025の開催#

ReactやReact Nativeなど、Reactにまつわるカンファレンスが現地時間の10月7日から8日にかけて行われました。 特に、今回はReact Nativeについての話題も多く、React Nativeの熱が高まっているのを感じました。

React Conf 2025 | October 7-8 | Henderson, Nevada & online | Join us!conf.react.dev YouTubeで見る YouTubeで見る

React Foundationの設立#

React Confで、React、React Nativeを含むReact周辺エコシステムのプロジェクトがMetaからReact Foundationに移行されることが発表されました。 これまで、OSSではありつつ、MetaがReactを主導する立場ではありますが、React Foundationに移行することによって、さらにオープンで中立的な体制に変わります。 今後はMetaの支援のほか、Amazon、Callstack、Expo、Meta、Microsoft、Software Mansion、Vercelなど多くの企業が支援していくとのことです。

Introducing the React Foundation: The New Home for React & React NativeMeta open-sourced React over a decade ago to help developers build better user experiences. Since then, React has grown into one of the world’s most popular open source projects, powering over 50 m…Engineering at Meta

React Native 0.82#

React Native 0.82が登場しました。

https://reactnative.dev/blog/2025/10/08/react-native-0.82

New Architectureのみがサポート#

0.76からデフォルトでNew Architectureが設定されていましたが、今回の0.82ではNew Architectureでのみ動作するようになりました。 そのため、オプションで “newArchEnabled=false” や “RCT_NEW_ARCH_ENABLED=0” のようなNew Architectureを無効化する設定がされていても、それらは無視されます。

ただし、Legacy ArchitectureをReact Nativeのコアから削除するのは、次回の0.83のバージョンで行われる予定です。（互換性を損なう変更を減らすため）

Hermes V1を実験的に導入#

React NativeではHermesというJavaScriptのエンジンが導入されていますが、そちらのV1バージョンがオプトインでサポートされました。

Hermes V1ではバンドルの読込時間、TTI（Time to Interactive、バンドルが読み込まれてレンダリング→インタラクティブになるまで）の指標が改善されました。

ちなみにHermes V1は、以前発表されていたStatic HermesやJITコンパイルなどの機能は含まれていないそうです。 それらは現在もテスト中で、将来的にサポート予定とのことです。

React Native @reactnative · 2025年10月8日

2/ Hermes V1 Today we also announced Hermes V1, the next evolution of our JavaScript Engine! Hermes V1 shows a 60% avg improvement on synthetic benchmarks, includes improved modern JS support, and ships today in 0.82 as experimental.

React 19.1.1#

React Native 0.82ではデフォルトのReactバージョンが19.1.1となります。

React 19.1.1ではReact NativeにおけるSuspense内でのuseDeferredValueとstartTransitionの挙動が修正されました。 以前は、React NativeでSuspenseと一緒に使用すると、両方とも誤ってフォールバックコンポーネントを表示していました。 React 19.1.1では、これらはReact Nativeで期待通りに一貫して動作するようになり、Webの動作と一致するようになりました。

DOMノードAPI#

WebのDOMと同じように、refによる要素の参照を行えるようになりました。 例えば、以下のように要素のrefから “getBoundingClientRect()” でサイズの取得が可能になります。

function MyComponent(props) {
  const ref = useRef();

  useEffect(() => {
    const element = ref.current;

    // New methods
    element.parentNode;
    element.parentElement;
    element.childNodes;
    element.children;
    const bounds = element.getBoundingClientRect();
    const doc = element.ownerDocument;
    const maybeElement = doc.getElementById('some-view');

    // Legacy methods are still available
    element.measure((x, y, width, height, pageX, pageY) => {
      /* ... */
    });
  }, []);

  return ;
}

詳細はこちら

Nodes from refs · React Nativereactnative.dev

Web Performance API#

React Nativeで “performance.now()” のような、Webで利用可能なperformance APIが実装されました。

React Native @reactnative · 2025年10月8日

4/ Web Performance APIs and New Tooling It's easier than ever to understand your app's performance thanks to newly added Performance APIs from the web. These provide new runtime profiling capabilities, and work in both development and production builds.

これにより、アプリのパフォーマンスの追跡を行うことができ、React Nativeの将来のバージョンではReact Native DevTools上でパフォーマンスの計測を行うことが可能になります。

React Native @reactnative · 2025年10月8日

And, coming later in React Native 0.83, you'll be able to profile and understand your app more intuitively, with native support for the Performance panel and Network panel in React Native DevTools.

このツイートによると、クリスマス頃にスケジュールされているようです。

Michał Pierzchała @thymikee · 2025年10月8日

Network inspector in React Native DevTools scheduled for Christmas!

VirtualView APIの登場#

ScrollView内で効率よくレンダリングを行うためのVirtualViewコンポーネントが実験的に追加されました。

https://reactnative.dev/docs/next/virtualview

基本的にViewコンポーネントと同様の振る舞いをし、次のように、ScrollView内の子要素として配置します。



    Hello world!

以下の図のように、表示領域から出たときに、自動的にアンマウントされてメモリが解放されます。 また、表示領域に近づいたときに、プリレンダリングされてスムーズなスクロール体験を実現できます。

React Nativeでは効率的なリストの表示を行うために、FlatListコンポーネントが存在します。 FlatListとの主な違いは以下の通りです。

ScrollView + VirtualView

Uniwind#

React Native Unistylesの開発元から、TailwindスタイルでスタイリングすることができるUniwindが登場しました。

Jacek @jpudysz · 2025年10月10日

I’m thrilled to announce that Uniwind has reached public beta! 💨 We’ve been waiting for this moment for months, and it’s finally here! A full blog post is coming soon, but I couldn’t wait to share it with you 😇 👉 github.com/Unistyles-OSS/uniwi…

詳細はこちらのZennをご参考に。

NativeWindの対抗馬？ハイパフォーマンスのUniwindでReact NativeをスタイリングZenn

Liquid Glass with Skia#

React Native Skiaを開発しているWilliam Candillon氏が、SkiaでLiquid Glassのような表現を行う方法の動画を投稿しました。

YouTubeで見る

ExpoでCSSパーサーとTailwindの対応中#

ExpoでネイティブでCSS、およびTailwindをサポートする予定とのことです。 これにより、NativeWindのようなサードパーティのライブラリを導入しなくとも、Expoを利用することでTailwindのAPIでスタイリングが可能になるようです。

Evan Bacon 🥓 @Baconbrix · 2025年10月8日

We've been working with @mark__lawlor to add native CSS, and vanilla Tailwind support to @Expo for native apps! I styled my code editor prototype entirely with it—the speed and quality is unmatched ⚡️ Blog post with more details coming soon! twitter.com/Danny_H_W/status/1…

今週のひとこと#

今週はReact Confもあり、話題が多かったですね！ React Foundationの設立は、今後のReactおよびReact Nativeの持続性の観点で非常に良いニュースだと思いました。 また、React Foundationを支援するほとんどの企業が、React Nativeを推進している企業で、ReactエコシステムにおけるReact Nativeの勢いが非常に強くなっている印象を受けました。

日本でもReact Nativeがもっと様々な企業で使われていくといいですね…！