[zoontek]

Summary:

KeyboardAvoidingView follows the keyboard from JavaScript: it waits for a keyboard event, then animates its layout once with LayoutAnimation. The content does not move in sync with the keyboard, and interactive dismissal is not followed at all.

This PR adds an experimental_native prop, inspired by react-native-keyboard-controller. When it is set, a native view follows the keyboard frame by frame (UIKeyboardLayoutGuide on iOS, WindowInsetsAnimationCompat on Android) and sends the inset to the shared animation backend, which applies it to the layout.

Note that it requires the useSharedAnimatedBackend feature flag and an edge-to-edge app; otherwise, the JavaScript implementation (current) is used.

In following PRs, I plan to add keyboardWillShow and keyboardWillHide events, and possibly a translate-with-padding behavior and a KeyboardAwareScrollView component.

Changelog:

[GENERAL] [ADDED] - Add experimental_native prop to KeyboardAvoidingView to follow the keyboard animation natively

Test Plan:

Commands I ran, and their results:

• yarn flow-check: no error
• yarn build-types && yarn test-generated-typescript: passed
• yarn eslint --max-warnings 0 on changed JS files: clean
• yarn test packages/react-native/Libraries/Components/Keyboard: passed
• yarn format-check-kotlin and yarn format-check-javascript: passed
• yarn cxx-api-build: snapshots updated

Videos

Android

Android.mp4

iOS

iOS.mp4