Loading react-native-gesture-handler breaks KeyboardAvoidingView on iPadOS

[mhoran]

Description

After updating a project to React Native 0.76.0 and moving to New Arch I found that the KeyboardAvoidingView stopped working properly. Initially this was due to an issue in React Native, fixed in 0.76.1. However, the bug persists in my application, but not in the repro for the issue.

After digging further, I found there seems to be some interaction between KeyboardAvoidingView, react-native-gesture-handler and the react-native-reanimated Babel plugin.

The referenced repro shows this behavior. Opening in a simulator or device, rotating the screen will eventually show the keyboard either pushing up the main content with too much padding (simulator) or hiding the input text box completely (real device).

This behavior only seems to happen with both react-native-gesture-handler and the Reanimated Babel plugin loaded. If I remove react-native-gesture-handler from index.js, the issue does not reproduce. Same if I disable the Reanimated plugin, which is auto-loaded by babel-preset-expo.

Steps to reproduce

1. Launch the reproducer on an iPad with npm run ios
2. Focus the text input at the bottom
3. Rotate screen
4. Rotate screen again
5. Note that the text input is hidden by the keyboard

Snack or a link to a repository

https://github.com/mhoran/keyboard-avoiding-view-repro

Gesture Handler version

2.20.2

React Native version

0.76.1

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPad Air 13-inch (M2)

Acknowledgements

Yes

[mhoran]

I think this may be a bug with Expo, as it is only reproducible in an Expo project but not when using react-native directly. I've opened an issue.

[mhoran]

I've now isolated this to an issue with react-native-reanimated. It is not Expo specific.