SafeAreaProvider, safe-area hooks, and SafeAreaView edges/mode#57500
Draft
Abbondanzo wants to merge 1 commit into
Draft
SafeAreaProvider, safe-area hooks, and SafeAreaView edges/mode#57500Abbondanzo wants to merge 1 commit into
Abbondanzo wants to merge 1 commit into
Conversation
Summary: Brings React Native core's safe-area API to functional parity with `react-native-safe-area-context`. This change adds the shared JS API and shared C++ layout logic, and wires up the Android native implementation (iOS follows in a subsequent change). New public API (exported from `react-native`): - `SafeAreaProvider` — measures the window safe-area insets and frame and provides them via context. - `useSafeAreaInsets()` / `useSafeAreaFrame()` hooks, plus `SafeAreaInsetsContext` / `SafeAreaFrameContext`, `withSafeAreaInsets` HOC, and `SafeAreaListener`. - `initialWindowMetrics` for synchronously seeding insets/frame to avoid a first-frame jump. `SafeAreaView` gains `edges` (per-edge `off` / `additive` / `maximum`) and `mode` (`padding` | `margin`) props. The inset-to-padding/margin conversion lives in the shared C++ shadow node (`SafeAreaViewShadowNode::adjustLayoutWithState`) driven from the component descriptor's `adopt`, so iOS and Android share one implementation. On Android, `SafeAreaView` now reports insets into Fabric state without consuming them, so nested providers/views compute correctly, and a new native `SafeAreaProvider` component reports insets and frame to JS via an `onInsetsChange` event. This targets the new architecture (Fabric). Changelog: [Android][Added] - Add `SafeAreaProvider`, `useSafeAreaInsets`/`useSafeAreaFrame`, and `edges`/`mode` props on `SafeAreaView` Differential Revision: D111273335
meta-cla
Bot
added
the
CLA Signed
|
@Abbondanzo has exported this pull request. If you are a Meta employee, you can view the originating Diff in D111273335. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
Brings React Native core's safe-area API to functional parity with
react-native-safe-area-context. This change adds the shared JS API and shared C++ layout logic, and wires up the Android native implementation (iOS follows in a subsequent change).New public API (exported from
react-native):SafeAreaProvider— measures the window safe-area insets and frame and provides them via context.useSafeAreaInsets()/useSafeAreaFrame()hooks, plusSafeAreaInsetsContext/SafeAreaFrameContext,withSafeAreaInsetsHOC, andSafeAreaListener.initialWindowMetricsfor synchronously seeding insets/frame to avoid a first-frame jump.SafeAreaViewgainsedges(per-edgeoff/additive/maximum) andmode(padding|margin) props. The inset-to-padding/margin conversion lives in the shared C++ shadow node (SafeAreaViewShadowNode::adjustLayoutWithState) driven from the component descriptor'sadopt, so iOS and Android share one implementation. On Android,SafeAreaViewnow reports insets into Fabric state without consuming them, so nested providers/views compute correctly, and a new nativeSafeAreaProvidercomponent reports insets and frame to JS via anonInsetsChangeevent.This targets the new architecture (Fabric).
Changelog:
[Android][Added] - Add
SafeAreaProvider,useSafeAreaInsets/useSafeAreaFrame, andedges/modeprops onSafeAreaViewDifferential Revision: D111273335