React Native 0.86は、Android 15以降で必須となったエッジツーエッジレイアウトへの包括的なサポートを提供します。2026年6月にリリースされた本バージョンは、0.85に続いて破壊的変更がゼロという特徴を持ち、Androidのエッジツーエッジ強制によって静かに壊れていたレイアウトおよび測定APIの問題を修正しています。

破壊的変更なし

React Native 0.86は0.85との完全な後方互換性を維持しています。ほとんどのアプリケーションでコード変更が不要であり、React Native史上最もスムーズなメジャーバージョン移行の一つとなっています。

Android 15におけるエッジツーエッジの理解

エッジツーエッジレイアウトは、ステータスバーやナビゲーションバーなどのシステムUI要素の下にコンテンツを拡張することを可能にします。Android 15では、アプリの設定に関係なく、この動作がデフォルトで強制されます。React Native 0.86は、これらの条件下ですべての測定およびレイアウトAPIが正しく動作することを保証します。

measureInWindow関数は、エッジツーエッジモードがアクティブな場合でも正確な座標を返すようになりました。以前は、測定値がシステムUI要素の高さ分だけオフセットされ、オーバーレイ、ツールチップ、フローティングアクションボタンで位置決めのバグが発生する可能性がありました。

SafeAreaHandler.tsxtypescript

import React, { useRef, useCallback } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

interface TooltipPosition {
  x: number;
  y: number;
}

export function SafeAreaHandler() {
  const buttonRef = useRef<View>(null);
  const insets = useSafeAreaInsets();

  const showTooltip = useCallback(() => {
    // measureInWindow now returns correct coordinates on Android 15+
    buttonRef.current?.measureInWindow((x, y, width, height) => {
      const position: TooltipPosition = {
        x: x + width / 2,
        // Coordinates are accurate even with edge-to-edge enabled
        y: y + height + 8,
      };
      console.log('Tooltip position:', position);
    });
  }, []);

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <View ref={buttonRef} collapsable={false}>
        <TouchableOpacity onPress={showTooltip} style={styles.button}>
          <Text style={styles.buttonText}>Show Tooltip</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  button: { backgroundColor: '#007AFF', padding: 16, borderRadius: 8 },
  buttonText: { color: '#FFFFFF', fontWeight: '600' },
});

collapsable={false}プロパティは、測定のためにViewがネイティブ参照を維持することを保証します。これがない場合、React Nativeがネイティブビューを最適化で除去し、measureInWindowが失敗する可能性があります。

Android 15向けKeyboardAvoidingViewの修正

KeyboardAvoidingViewコンポーネントは、エッジツーエッジモードがアクティブな場合、利用可能なスペースを誤って計算していました。バージョン0.86では、利用可能な高さの計算にシステムUIインセットを考慮することで、この問題を修正しています。

ChatInput.tsxtypescript

