2025-09-28 · #4
週刊React Native #4 ネイティブAPI直接呼出し、nitro-fetch登場、RN 0.72→0.76移行ほか
React Nativeから直接ネイティブのAPIを呼び出せるように#
現在開発中のreact-native-node-apiを使い、React NativeからNativeScriptを介して、直接iOSのフレームワークのAPIを実行できるようになりました。 これによって、将来的にReact NativeのNative Modulesを利用せずにネイティブの機能を利用できるようになるかもしれません。
After 6+ years of failed experiments, it's finally working. Direct native API access from JS in React Native 🥹 Access the full iOS SDK – like a native dev. Cross threads – like a native dev. Today, my brother in JavaScript, you are a native dev.
高速にデータフェッチが可能になるreact-native-nitro-fetchが登場#
Nitro Moduleを利用し、AndroidではCronet、iOSではURLSessionを使用して、高速にデータフェッチができる
Nitro Moduleを利用し、AndroidではCronet、iOSではURLSessionを使用して、高速にデータフェッチができるreact-native-nitro-fetchが登場しました。 プリフェッチ機構やディスクキャッシュ、HTTP2、QUIC、Brotilなどにより、標準的なReact Nativeのfetchと比べてパフォーマンスが向上しています。 また、Workletsをサポートしており、JSONのパース処理などで負荷がかかる処理をバックグランドスレッドで行うことで、UIスレッドがブロックされるのを防ぐことができます。
が登場しました。 プリフェッチ機構やディスクキャッシュ、HTTP2、QUIC、Brotliなどにより、標準的なReact Nativeのfetchと比べてパフォーマンスが向上しています。 また、Workletsをサポートしており、JSONのパース処理などで負荷がかかる処理をバックグラウンドスレッドで行うことで、UIスレッドがブロックされるのを防ぐことができます。
We just launched a new library: react-native-nitro-fetch! 🚀 - ⚡️ Fast HTTP stack using Cronet (super optimized Chromium implementation) - 💪 Supports HTTP/2, QUIC, Brotli, and disk cache - ⏰ "Prefetching" feature to start loading before your JS code runs - 🧵 Worklet support!
expo-sqliteのlocalStorage APIがExpo SDK 54で利用可能に#
Expo SDK 54でのexpo-sqliteで、localStorage APIが追加されました。 これにより、AsyncStorageよりも扱いやすく、高いパフォーマンスで利用することができます。
💡 Did you know there's a new spec-compliant `localStorage` API in @Expo SDK 54! The sync API is easier than AsyncStorage, and works across platforms with no additional overhead on web. Built for New Architecture and uses our powerful new SQLite native module for fast I/O.
Expo SDK 54で多くのパッケージマネージャーがサポートされるように#
Expo AutolinkingがExpo SDK 54で進化しました。 npmやYarnに加え、pnpmやBunもサポートされるようになり、モノレポへの対応も強化されました。
Expo Autolinking got smarter in SDK 54⚡️ ♢ Works with all major package managers (npm, pnpm, Yarn, Bun) ♢ Handles monorepos + hoisting conflicts ♢ Transitive React Native deps now autolink automatically Basically you'll find less "copy-paste" situations and more “it just
HeroUI Native alpha 13#
HeroUI Native alpha 13で新たなDialogコンポーネントが追加されました。 スワイプ可能で、背景でブラーも利用可能など、高機能なDialogコンポーネントのようです。
ShowCaseにLinearアプリのようなサンプルも追加されています。
HeroUI Native alpha 13 is here 🚀 What’s new: ⚡️ New Dialog component (performant, swipable, customizable) 🌀 Beautiful animations out of the box 🎨 New Showcase: @linear Issue screen built only with HeroUI components + default theming Big step forward ✨
その他#
Expo Router、Reanimatedなどを使ったアニメーションのヘッダー#
タブを切り替えたときにきれいに動くアニメーションのヘッダー例
Fun pattern here: one animated header shared across all tabs. Using @expo-router, passing state (like search query or filters) through params so the search tab can pick it up. ✦ Built for React Native ✦ Powered by @swmansion reanimated ✦ Available on makeitanimated.dev
React Native 0.72→0.76へのアップデートを行った教訓#
React Native 0.72のプロジェクトを、Android API 35をサポートするために0.76以上にする必要がありました。
現在のReact Nativeは0.81ですが、0.72からいきなり0.81に移行するのは大きな変更が必要になるため、まずは0.76にアップデートすることにしたとのことです。
そのときに行った対応や得られた教訓が述べられています。
今週のひとこと#
Jamie Birchさんが試されている、React Nativeから直接ネイティブAPIを呼び出す試みは興味深いですね！
この技術は、NativeScriptというフレームワークをReact Nativeから呼び出すことで実現しています。 NativeScriptは、もともとJavaScriptからネイティブAPIを直接呼び出すことを特徴としています。
NativeScript - Write Native with TypeScriptBuild native iOS and Android apps with TypeScript, direct platform API access, and the JavaScript tooling you already know.NativeScript
そして、今年登場したNativeScript 8.9でNode-APIがサポートされ、React NativeにNode-APIをサポートするreact-native-node-apiが登場したことで、React Nativeの世界でも同様のことが可能になりつつあるという流れのようですね。
「React NativeでNode-APIを活用すると、どのようなメリットがあるのだろう？」と思っていましたが、まさかネイティブAPIへの直接アクセスという活用方法があるとは、大きな発見でした。