---
title: Edge-to-Edge display, now streamlined for Android
authors: Mathieu Acthernoene
published: November 26, 2024
categories: Development, Product
tags: edge to edge, keyboard management
---

_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:

## Mandatory Edge-to-Edge for Android 16

All apps targeting Android 16 and running on Android 16 no longer support the [opt-out of edge-to-edge property](https://developer.android.com/reference/android/R.attr#windowOptOutEdgeToEdgeEnforcement). 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](https://developer.android.com/about/versions/16/behavior-changes-16#edge-to-edge).

## Moving away from `react-native-edge-to-edge`

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.

## Introducing `enforceContrast` property

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+](https://developer.android.com/about/versions/15/behavior-changes-15#edge-to-edge).

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](https://bsky.app/profile/zoontek.me)), and together we worked on a library: [`react-native-edge-to-edge`](https://github.com/zoontek/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.

## New defaults

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](https://support.google.com/googleplay/android-developer/answer/11926878) for apps submitted to the Play Store.  Soon, all apps will need to support edge-to-edge.

## How to enable edge-to-edge in your app

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](https://docs.expo.dev/develop/development-builds/create-a-build/):

<!-- app.json -->
```diff
{
  "expo": {
    "android": {
+     "edgeToEdgeEnabled": true
    }
  }
}
```

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

## Important notes

- **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](https://developer.android.com/about/versions/15/behavior-changes-15#edge-to-edge) 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

## Update your dependencies

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`

## Additional edge-to-edge configuration options

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:

```json
{
  "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](https://github.com/zoontek/react-native-edge-to-edge?tab=readme-ov-file#expo).