import React, { useState } from 'react';
import {
  KeyboardAvoidingView,
  TextInput,
  Platform,
  StyleSheet,
  View,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export function ChatInput() {
  const [message, setMessage] = useState('');
  const insets = useSafeAreaInsets();

  return (
    <KeyboardAvoidingView
      // behavior="padding" works correctly on Android 15+ edge-to-edge
      behavior={Platform.OS === 'ios' ? 'padding' : 'padding'}
      style={styles.container}
      // keyboardVerticalOffset accounts for headers and safe areas
      keyboardVerticalOffset={Platform.select({ ios: 88, android: 0 })}
    >
      <View style={styles.content}>
        {/* Chat messages would render here */}
      </View>
      <View style={[styles.inputContainer, { paddingBottom: insets.bottom }]}>
        <TextInput
          value={message}
          onChangeText={setMessage}
          placeholder="Type a message..."
          style={styles.input}
          multiline
        />
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  content: { flex: 1 },
  inputContainer: { borderTopWidth: 1, borderTopColor: '#E5E5E5', padding: 8 },
  input: { minHeight: 40, padding: 12, backgroundColor: '#F5F5F5', borderRadius: 20 },
});

Android 15では、behavior="height"を使用するとレイアウトのジャンプが発生することがよくあります。padding動作は、エッジツーエッジが有効な状態でより滑らかなアニメーションと予測可能な位置決めを提供します。

モーダル表示中のStatusBar更新

Modalが開いている間、StatusBarのスタイルと可視性の変更が適用されない永続的なバグがありました。React Native 0.86はこれを解決し、モーダルフローで動的なステータスバーテーマを可能にしています。

ThemedModal.tsxtypescript

import React, { useState, useEffect } from 'react';
import { Modal, View, StatusBar, Text, Pressable, StyleSheet } from 'react-native';

interface ThemedModalProps {
  visible: boolean;
  onClose: () => void;
  darkMode?: boolean;
}

export function ThemedModal({ visible, onClose, darkMode = false }: ThemedModalProps) {
  // StatusBar changes now apply correctly while modal is visible
  useEffect(() => {
    if (visible) {
      StatusBar.setBarStyle(darkMode ? 'light-content' : 'dark-content', true);
      StatusBar.setBackgroundColor(darkMode ? '#1A1A1A' : '#FFFFFF', true);
    }
    return () => {
      // Restore original status bar when modal closes
      StatusBar.setBarStyle('dark-content', true);
      StatusBar.setBackgroundColor('#FFFFFF', true);
    };
  }, [visible, darkMode]);

  return (
    <Modal visible={visible} animationType="slide" onRequestClose={onClose}>
      <View style={[styles.modalContent, darkMode && styles.darkBackground]}>
        <StatusBar
          barStyle={darkMode ? 'light-content' : 'dark-content'}
          backgroundColor={darkMode ? '#1A1A1A' : '#FFFFFF'}
        />
        <Text style={[styles.title, darkMode && styles.lightText]}>
          Modal Content
        </Text>
        <Pressable onPress={onClose} style={styles.closeButton}>
          <Text style={styles.closeButtonText}>Close</Text>
        </Pressable>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  modalContent: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFFFF' },
  darkBackground: { backgroundColor: '#1A1A1A' },
  title: { fontSize: 24, fontWeight: 'bold', color: '#000000' },
  lightText: { color: '#FFFFFF' },
  closeButton: { marginTop: 20, padding: 12, backgroundColor: '#007AFF', borderRadius: 8 },
  closeButtonText: { color: '#FFFFFF', fontWeight: '600' },
});

この修正は、設定画面や画像ビューアなどのモーダルフロー内でダークモード切り替えを実装するアプリにとって特に重要です。

React Nativeの面接対策はできていますか？

インタラクティブなシミュレーター、flashcards、技術テストで練習しましょう。

React Nativeを探索する

DevToolsのライト・ダークモードエミュレーション

React Native DevToolsはEmulation.setEmulatedMediaのサポートを導入し、デバイスやエミュレータの設定変更なしに即座にテーマを切り替えることができるようになりました。この機能には、コマンドパレット（macOSではCmd+Shift+P、Windows/LinuxではCtrl+Shift+P）からアクセスできます。

ThemeProvider.tsxtypescript

import React, { createContext, useContext, useState, useEffect } from 'react';
import { useColorScheme, Appearance } from 'react-native';

type Theme = 'light' | 'dark';

interface ThemeContextValue {
  theme: Theme;
  toggleTheme: () => void;
  colors: typeof lightColors;
}

const lightColors = {
  background: '#FFFFFF',
  surface: '#F5F5F5',
  text: '#000000',
  textSecondary: '#666666',
  primary: '#007AFF',
  border: '#E5E5E5',
};

const darkColors = {
  background: '#1A1A1A',
  surface: '#2D2D2D',
  text: '#FFFFFF',
  textSecondary: '#A0A0A0',
  primary: '#0A84FF',
  border: '#3D3D3D',
};

const ThemeContext = createContext<ThemeContextValue | null>(null);

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  // DevTools emulation triggers colorScheme changes via setEmulatedMedia
  const systemColorScheme = useColorScheme();
  const [theme, setTheme] = useState<Theme>(systemColorScheme ?? 'light');

  useEffect(() => {
    // Listen for DevTools theme emulation changes
    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
      if (colorScheme) {
        setTheme(colorScheme);
      }
    });
    return () => subscription?.remove();
  }, []);

  const toggleTheme = () => setTheme(prev => (prev === 'light' ? 'dark' : 'light'));
  const colors = theme === 'dark' ? darkColors : lightColors;

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme, colors }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme(): ThemeContextValue {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within ThemeProvider');
  }
  return context;
}

エミュレートされたメディア状態はDevToolsが切断されるとリセットされるため、本番ビルドは開発時のテーマテストの影響を受けません。

技術面接対策: React Native 0.86とエッジツーエッジ

2026年の技術面接では、Android 15互換性とエッジツーエッジ実装への焦点がますます高まっています。これらの概念を習得することで、最新のモバイル開発プラクティスの理解を示すことができます。包括的な面接準備には、React Nativeデバッグ面接対策モジュールを参照してください。

エッジツーエッジモードとは何か、なぜAndroid 15で強制されるのか

