skip to content

After a React Native upgrade to 0.81 or later targets Android 16, what changes for edge-to-edge drawing and predictive back, and what do you verify?

level: seniorimportance: should knowfreq 33%

answer

  1. default target became API 36
  2. edge-to-edge mandatory, no opt-out
  3. edgeToEdgeEnabled Gradle property for older Android
  4. predictive back on by default
  5. onBackPressed overrides need migration

basics

~20 s

React Native 0.81 targets Android 16, which forces edge-to-edge drawing and turns on predictive back. Content now draws behind the system bars unless insets are applied, and BackHandler keeps working, but native onBackPressed() overrides may need migrating.

solid answer

~50 s

From 0.81, new React Native builds target Android 16 (API 36; 0.87 still targets 36). Android 16 requires edge-to-edge with no opt-out, so the app draws behind the status and navigation bars and every screen must apply safe-area insets itself. React Native added the `edgeToEdgeEnabled` Gradle property so older Android versions can be drawn edge-to-edge too, giving one layout model across devices, deprecated core `SafeAreaView` (it was iOS-only and incompatible with edge-to-edge) in favour of `react-native-safe-area-context`, and 0.86 fixed `measureInWindow`, `KeyboardAvoidingView` and `Dimensions` under edge-to-edge. Predictive back is on by default when targeting Android 16: `BackHandler` still works because `ReactActivity` forwards the system callback to JavaScript, but custom native code that overrides `onBackPressed()` may need migrating. Verify top and bottom insets on every screen, keyboard behaviour, and back through gesture and button on an Android 16 device.

code

bash · 5 lines
bash
# android/gradle.properties: draw edge-to-edge on Android versions below 16 as well
echo 'edgeToEdgeEnabled=true' >> android/gradle.properties

# find native back overrides that predictive back may bypass
grep -rn 'onBackPressed' android/app/src/main

go deeper

for a junior

Recall that newer React Native versions draw behind the Android system bars, so screens need safe-area insets, and that back still goes through BackHandler.

for a middle

Explain edge-to-edge, the edgeToEdgeEnabled property for older Android versions, the SafeAreaView deprecation and why BackHandler survives predictive back.

for a senior

Plan the upgrade: audit insets and keyboards per screen, find native onBackPressed overrides, test gesture and button back on Android 16 and an older version.

for a principal

Weigh adopting edge-to-edge everywhere now against staged rollout, and budget upgrade testing so platform behaviour changes are caught before users do.

