Closed mhoran closed 1 week ago
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.
I've now isolated this to an issue with react-native-reanimated. It is not Expo specific.
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
npm run ios
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