appandflow / appandflow/react-native-safe-area-context

Edge-to-edge support

Aperta
#603 9 commenti 21 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
TypeScript
Stelle
2.8k
Fork
258
Merge medio
3g 1h
PR unite (30g)
2

Descrizione

### Description

👋 Hi there!

I'm working on supporting [edge-to-edge layout](https://developer.android.com/develop/ui/views/layout/edge-to-edge) across the entire React Native ecosystem, as it is [enforced on Android 15+](https://developer.android.com/about/versions/15/behavior-changes-15#edge-to-edge) when targeting SDK level 35 (introduced in [react native 0.77](https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0770)).

To prevent library authors from implementing their own edge-to-edge solutions—which could interfere with other libraries—and because it’s not possible to reliably detect if edge-to-edge is already enabled on Android, we collaborated with Expo to create a dedicated library: [react-native-edge-to-edge](https://github.com/zoontek/react-native-edge-to-edge). It can be detected using a simple helper: [react-native-is-edge-to-edge](https://github.com/zoontek/react-native-edge-to-edge/tree/main/react-native-is-edge-to-edge).

Since its release, we've added edge-to-edge support to several React Native libraries:

- react-native-keyboard-controller: [#660](https://github.com/kirillzyusko/react-native-keyboard-controller/pull/660) / [#765](https://github.com/kirillzyusko/react-native-keyboard-controller/pull/765)
- react-native-bootsplash: [6.2.0 release](https://github.com/zoontek/react-native-bootsplash/releases/tag/6.2.0)
- react-native-bottom-tabs: [#97](https://github.com/callstackincubator/react-native-bottom-tabs/issues/97) / [Docs](https://callstackincubator.github.io/react-native-bottom-tabs/docs/guides/edge-to-edge-support.html)
- react-native-true-sheet: [#103](https://github.com/lodev09/react-native-true-sheet/pull/103)
- react-native-unistyles: [Discussion #342](https://github.com/jpudysz/react-native-unistyles/discussions/342)
- expo-router: [#32854](https://github.com/expo/expo/pull/32854)
- expo-status-bar / expo-navigation-bar: [#34478](https://github.com/expo/expo/pull/34478)
- react-native-reanimated: [#6732](https://github.com/software-mansion/react-native-reanimated/pull/6732)
- react-native-avoid-softinput: [#219](https://github.com/mateusz1913/react-native-avoid-softinput/pull/219)
- react-native-screens: [#2464](https://github.com/software-mansion/react-native-screens/pull/2464) _(not merged yet)_
- galeria: [#18](https://github.com/nandorojo/galeria/pull/18)

It has also been integrated into apps like:

- Bluesky: [#7497](https://github.com/bluesky-social/social-app/pull/7497) _(not merged yet)_

### 🤔 Why this issue?

As it's difficult for me to test every React Native library under all possible configurations, I’m opening issues to raise awareness and invite you to try adding `react-native-edge-to-edge` to your example app to verify that everything works correctly on your end. If:

1️⃣ **Your library already supports edge-to-edge**
👉 Feel free to close this issue—sorry for the inconvenience!

2️⃣ **You'd like to add support**
👉 Refer to the documentation and the PRs linked above, and feel free to ask me **anything**!

### Steps to reproduce

1. Install [`react-native-edge-to-edge`](https://github.com/zoontek/react-native-edge-to-edge) in your example app.
2. Verify that everything works as expected and that no unexpected issues occur on your end.

### Snack or a link to a repository

https://github.com/zoontek/react-native-edge-to-edge

### Safe Area Context version

5.3.0

### React Native version

0.77.0

### Platforms

Android

### Architecture

None

### Build type

None

### Device

None

### Device model

_No response_

### Acknowledgements

Yes

Guida per i contributori

Apri la guida per i contributori

Valutazione

Questa issue non è ancora stata valutata.

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.