Edge-to-Edge on Android¶

Starting with SDK 54 (React Native 0.81, Android 16 / API 36), edge-to-edge display is always enabled on Android and cannot be disabled.

Timeline¶

SDK	Edge-to-Edge Status
53	Enabled by default for new Android projects
54	Always enabled (Android 16+). Cannot be disabled.
55	`edgeToEdgeEnabled` removed from app.json. Navigation bar APIs deprecated.

What Edge-to-Edge Means¶

The app draws behind the system bars (status bar and navigation bar). You must handle safe area insets to prevent content from being obscured by the system UI.

Migration Steps¶

1. Remove `react-native-edge-to-edge` if only used for `enforceNavigationBarContrast`¶

In SDK 54+, react-native-edge-to-edge is no longer bundled in the expo package. If you only used its config plugin for enforceNavigationBarContrast, use the new app.json field instead:

{
  "expo": {
    "androidNavigationBar": {
      "enforceContrast": true
    }
  }
}

If you still need the full package, make it a direct dependency: npx expo install react-native-edge-to-edge

2. Handle safe area insets¶

Use react-native-safe-area-context (which is already a standard dependency in most Expo apps):

import { SafeAreaView } from "react-native-safe-area-context";

function Screen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      {/* Content is protected from system bars */}
    </SafeAreaView>
  );
}

SDK 55+ Deprecations¶

Most expo-navigation-bar methods are deprecated and no-op: - setBackgroundColorAsync() — no effect - setBorderColorAsync() — no effect - setBehaviorAsync() — no effect - setPositionAsync() — no effect - setButtonStyleAsync() — no effect

expo-status-bar deprecations: - backgroundColor prop — no effect - translucent prop — no effect - networkActivityIndicatorVisible — no effect

Use config plugins instead of app.json¶

{
  "expo": {
    "plugins": [
      [
        "expo-navigation-bar",
        {
          "position": "absolute",
          "visibility": "hidden",
          "legacyVisible": "hidden"
        }
      ],
      [
        "expo-status-bar",
        {
          "style": "dark"
        }
      ]
    ]
  }
}

4. Remove deprecated app.json fields¶

In SDK 55+, remove these from app.json: - edgeToEdgeEnabled - androidNavigationBar (use config plugin) - androidStatusBar.backgroundColor (use config plugin) - androidStatusBar.translucent (use config plugin)

Predictive Back Gesture¶

Available as opt-in in SDK 54:

{
  "expo": {
    "android": {
      "predictiveBackGestureEnabled": true
    }
  }
}

Expected to become the default in SDK 55 or 56.

Troubleshooting¶

Content hidden behind status/navigation bar: ensure you use SafeAreaView or useSafeAreaInsets() from react-native-safe-area-context
Navigation bar color not changing: this is expected in edge-to-edge mode. The navigation bar is transparent.
Buttons hard to see on navigation bar: use enforceContrast option to add a scrim behind the gesture bar