エッジツーエッジモードは、アプリコンテンツをシステムUI要素（ステータスバー、ナビゲーションバー、ジェスチャーインジケーター）の下に拡張します。Android 15では、没入型体験とプラットフォーム全体で一貫したUIを提供するために、この動作がデフォルトで強制されます。アプリは、コンテンツがシステムUIによって隠されないようにセーフエリアインセットを処理する必要があります。

エッジツーエッジ有効時のmeasureInWindowの動作変化

React Native 0.86以前、measureInWindowは、システムUI領域を除外した可視ウィンドウに対する相対座標を返していました。エッジツーエッジでは、ウィンドウは画面端まで拡張されますが、測定値は誤ってオフセットされていました。バージョン0.86は、エッジツーエッジ状態に関係なく座標が正確であることを保証します。

Android 15で推奨されるKeyboardAvoidingViewの動作

エッジツーエッジが有効なAndroid 15では、behavior="padding"を使用することが推奨されます。height動作は、キーボードが表示される際に利用可能な高さの計算が変化するため、レイアウトのジャンプを引き起こす可能性があります。padding動作は、より滑らかな遷移と予測可能な位置決めを提供します。

iOSとAndroidエッジツーエッジにおけるセーフエリアインセットの違い

iOSでは、iPhone X以降のノッチとホームインジケーター用にセーフエリアインセットが存在しています。Androidエッジツーエッジでは、インセットにはステータスバーの高さ、ナビゲーションバーの高さ、ジェスチャーインジケーター領域が含まれます。react-native-safe-area-contextライブラリは、useSafeAreaInsets()を通じてクロスプラットフォームのインセット値を提供します。

PressableのandroidRippleでPlatformColorをサポート

React Native 0.86は、android_rippleプロパティにPlatformColorのサポートを追加し、システムテーマ設定に応じた動的なリップルカラーを可能にしています。

ThemedButton.tsxtypescript

import React from 'react';
import { Pressable, Text, PlatformColor, Platform, StyleSheet } from 'react-native';

interface ThemedButtonProps {
  title: string;
  onPress: () => void;
}

export function ThemedButton({ title, onPress }: ThemedButtonProps) {
  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [
        styles.button,
        pressed && styles.pressed,
      ]}
      android_ripple={{
        // PlatformColor adapts to system theme automatically
        color: Platform.OS === 'android'
          ? PlatformColor('?attr/colorControlHighlight')
          : undefined,
        borderless: false,
        foreground: true,
      }}
    >
      <Text style={styles.text}>{title}</Text>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    padding: 16,
    backgroundColor: Platform.select({
      android: PlatformColor('?attr/colorPrimary'),
      default: '#007AFF',
    }),
    borderRadius: 8,
    alignItems: 'center',
  },
  pressed: { opacity: 0.8 },
  text: { color: '#FFFFFF', fontWeight: '600', fontSize: 16 },
});

?attr/colorControlHighlightを使用することで、リップルカラーがMaterial Designガイドラインに準拠し、システムレベルで設定されたライト/ダークテーマに適応することが保証されます。

Image.getSizeが正確な寸法を返すように改善

Image.getSizeおよびImage.getSizeWithHeadersメソッドは、ダウンサンプリングされた値ではなく、オリジナル画像の寸法を返すようになりました。この修正は、適切なアスペクト比計算とレスポンシブ画像レイアウトの実装に不可欠です。

ResponsiveImage.tsxtypescript

import React, { useState, useEffect } from 'react';
import { Image, View, useWindowDimensions, StyleSheet } from 'react-native';

interface ResponsiveImageProps {
  uri: string;
  maxHeight?: number;
}

export function ResponsiveImage({ uri, maxHeight = 400 }: ResponsiveImageProps) {
  const { width: screenWidth } = useWindowDimensions();
  const [dimensions, setDimensions] = useState({ width: screenWidth, height: 200 });

  useEffect(() => {
    // getSize now returns true source dimensions, not downsampled values
    Image.getSize(
      uri,
      (width, height) => {
        const aspectRatio = width / height;
        let calculatedHeight = screenWidth / aspectRatio;
        
        // Constrain to maxHeight while maintaining aspect ratio
        if (calculatedHeight > maxHeight) {
          calculatedHeight = maxHeight;
        }
        
        setDimensions({
          width: screenWidth,
          height: calculatedHeight,
        });
      },
      (error) => {
        console.error('Failed to get image size:', error);
      }
    );
  }, [uri, screenWidth, maxHeight]);

  return (
    <View style={styles.container}>
      <Image
        source={{ uri }}
        style={{ width: dimensions.width, height: dimensions.height }}
        resizeMode="cover"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { width: '100%' },
});

