Edge-to-Edge display, now streamlined for Android

SDK 54 Update:

The release of SDK 54 introduces key updates to our edge-to-edge implementation. Here is everything you need to know to ensure a smooth upgrade for your application:

All apps targeting Android 16 and running on Android 16 no longer support the opt-out of edge-to-edge property. This means that all SDK 54 apps running on Android 16 will be running with edge-to-edge enabled, and our edgeToEdgeEnabled app.json/app.config.js property will have no effect. It will continue working for Android 15 and below, but we strongly encourage enabling edge-to-edge support in your app if you haven’t done so already.

You can read more about the changes here.

With SDK 54 Expo is transitioning away from using react-native-edge-to-edge library. Instead React-Native’s enableEdgeToEdge build.gradle property is used to toggle this feature. Because of this, react-native-edge-to-edge is no longer a dependency of the expo package.

This change is backwards compatible, and no action is required, unless your project is using the config plugin from react-native-edge-to-edge . If it does, you must ensure that the react-native-edge-to-edge package is listed as a direct dependency in your project.

We are introducing a new property in app.json / app.config.js : androidNavigationBar.enforceContrast. This property allows you to configure whether the navigation bar should be fully transparent or semi-opaque to ensure contrast with your app's content. It is equivalent to enforceNavigationBarContrast config-plugin option from react-native-edge-to-edge .

...

This is a guest post by Mathieu Acthernoene, a front-end and mobile developer based in Lille, France. He is the author of react-native-permissions, bootsplash, and localize, and enjoys giving public talks.

Last year, Google introduced a major change: apps targeting SDK 35 will have edge-to-edge display enforced by default on Android 15+.

Edge-to-edge display allows your app’s content to flow seamlessly beneath system bars, creating a more immersive experience. While this has always been the default on iOS, the same isn’t true on Android, which typically uses opaque status and navigation bars. As a result, developers have historically had to handle insets differently across platforms.

Expo reached out to me (zoontek), and together we worked on a library: react-native-edge-to-edge. This package enables edge-to-edge display on Android 6+ right from app launch, delivering a consistent experience across all users. The idea itself isn’t new — I previously released a similar library called react-native-bars, long before the Android 15 announcement, but this new library was built with the intention of supporting and encouraging a migration to edge-to-edge across the React Native ecosystem.

Projects created for Expo SDK 53 will have edge-to-edge enabled by default, and existing projects upgrading to SDK 53 can opt in by setting edgeToEdgeEnabled to true in app.json. A temporary opt-out exists, you can use it by setting enableEdgeToEdge to false in app.json (this sets R.attr#windowOptOutEdgeToEdgeEnforcement to true on the native project).

In the coming months, Google will be rolling out Android 16 (API level 36) —which will remove support for opting out of edge-to-edge. React Native and Expo keep up to date with the targetSdkVersion for Android, and Google regularly bumps the required target API level for apps submitted to the Play Store. Soon, all apps will need to support edge-to-edge.

With SDK 53, edge-to-edge display on Android is:

• Enabled by default in the Expo Go app, with no opt-out.
• Enabled by default in all new projects, with opt-out available outside of Expo Go.
• Disabled by default in all existing projects outside of Expo Go, with opt-in available and encouraged.

To enable it in existing projects, update your app.json config file and create a new build:

{
  "expo": {
    "android": {
+     "edgeToEdgeEnabled": true
    }
  }
}

Looking ahead, in SDK 54, edge-to-edge will be the default for both new and existing projects.

• Keyboard Management: This mode changes how Android handles keyboards. Like on iOS, you’ll need to use KeyboardAvoidingView or — ideally — react-native-keyboard-controller.
• Compatibility with Modals: React Native’s built-in Modal component runs in its own native context. To make it edge-to-edge, set both statusBarTranslucent and navigationBarTranslucent to true. However, we recommend using modals from react-navigation or modal screens from expo-router instead.
• Status bar and Navigation bar configuration: You can continue using expo-status-bar and expo-navigation-bar to control the appearance of the respective system UI, as they now use react-native-edge-to-edge SystemBars underneath — however, starting with Android 15 Google has started to deprecate most customisation features for StatusBar and NavigationBar components. Because of this, when using edge-to-edge only only a limited customization is supported:
  • For NavigationBar:
    • Setting the style of the NavigationBar with the setStyle method, which is mostly equivalent to existing setButtonStyleAsync
    • Setting the visibility with the setVisibilityAsync method
  • For StatusBar:
    • Setting the style of the StatusBar with the style property and setStatusBarStyle method.
    • Setting the visibility of the StatusBar with the hidden property and setStatusBarHidden method

In recent months, support has been added across the React Native ecosystem. Every package recommended in the Expo SDK will have the correct version installed if you run npx expo install --fix on an SDK 53 project. If you use any of the following libraries, make sure you're on the latest version:

• react-native-avoid-softinput
• react-native-bootsplash
• react-native-bottom-tabs
• react-native-keyboard-controller
• react-native-true-sheet
• react-native-unistyles (v3 beta)
• galeria

After you have enabled edge-to-edge in your app with the "edgeToEdgeEnabled" field, you can change the default settings using the react-native-edge-to-edge config plugin:

{
  "expo": {
    "plugins": [
      [
        "react-native-edge-to-edge",
        {
          "android": {
            "parentTheme": "Default",
            "enforceNavigationBarContrast": false
          }
        }
      ]
    ]
  }
}

In this configuration:

• parentTheme - specifies the base Android theme.
• enforceNavigationBarContrast - determines if the system should ensure sufficient contrast for navigation bar icons against its background (makes it semi-transparent).

For a complete overview of all available options, refer to the react-native-edge-to-edge README.