2026-07-22 · #37
週刊React Native #37 Metrognome AIツール、FlightyをExpoで再現、expo-widgets安定版ほか
Metrognome：遅い画面を渡すだけで最適化するAIツール#
Callstackが公開したMetrognomeは、遅いReact Native画面を渡すと修正案を提案し、実際にアプリを操作してプロファイリングを行い、効果のあった変更だけを残すツールです。 Agent React DevTools、Metro MCP、React Native Best Practicesを組み合わせて動作しているとのことで、Xavier Costa氏によるブログ記事でも活用方法が解説されています。
Give Metrognome a slow React Native screen and a night. It proposes a fix, drives the app, profiles it, and keeps the changes that hold up. Xavier Costa from @upholdtalent explains how it uses @agent_device, Agent React DevTools, Metro MCP, and React Native Best Practices ⬇️
@upholdtalent @agent_device Read the article on our blog ➡️ clstk.com/4vJebLQ
FlightyのiOSアプリをFable 5とExpoで再現#
iOSで最も洗練されたネイティブアプリの一つとされるFlightyを、Fable 5を使ってExpoで再現できたという報告がありました。 すべてのUIが本物のネイティブUIで構成されているそうです。
Flighty is one of the best-designed native app's on iOS, so I rebuilt it with @expo. Everything on the Expo side is real native UI. This is the best time there's ever been to build app's with Expo.
expo-widgetsがSDK 56で安定版に#
Expo SDK 56でexpo-widgetsが安定版になりました。 SwiftUIや別のXcodeターゲットを使わずに、ReactコンポーネントとしてそのままiOSウィジェットやLive Activitiesを構築できるようになったとのことです。
Your app icon is one tap into your app. A widget is zero taps, and it shows up while someone's busy doing something else. As of SDK 56, 𝚎𝚡𝚙𝚘-𝚠𝚒𝚍𝚐𝚎𝚝𝚜 is stable. Build iOS widgets and Live Activities as React components. No SwiftUI, no separate Xcode target. Our
LegendList 3.3.3、パフォーマンス改善#
Solとの詳細なパフォーマンス分析を経て、LegendList 3.3.3がリリースされました。 高速スクロール時のブランク表示が減少し、位置のジャンプが解消され、複数アイテムタイプ利用時のオーバーヘッドも削減されているそうです。
I just released LegendList 3.3.3, the result of running some deep performance analysis with Sol. It's less blanky while scrolling fast, positions don't jump anymore, less overhead with many item types, better onStartReached/onEndReached. The apps I tested look much better! 🎉
React Native Screens 4.26.0リリース#
Tabs APIが安定版となり、AndroidではFormSheetアニメーションとキーボード操作が改善されました。
iOSでは透明ヘッダー内のPressableのタッチ処理が修正され、bottomAccessoryHiddenプロパティでボトムアクセサリーを非表示にできるようになっています。
React Native Screens 4.26.0 has just landed: ✔️ Tabs API is now stable ✔️ Improved FormSheet animations and keyboard interactions on Android ✔️ Fixed touch handling for Pressables in transparent headers on iOS ✔️ Added the bottomAccessoryHidden prop to hide the bottom accessory
React Navigation 8のButtonがサスペンス時に自動でローディング表示#
React Navigation 8のelementsパッケージのButtonコンポーネントを使ったナビゲーション時、遷移先の画面がSuspendした場合に追加コードなしで自動的にローディングインジケーターが表示されるようになりました。
In React Navigation 8, when using `Button` from elements for navigation, it can automatically show a loading indicator if the target screen suspends with no additional code.
react-native-vision-camera 5.1.1リリース#
react-native-vision-camera 5.1.1では、Androidでfocus(…, { adaptiveness: 'locked' })がサポートされ、GPUアクセラレーションによるプライベートFrame Outputが改善されています。
getSupportedResolutions()やBuffers周りのバグ修正も含まれています。
I just released react-native-vision-camera 5.1.1! 🥳🎉 👉 Support for 𝚏𝚘𝚌𝚞𝚜(…, { 𝚊𝚍𝚊𝚙𝚝𝚒𝚟𝚎𝚗𝚎𝚜𝚜: '𝚕𝚘𝚌𝚔𝚎𝚍' }) on Android 👉 Improved GPU-accelerated 𝙿𝚁𝙸𝚅𝙰𝚃𝙴 Frame Output 👉 Bugfixes around 𝚐𝚎𝚝𝚂𝚞𝚙𝚙𝚘𝚛𝚝𝚎𝚍𝚁𝚎𝚜𝚘𝚕𝚞𝚝𝚒𝚘𝚗𝚜(…) and Buffers
Argentの機能拡張が続く#
Claude CodeやCodexからReact Native/ネイティブアプリをタップ操作させたり、スクリーンショットやAccessibility Treeを見てデバッグさせたりできるArgentがアップデートされました。 カメラやマイク、位置情報など多数のパーミッションを、システム設定画面に移動せずに許可・拒否・リセットできるようになっています。
agent_deviceについては公式のExpoドキュメントでも学べるようになったそうです。
最近開発ツールで良かったのArgentで、React Native / ネイティブアプリをClaude Code/Codexからタップして操作させたり、スクショ撮ったりAccessibility Treeを見てデバッグさせたりできる 最近はAGENTS.mdなど細かく書くより、AIが操作できる範囲を増やすツールを入れる方がレバレッジ効くなと思う twitter.com/swmansion/status/2…
Argent can now grant, deny, or reset permissions without navigating to the system settings. 🛠️ The list includes: camera, microphone, photos, contacts, calendar, location, and much more.
you can now learn about @agent_device from official @expo docs ✨
expo-device-hub：ブラウザ上でSimulator/Emulatorを操作#
ExpoのGitHubで、ブラウザ上からiOS SimulatorやAndroid Emulatorを操作できるexpo-device-hubが公開されています。 内部的にはserve-simとserve-emuを使っており、Expo DevToolsのプラグインとして追加すると、ExpoのDevServer起動時にDeviceHubも起動します。
expo-device-hubというブラウザ上でiOS Simulator/Android Emulatorを操作できるツールがExpoのGitHubで公開されていた。 内部的にはserve-simとserve-emuを使っている。 Expo DevToolsのプラグインとして追加でき、ExpoのDevServer起動時にこちらのDeviceHubも起動する。
eas-simulator：EASクラウド上のSimulatorをCLIやAIエージェントから操作？#
Expoのskillsリポジトリに「eas-simulator - Run and drive your app on a remote iOS/Android simulator on EAS cloud, from the CLI or an AI agent」という記載があり、EAS上でホストされたSimulator/Emulatorが使えるようになりそうです。
ExpoのSkillをみていたら、 "eas-simulator - Run and drive your app on a remote iOS/Android simulator on EAS cloud, from the CLI or an AI agent" と記載もあって、EAS上でホストされたSimulator/Emulatorが使えるようになるっぽい？ github.com/expo/skills/tree/ma… twitter.com/kazutoyo/status/20…
Project Redraw：WebGPUとcanvas2d APIを組み合わせた新描画プロジェクト#
wcandillonとMohamedが、SVGパスのジオメトリ情報をTypeScriptで直接活用する新プロジェクト「Redraw」を発表しました。 canvas2d APIのシンプルさとWebGPUのパワーを組み合わせることを目指しているとのことです。
With Mohamed we wondered how it would look like if we leveraged the SVG path geometry information directly in TypeScript. The simplicity of the canvas2d API backed with the power of WebGPU: that's the aim of project Redraw. twitter.com/m090009/status/207…
Paper Shadersでシェーダーがワンラインimportに#
メッシュグラデーションやリキッドメタルロゴのような複雑なデザインを、GLSLの学習なしで実装できる「Paper Shaders」が紹介されました。 導入がワンラインimportで済むとのことです。
Your designer sends you a mockup featuring a mesh gradient and a liquid-metal logo. You google "GLSL tutorial." Your therapist asks why you seem different this week. You tell the designer it is not feasible. 𝗣𝗮𝗽𝗲𝗿 𝗦𝗵𝗮𝗱𝗲𝗿𝘀 made it a one-line import. Zero
bacons/apple-targets v5.0.0リリース#
bacons/apple-targets v5.0.0では、ターゲットフォルダに既存の.entitlementsファイルがない場合、ネイティブのentitlementsファイルがios/.targets/<name>/generated.entitlementsに書き出されるようになりました。
bacons/[email protected] is out now. The native entitlements files for targets will now be written to `ios/.targets/<name>/generated.entitlements` unless a .entitlements file already exists in the target folder. This should make it easier to generate variants of targets and
UnityからReact Native + Phaserへ移行した開発記録#
Unityの利用をやめ、React NativeとPhaserを組み合わせてスマホゲームを開発し、7週間でApp Storeにリリースしたという体験記がZennで公開されました。
UnityをやめてReact Native + Phaserでスマホゲームを作り、7週間でApp Storeに出した｜いちけん zenn.dev/ichikengogo/articles/… #zenn
今週のひとこと#
Reanimatedを雰囲気で使っていたのをちゃんと理解したくて、公式ドキュメントを元にCodexに学習用の本をつくってもらいました。 続けてReact Native Skiaの学習用ページも公開したので、ぜひご覧ください！
React Native Reanimatedを雰囲気で使っているけど、ちゃんと全部理解したかったから、公式のドキュメントを元にCodex君に依頼して本にしてもらった。 これで完全に把握した kazutoyo.jp/reanimated-book
Reanimatedに続いてReact Native Skiaの学習用ページをつくりました！ 3連休にぜひ！ kazutoyo.jp/rn-skia-book