Implement Android edge-to-edge mode

[Julesssss]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

P/S was shared here by @kirillzyusko

Problem:

The android navigation bars (bottom and top) can have a different color than the background color of the app. This happens when the app theme switches (due to change in system appearance), or when the splashscreen hides.

Solution

Trying to fix the existing code with asynchronous updates is hard, as it's almost impossible to perfectly time the update from JS to the UI thread. A 100% reliable approach would be to enable edge-to-edge mode on Android. It'll brings several advantages, such as:

• such mode fully matches iOS behavior in terms of insets handling -> by default content will be drawn under system bars and if we want we can apply padding/fill the area with background color and do whatever we want. Since we'll have the same mode on both platforms it helps us to reduce code fragmentation, make code consistent and truly crossplatform.
• since insets handling will not work on Android anymore, it gives us a flexibility in terms of keyboard handling. By default Android handles keyboard appearance out of the box, but such keyboard handling is quite limited, it doesn't have smooth animations etc. When we get a control of keyboard management we can utilize cross-platform behavior.
• edge-to-edge mode is enabled by default on Android 15 (there is still a way to disable it if the app is not ready to edge-to-edge` mode), but in future Android versions this approach may be totally disabled: https://developer.android.com/about/versions/15/behavior-changes-15#edge-to-edge.
• Expo (starting from SDK 52) will turn on edge-to-edge mode by default: https://expo.dev/changelog/2024/10-24-sdk-52-beta#highlights;
• After Expo SDK 52 RN team will see how adoptation is going on and if they will see, that ecosystem and community is ready for this step they will enable edge-to-edge by default as well: Handling Android 15's edge-to-edge enforcement on React Native react-native-community/discussions-and-proposals#827.

Add any screenshot/video evidence

View all open jobs on GitHub

[kirillzyusko]

Kiryl from Margelo expert agency is here 👋

As discussed here I'd like to take care of that 🙌

[zoontek]

👋 I can do it. I'm the author of react-native-edge-to-edge, knows the subject perfectly.

EDIT: Oops, just saw @kirillzyusko response. Let me know if you need help.

[melvin-bot]

@Julesssss, @kirillzyusko Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@Julesssss, @kirillzyusko Whoops! This issue is 2 days overdue. Let's get this updated quick!

[kirillzyusko]

@MelvinBot not overdue, I'm planning to start working on it today 👀

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.