appandflow / appandflow/react-native-safe-area-context
Edge-to-edge support
- Linguagem predominante
- TypeScript
- Estrelas
- 2.8k
- Forks
- 258
- Merge médio
- 3d 1h
- PRs com merge (30d)
- 2
Descrição
### 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
Guia de contribuição
Avaliação
Esta issue ainda não foi avaliada.