この修正により、ネイティブモジュールやサーバーサイドの画像処理を通じて画像寸法を取得する回避策が不要になりました。

大容量HTTPレスポンスのOutOfMemoryError回避

NetworkingModuleは以前、大容量のHTTPレスポンスを処理する際にOutOfMemoryErrorをスローしていました。バージョン0.86では、メモリ閾値を超えるレスポンスに対してチャンク処理を実装しています。

LargeFileDownload.tsxtypescript

import { useState, useCallback } from 'react';

interface DownloadProgress {
  loaded: number;
  total: number;
  percentage: number;
}

export function useLargeFileDownload() {
  const [progress, setProgress] = useState<DownloadProgress | null>(null);
  const [error, setError] = useState<string | null>(null);

  const downloadFile = useCallback(async (url: string): Promise<Blob | null> => {
    try {
      setError(null);
      setProgress({ loaded: 0, total: 0, percentage: 0 });

      const response = await fetch(url);
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
      }

      const contentLength = response.headers.get('Content-Length');
      const total = contentLength ? parseInt(contentLength, 10) : 0;

      // NetworkingModule now handles large responses without OutOfMemoryError
      const reader = response.body?.getReader();
      if (!reader) {
        throw new Error('Response body is not readable');
      }

      const chunks: Uint8Array[] = [];
      let loaded = 0;

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        
        chunks.push(value);
        loaded += value.length;
        
        setProgress({
          loaded,
          total,
          percentage: total > 0 ? Math.round((loaded / total) * 100) : 0,
        });
      }

      const blob = new Blob(chunks);
      setProgress({ loaded, total, percentage: 100 });
      return blob;
    } catch (err) {
      const message = err instanceof Error ? err.message : 'Download failed';
      setError(message);
      return null;
    }
  }, []);

  return { downloadFile, progress, error };
}

50MBを超えるファイルのダウンロードには、より良いメモリ管理のためにreact-native-blob-utilなどのネイティブファイル処理ライブラリの使用を検討してください。

WebSocketのCookieヘッダー修正

WebSocketコンストラクタを通じて渡されたCookieヘッダーが、サーバーに到達する前に削除されていました。これにより、WebSocket接続でのセッションベース認証が妨げられていました。

AuthenticatedWebSocket.tstypescript

type MessageHandler = (data: string) => void;
type ErrorHandler = (error: Event) => void;

interface WebSocketOptions {
  url: string;
  sessionCookie: string;
  onMessage: MessageHandler;
  onError?: ErrorHandler;
}

export function createAuthenticatedWebSocket({
  url,
  sessionCookie,
  onMessage,
  onError,
}: WebSocketOptions): WebSocket {
  // Cookie header now reaches the server correctly in 0.86
  const ws = new WebSocket(url, undefined, {
    headers: {
      Cookie: sessionCookie,
      // Additional headers as needed
      'X-Client-Version': '1.0.0',
    },
  });

  ws.onopen = () => {
    console.log('WebSocket connected with session cookie');
  };

  ws.onmessage = (event) => {
    if (typeof event.data === 'string') {
      onMessage(event.data);
    }
  };

  ws.onerror = (error) => {
    console.error('WebSocket error:', error);
    onError?.(error);
  };

  ws.onclose = (event) => {
    console.log(`WebSocket closed: ${event.code} ${event.reason}`);
  };

  return ws;
}

この修正は、Cookieベースのセッション管理とリアルタイム機能を併用するアプリケーションにとって重要です。React Nativeネットワーキング面接対策モジュールでは、WebSocket実装パターンを詳しく解説しています。

まとめ

React Native 0.86は、破壊的変更なしにAndroid 15向けの必須エッジツーエッジ修正を提供
measureInWindow、KeyboardAvoidingView、Dimensionsがエッジツーエッジ有効時に正しく動作
Modalコンポーネントが表示されている間もStatusBar更新が適用される
DevToolsのテーマエミュレーションがダークモード開発とテストを加速
android_rippleでのPlatformColorサポートにより、テーマ対応のタッチフィードバックを実現
Image.getSizeがレスポンシブレイアウト用に正確なオリジナル寸法を返す
大容量HTTPレスポンスがOutOfMemoryErrorを発生させなくなった
WebSocket Cookieヘッダーが期待通りにサーバーに到達

今すぐ練習を始めましょう！

面接シミュレーターと技術テストで知識をテストしましょう。

無料アカウントを作成

React Native 0.86完全ガイド2026: Android 15エッジツーエッジ対応とDevTools活用法