React Native 0.86 brings comprehensive edge-to-edge support for Android 15+, making it the second consecutive release with zero breaking changes. Released in June 2026, this version addresses critical layout and measurement APIs that Android's mandatory edge-to-edge enforcement was silently breaking.

Zero Breaking Changes

React Native 0.86 maintains full backward compatibility with 0.85. The upgrade path requires no code modifications for most applications, making it one of the smoothest major version transitions in React Native history.

Understanding Edge-to-Edge on Android 15

Edge-to-edge layouts allow content to extend beneath system UI elements like the status bar and navigation bar. Android 15 enforces this behavior by default, regardless of app configuration. React Native 0.86 ensures all measurement and layout APIs work correctly under these conditions.

The measureInWindow function now returns accurate coordinates when edge-to-edge mode is active. Previously, measurements could be offset by the height of system UI elements, causing positioning bugs in overlays, tooltips, and floating action buttons.

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' },
});

The collapsable={false} prop ensures the View maintains a native reference for measurement. Without this, React Native may optimize away the native view, causing measureInWindow to fail.

KeyboardAvoidingView Fixes for Android 15

The KeyboardAvoidingView component calculates available space incorrectly when edge-to-edge mode is active. Version 0.86 fixes this by accounting for system UI insets in the available height calculation.

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 },
});

On Android 15, using behavior="height" often causes layout jumps. The padding behavior provides smoother animations and more predictable positioning with edge-to-edge enabled.

A persistent bug prevented StatusBar style and visibility changes while a Modal was open. React Native 0.86 resolves this, enabling dynamic status bar theming in modal flows.

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' },
});

This fix is particularly important for apps implementing dark mode toggles within modal flows, such as settings screens or image viewers.

Ready to ace your React Native interviews?

Practice with our interactive simulators, flashcards, and technical tests.

Explore React Native

DevTools Light and Dark Mode Emulation

React Native DevTools introduces Emulation.setEmulatedMedia support, enabling instant theme switching without device or emulator configuration changes. Access this feature through the Command Palette with Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux).

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;
}

The emulated media state resets when DevTools disconnects, ensuring production builds remain unaffected by development-time theme testing.

Interview Questions: React Native 0.86 and Edge-to-Edge

Technical interviews in 2026 increasingly focus on Android 15 compatibility and edge-to-edge implementation. Mastering these concepts demonstrates understanding of modern mobile development practices. For comprehensive interview preparation, explore the React Native debugging interview questions module.

What is edge-to-edge mode and why does Android 15 enforce it?

Edge-to-edge mode extends app content beneath system UI elements (status bar, navigation bar, gesture indicators). Android 15 enforces this behavior by default to provide immersive experiences and consistent UI across the platform. Apps must handle safe area insets to prevent content from being obscured by system UI.

How does measureInWindow behavior change with edge-to-edge enabled?

Prior to React Native 0.86, measureInWindow returned coordinates relative to the visible window, which excluded system UI areas. With edge-to-edge, the window extends to screen edges, but measurements were incorrectly offset. Version 0.86 ensures coordinates are accurate regardless of edge-to-edge state.

What is the recommended KeyboardAvoidingView behavior on Android 15?

Use behavior="padding" on Android 15 with edge-to-edge enabled. The height behavior can cause layout jumps because the available height calculation changes when the keyboard appears. The padding behavior provides smoother transitions and more predictable positioning.

How do safe area insets differ between iOS and Android edge-to-edge?

On iOS, safe area insets have existed since iPhone X for the notch and home indicator. On Android edge-to-edge, insets include status bar height, navigation bar height, and gesture indicator areas. The react-native-safe-area-context library provides cross-platform inset values through useSafeAreaInsets().

Pressable android_ripple with PlatformColor

React Native 0.86 adds PlatformColor support to the android_ripple prop, enabling dynamic ripple colors that respect system theme settings.

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 },
});

Using ?attr/colorControlHighlight ensures the ripple color matches Material Design guidelines and adapts to light/dark themes configured at the system level.

Image.getSize Returns Accurate Dimensions

The Image.getSize and Image.getSizeWithHeaders methods now return original image dimensions rather than downsampled values. This fix is essential for implementing proper aspect ratio calculations and responsive image layouts.

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%' },
});

This fix eliminates the need for workarounds that fetched image dimensions through native modules or server-side image processing.

Handling Large HTTP Responses Without OutOfMemoryError

The NetworkingModule previously threw OutOfMemoryError when handling large HTTP responses. Version 0.86 implements chunked processing for responses exceeding memory thresholds.

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 };
}

For file downloads exceeding 50MB, consider using react-native-blob-util or similar native file handling libraries for better memory management.

The Cookie header passed through the WebSocket constructor was being stripped before reaching the server. This prevented session-based authentication for WebSocket connections.

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;
}

This fix is critical for applications using cookie-based session management alongside real-time features. The React Native networking interview questions module covers WebSocket implementation patterns in depth.

Conclusion

React Native 0.86 delivers mandatory edge-to-edge fixes for Android 15 without breaking changes
measureInWindow, KeyboardAvoidingView, and Dimensions work correctly with edge-to-edge enabled
StatusBar updates now apply while Modal components are visible
DevTools theme emulation accelerates dark mode development and testing
PlatformColor support in android_ripple enables theme-aware touch feedback
Image.getSize returns accurate original dimensions for responsive layouts
Large HTTP responses no longer cause OutOfMemoryError
WebSocket Cookie headers reach the server as expected

Start practicing!

Test your knowledge with our interview simulators and technical tests.

Create my free account

React Native 0.86 in 2026: Edge-to-Edge Android, DevTools and Interview Questions

Understanding Edge-to-Edge on Android 15

KeyboardAvoidingView Fixes for Android 15

Ready to ace your React Native interviews?

DevTools Light and Dark Mode Emulation

Interview Questions: React Native 0.86 and Edge-to-Edge

What is edge-to-edge mode and why does Android 15 enforce it?

How does measureInWindow behavior change with edge-to-edge enabled?

What is the recommended KeyboardAvoidingView behavior on Android 15?

How do safe area insets differ between iOS and Android edge-to-edge?

Pressable android_ripple with PlatformColor

Image.getSize Returns Accurate Dimensions

Handling Large HTTP Responses Without OutOfMemoryError

Conclusion

Start practicing!

Related articles

React Native and TypeScript in 2026: Type-Safe Architecture and Interview Questions

Expo Router in React Native: File-Based Navigation Complete Guide

React Native New Architecture in 2026: Hermes V1, Bridgeless Mode and Interview Questions

Understanding Edge-to-Edge on Android 15

KeyboardAvoidingView Fixes for Android 15

StatusBar Updates During Modal Display

Ready to ace your React Native interviews?

DevTools Light and Dark Mode Emulation

Interview Questions: React Native 0.86 and Edge-to-Edge

What is edge-to-edge mode and why does Android 15 enforce it?

How does measureInWindow behavior change with edge-to-edge enabled?

What is the recommended KeyboardAvoidingView behavior on Android 15?

How do safe area insets differ between iOS and Android edge-to-edge?

Pressable android_ripple with PlatformColor

Image.getSize Returns Accurate Dimensions

Handling Large HTTP Responses Without OutOfMemoryError

WebSocket Cookie Header Fix

Conclusion

Start practicing!

Related articles

React Native and TypeScript in 2026: Type-Safe Architecture and Interview Questions

Expo Router in React Native: File-Based Navigation Complete Guide

React Native New Architecture in 2026: Hermes V1, Bridgeless Mode and Interview Questions