# React Native 0.85（2026年）：新アニメーションバックエンド、厳格なTypeScript APIと面接対策

> React Native 0.85の共有アニメーションバックエンド、ポストブリッジアーキテクチャ、Metro TLSについて、コード例と面接質問を交えて徹底解説します。

- Published: 2026-05-16
- Updated: 2026-05-16
- Author: Anthony Fillion-Maillet
- Tags: react-native, animation, typescript, mobile-development, interview
- Reading time: 10 min

---

React Native 0.85は2026年4月にリリースされ、フレームワーク創設以来最も重要なアニメーションシステムの刷新を実現しました。58名のコントリビューターによる604のコミットを含む本リリースでは、共有アニメーションバックエンド（Shared Animation Backend）の導入、ポストブリッジ移行の完了、エンタープライズ環境向けのMetro TLSサポートが追加されています。

> **重要ポイント**
>
> React Native 0.85は、AnimatedとReanimatedのアニメーションエンジンを単一の共有バックエンドに統合しました。width、height、flexなどのレイアウトプロパティが、useNativeDriver: trueで初めてアニメーション可能になりました。5年以上にわたり開発者を悩ませてきた制限がついに解消されています。

## 共有アニメーションバックエンド：AnimatedとReanimatedの統合

React Native 0.85の目玉機能は、Software Mansionとの共同開発による[共有アニメーションバックエンド](https://reactnative.dev/blog/2026/04/07/react-native-0.85)です。従来、組み込みのAnimatedライブラリとコミュニティのReanimatedライブラリは、それぞれ独立した調整ループを維持していました。各システムが独自のアニメーション更新適用ロジックを持ち、一方のパフォーマンス改善が他方に恩恵をもたらせないサイロ化されたエコシステムを形成していました。

共有アニメーションバックエンドは、コアとなるアニメーション更新ロジックをReact Nativeレンダラーに直接組み込みます。アニメーションベースのコミットがReactやスタイリングライブラリとShadow Treeを取り合う代わりに、専用のメカニズムが独立して処理を行います。

```typescript
// AnimatedLayoutExample.tsx
import { Animated, Pressable, View, StyleSheet } from 'react-native';
import { useRef, useState } from 'react';

function ExpandableCard() {
  const widthAnim = useRef(new Animated.Value(120)).current;
  const heightAnim = useRef(new Animated.Value(80)).current;
  const [expanded, setExpanded] = useState(false);

  const toggle = () => {
    const toWidth = expanded ? 120 : 300;
    const toHeight = expanded ? 80 : 200;

    // Layout props with useNativeDriver — new in 0.85
    Animated.parallel([
      Animated.spring(widthAnim, {
        toValue: toWidth,
        useNativeDriver: true, // Now supports layout props
      }),
      Animated.spring(heightAnim, {
        toValue: toHeight,
        useNativeDriver: true,
      }),
    ]).start();

    setExpanded(!expanded);
  };

  return (
    <Pressable onPress={toggle}>
      <Animated.View
        style={[
          styles.card,
          { width: widthAnim, height: heightAnim },
        ]}
      />
    </Pressable>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#61DAFB',
    borderRadius: 8,
  },
});
```

0.85以前は、widthやheightなどのレイアウトプロパティに`useNativeDriver: true`を設定するとエラーが発生していました。開発者はスムーズな60fpsアニメーション（ネイティブドライバー使用、transformとopacityに限定）か、レイアウト変更用のカクつくJSスレッドアニメーションかの二択を迫られていました。共有アニメーションバックエンドは、この5年来の制限を根本的に解決しています。

## アニメーションバックエンドの内部動作

以前は`-DRN_USE_ANIMATION_BACKEND`コンパイラフラグで制限されていたC++アニメーションバックエンドが、0.85ではデフォルトで有効になっています。このシステムは2つの専用更新パスを使用します：

- **synchronouslyUpdateProps** — レイアウト以外の変更（opacity、transform）向けの高速パス。完全なFabricコミットサイクルをバイパスします
- **完全なFabricコミット** — レイアウト再計算が必要な場合（width、height、flex、padding）にのみトリガーされます

このデュアルパスアプローチにより、単純なopacityフェードは従来通りの速度を維持しながら、レイアウトアニメーションがリグレッションなしでネイティブスレッドのパフォーマンスを獲得できます。

> **Reanimated互換性**
>
> Reanimated 4.x（現在ベータ版）は、共有アニメーションバックエンドと完全に統合されています。既存のReanimated 3.xワークレットは引き続き動作しますが、共有バックエンドへの移行により、特に120Hzで動作するレイアウトアニメーションにおいて、以前は不可能だったパフォーマンス向上が実現可能になります。

## ポストブリッジアーキテクチャ：ブリッジの完全撤廃

React Native 0.85は、ブリッジフォールバックもレガシー相互運用レイヤーも一切含まない初の安定版リリースです。JSI（JavaScript Interface）ベースの[新アーキテクチャ](https://docs.expo.dev/guides/new-architecture/)は、JavaScriptとネイティブコード間の直接的な同期通信を2ms未満のインターロップレイテンシーで提供します。

[面接対策](/technologies/react-native/interview-questions/rn-native-modules)における実用的な意味合い：

```typescript
// TurboModuleExample.tsx
// TurboModules now lazy-load by default in 0.85
// Cold-start memory reduced by ~40%
import { TurboModuleRegistry } from 'react-native';

// Module loads only when first accessed, not at app startup
const CameraModule = TurboModuleRegistry.getEnforcing('Camera');

// Direct synchronous call via JSI — no bridge serialization
const hasPermission = CameraModule.checkPermission();
```

0.85ではTurboModulesがデフォルトで遅延ロードされ、コールドスタートメモリが約40%削減されます。すべてのネイティブモジュールをイーガーに登録する際のスタートアップペナルティが排除されました。これはReact Nativeのパフォーマンス最適化に関する面接でよく問われるトピックです。

## Metro TLS：開発サーバーのHTTPS対応

企業プロキシの背後で作業したり、セキュアオンリーのAPIをテストするエンタープライズチームは、MetroのHTTP専用開発サーバーに対してワークアラウンドが必要でした。Metroは現在、TLSをネイティブサポートしています：

```javascript
// metro.config.js
const fs = require('fs');
const { getDefaultConfig } = require('@react-native/metro-config');

const config = getDefaultConfig(__dirname);

// Enable HTTPS + WSS (Fast Refresh over secure WebSocket)
config.server.tls = {
  ca: fs.readFileSync('./certs/ca.pem'),
  cert: fs.readFileSync('./certs/cert.pem'),
  key: fs.readFileSync('./certs/key.pem'),
};

module.exports = config;
```

ローカル開発では、[mkcert](https://github.com/FiloSottile/mkcert)が手動のCA設定なしに信頼される証明書を生成できます。TLS有効時にはFast RefreshがWSS経由で動作し、セキュア環境でもホットリロードが機能します。

## 破壊的変更とマイグレーションガイド

アップグレード時に注意が必要な破壊的変更がいくつかあります：

**Jestプリセットの分離** — 組み込みプリセットが`@react-native/jest-preset`に移動しました：

```javascript
// jest.config.js — before
module.exports = {
  preset: 'react-native',
};

// jest.config.js — after
module.exports = {
  preset: '@react-native/jest-preset',
};
```

**StyleSheet.absoluteFillObject の削除** — `StyleSheet.absoluteFill`に置き換えます：

```typescript
// Before (0.84 and earlier)
const overlay = StyleSheet.absoluteFillObject;

// After (0.85+)
const overlay = StyleSheet.absoluteFill;
```

**Node.jsバージョン要件** — 最低Node.js 20.19.4が必要です。バージョン21および23（いずれもEOL）はサポート対象外です。

**テキストオーバーフロー動作の変更** — `borderRadius`境界外のテキストがデフォルトで非表示になります。角丸を超えて表示されるテキストに依存するコンポーネントには、明示的に`overflow: 'visible'`スタイリングが必要です。

> **Androidの破壊的変更**
>
> ReactTextUpdateが内部APIに変更、ReactZIndexedViewGroupとUIManagerHelperが非推奨化、CatalystInstanceImplが完全に削除されました。これらのAPIに直接アクセスするライブラリは、0.85への移行前にアップデートが必要です。

## DevTools：複数デバッガーの同時接続

React Native 0.85は、複数のChrome DevTools Protocol（CDP）接続の同時利用をサポートしています。VS Code、React Native DevTools、AIコーディングエージェントが、互いのセッションを終了させることなく同時に接続できます。

これは、複数のツールを組み合わせた[デバッグワークフロー](/technologies/react-native/interview-questions/rn-debugging)を使用するチームにとって特に重要です。Android版ネットワークパネルでは、以前のバージョンで発生したリクエストボディプレビューのリグレッションが修正されています。

## Shadow Treeコミットブランチング

新しいFabricコミットブランチングメカニズムは、React NativeがShadow Treeに更新をコミットする方法を根本的に変更しています。従来、アニメーションコミットとReactの状態更新は同じコミットパスで競合し、再レンダリングを伴う複雑なアニメーション中にフレーム落ちを引き起こしていました。

ブランチングメカニズムはこれらの関心事を分離します。アニメーションバックエンドは独自のブランチで動作し、Reactのコミットは独立して進行します。両ブランチは各フレームの終わりに調整され、アニメーション付きヘッダーを持つリストスクロール中に発生していた視覚的なグリッチが防止されます。

## View Transition API（インフラストラクチャ）

新しいフィーチャーフラグ`viewTransitionEnabled`は、ビュー間のアニメーション遷移を可能にする将来のView Transition APIの基盤です。0.85ではデフォルトで`false`に設定されており、ユーザー向け機能ではなくインフラストラクチャとしての位置付けです。これは、Web版の[View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API)に類似した組み込みナビゲーション遷移に向けたReact Nativeの方向性を示しています。

## 面接対策：React Native 0.85のアーキテクチャ

[React Nativeの面接](/technologies/react-native)に向けて準備する方に、0.85アーキテクチャを反映した重要な質問を紹介します：

**Q: 共有アニメーションバックエンドはどのような問題を解決しますか？**

共有アニメーションバックエンドは、以前は分離していた2つのアニメーション調整システム（AnimatedとReanimated）をReact Nativeコアの単一エンジンに統合します。0.85以前は、一方のシステムでのパフォーマンス最適化が他方に恩恵をもたらすことができませんでした。共有バックエンドにより、ネイティブドライバーによるレイアウトプロパティのアニメーションを妨げていた制限も撤廃されています。

**Q: 0.85でTurboModulesがデフォルトで遅延ロードされる理由は何ですか？**

スタートアップ時にすべてのTurboModulesをイーガー登録すると、セッション中に使用されない可能性のあるモジュールにもメモリが消費されていました。遅延ロードは最初のアクセスまでインスタンス化を遅延させ、開発者向けAPIを変更することなくコールドスタートメモリを約40%削減します。

**Q: アニメーションバックエンドの2つの更新パスについて説明してください。**

`synchronouslyUpdateProps`は、Fabricコミットをトリガーせずにレイアウト以外のプロパティ変更（opacity、transform）を処理します。アニメーションがレイアウトプロパティ（width、height、padding）を変更する場合は、適切なレイアウト再計算のために完全なFabricコミットがトリガーされます。このデュアルパスアプローチにより、単純なアニメーションのパフォーマンスを維持しながら、ネイティブスレッドでのレイアウトアニメーションが実現されています。

**Q: Shadow Treeコミットブランチングとは何ですか？**

コミットブランチングは、アニメーション駆動のShadow Tree更新とReact状態駆動の更新を独立したブランチに分離します。各ブランチは独立してコミットし、フレーム境界で調整されます。これにより、同じコミットパスを奪い合うReactの再レンダリングに起因するアニメーションのカクつきが防止されます。これはアニメーション要素を含むリストスクロールでのフレーム落ちの一般的な原因でした。

## 厳格なTypeScript API：強制化への道

React Native 0.80でオプトインとして導入された厳格なTypeScript APIは、デフォルト化に向けて継続的に進化しています。有効化するには：

```json
// tsconfig.json
{
  "compilerOptions": {
    "customConditions": ["react-native-strict-api"]
  }
}
```

厳格なAPIは、手動でメンテナンスする代わりにソースコードから直接型を生成します。公開の`react-native`インデックスファイルへのエクスポートを制限し、バージョン間で壊れる内部ファイルパスへの依存を防止します。0.85にアップグレードするチームは、将来のリリースでの強制化に備えてこのフラグを有効にすることが推奨されます。

## まとめ

- 共有アニメーションバックエンドがAnimatedとReanimatedを1つのエンジンに統合し、初めて`useNativeDriver: true`でのレイアウトプロパティアニメーションを実現
- React Native 0.85はレガシー相互運用ゼロでポストブリッジ移行を完了し、遅延ロードTurboModulesによりコールドスタートメモリを40%削減
- Metro TLSサポートにより、エンタープライズ開発環境のHTTPS要件を解決
- Shadow Treeコミットブランチングにより、Reactコミットの競合に起因するアニメーションのカクつきを解消
- 厳格なTypeScript APIは将来の強制化に備えて今から有効にすべき
- アップグレード前に破壊的変更（Jestプリセットの分離、StyleSheet.absoluteFillObjectの削除、Node.js 20+要件）への対応が必要

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ja/blog/react-native/react-native-085-new-features-animation-backend