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

Edge-to-edge support

未關閉
#603 9 則留言 21 個 reaction 已指派 0 人 在 GitHub 檢視
主要語言
TypeScript
星號
2.8k
分支
258
平均合併
3 天 1 小時
30 天內合併 PR
2

描述

### 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

貢獻指南

開啟貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。