## What the upgrade actually changes React Native **0.81** moved the default Android **target SDK to 36 (Android 16)**; 0.87 still targets 36. Targeting a new Android version opts the app into that version's behaviour changes, and two of Android 16's matter directly to React Native code: **mandatory edge-to-edge** and **predictive back by default**. Expo SDK 57 apps run React Native 0.86, so the same React Native behaviour applies to them. ## Edge-to-edge **Edge-to-edge** means the app's window extends behind the **status bar** at the top and the **navigation bar** (or gesture handle) at the bottom. The system bars become transparent overlays, and the app is responsible for keeping text and buttons out from under them. Android 16 requires this for apps that target it, **with no opt-out**. What React Native did about it: - **`edgeToEdgeEnabled` Gradle property.** Set in `android/gradle.properties`, it enables edge-to-edge on Android versions **below 16** as well, so every device uses the same layout model instead of old devices padding for the bars while new ones do not. - **Core `SafeAreaView` deprecated.** It only ever handled iOS and is not compatible with Android edge-to-edge. The recommended replacement is `react-native-safe-area-context`, whose insets work on both platforms. - **0.86 fixes.** React Native 0.86 shipped edge-to-edge fixes for Android 15+, including when the OS enforces edge-to-edge without the Gradle property: `measureInWindow` returns correct coordinates, `KeyboardAvoidingView` works, and `Dimensions` window values are accurate on versions before 15 when edge-to-edge is enabled. - **0.87 status bar props.** `StatusBar`'s deprecated `backgroundColor` and `translucent` props were removed, so code that painted or padded the status bar through them has to go. Typical regressions after the upgrade: a header whose title sits under the clock, a bottom button hidden behind the gesture bar, a sticky footer that jumps when the keyboard opens. ## Predictive back **Predictive back** lets the user start the back gesture and see a preview before committing. When an app targets Android 16 it is on by default, and Android no longer calls an activity's old `onBackPressed()` override the way it used to. React Native handles the common case for you: 1. On target SDK 36, `ReactActivity` registers an enabled back callback with Android's back dispatcher. 2. That callback calls React Native's `onBackPressed()`, which delivers `hardwareBackPress` to JavaScript. 3. `BackHandler` handlers run exactly as before — newest first, `true` consumes, nobody-true falls through to the default. The risk is **custom native back handling**: a `MainActivity` that overrides `onBackPressed()` to intercept back, or a native library doing the same. The 0.81 release notes say such code may need migrating to the new callback API, or a temporary opt-out, and ask teams to test back navigation thoroughly. ## The changes at a glance | Change | Since | What the app must do | | --- | --- | --- | | Default target Android 16 (API 36) | 0.81 | Expect Android 16 behaviour changes on every build | | Edge-to-edge mandatory on Android 16 | 0.81 target | Apply safe-area insets on every screen | | `edgeToEdgeEnabled` Gradle property | 0.81 | Optionally use one layout model on older Android | | Core `SafeAreaView` deprecated | 0.81 | Move to `react-native-safe-area-context` | | Predictive back on by default | 0.81 target | Review native `onBackPressed()` overrides | | Edge-to-edge measurement fixes | 0.86 | Upgrade before chasing measurement bugs | | `StatusBar` `backgroundColor`/`translucent` removed | 0.87 | Delete the props | ## A verification checklist 1. **Every screen, top and bottom**, on an Android 16 device or emulator and on an older one: nothing under the status bar, nothing under the gesture bar. 2. **Keyboards**: forms that scroll or use `KeyboardAvoidingView` still keep the focused input visible. 3. **Overlays**: modals, bottom sheets and toasts sit above the navigation bar. 4. **Back**, through **both** the gesture and the three-button navigation: every custom `BackHandler` flow — wizards, open panels, exit confirmations — still consumes or passes the press as intended. 5. **Native code**: search `android/` for `onBackPressed` overrides and native libraries that intercept back. 6. **Dead Android-only toggles**: remove code that no longer does anything, such as `UIManager.setLayoutAnimationEnabledExperimental(true)`. ## Why this is a senior question Nothing fails to compile. The regressions are visual or behavioural, appear only on some Android versions, and are split between JavaScript, native code and Gradle configuration. The expected answer names the platform change, what React Native did about it, and a test plan — not a single prop.

  • In React Native 0.87, why is UIManager.setLayoutAnimationEnabledExperimental(true) dead code on Android?
    The New Architecture is the only architecture since 0.82, and there the call is a no-op that only prints a development warning. LayoutAnimation is handled by the Fabric renderer's shared C++ code, so the old Android-only switch no longer gates anything and can be deleted.
  • Why does a React Native app's BackHandler keep working under predictive back when a custom onBackPressed() override may not?
    On target SDK 36, `ReactActivity` registers an enabled callback with Android's back dispatcher and routes it to React Native's back handling, which emits `hardwareBackPress` to JavaScript. An override of the old activity method sits outside that path, so it may no longer be called and needs migrating.
  • What does the edgeToEdgeEnabled Gradle property change in a React Native Android app?
    It enables edge-to-edge drawing on Android versions below 16, where it is not enforced. Every supported device then uses the same model — content behind transparent system bars, insets applied by the app — instead of two layouts to test.

saying these in an interview costs you the question

  • An app targeting Android 16 can opt out of edge-to-edge
  • Predictive back breaks every BackHandler listener
  • Core SafeAreaView handles Android insets under edge-to-edge
  • edgeToEdgeEnabled is needed to turn on edge-to-edge on Android 16
  • Target SDK changes only matter when publishing, not at runtime