react-native
react-native copied to clipboard
fix: KeyboardAvoidingView height when "Prefer Cross-Fade Transitions" is enabled
Summary
Fix KeyboardAvoidingView
height on iOS when "Prefer Cross-Fade Transitions" is enabled by adding an additional check to _relativeKeyboardHeight
verifying if prefersCrossFadeTransitions()
is true and keyboardFrame.screenY
is 0
and treating this special case. The issue was caused by the native RCTKeyboardObserver where the endFrame
reported by UIKeyboardWillChangeFrameNotification
returns height = 0
when Prefer Cross-Fade Transitions" is enabled
and unfortunelly there isn't much we can do on the native side to fix it.
Closes https://github.com/facebook/react-native/issues/31484 Closes https://github.com/facebook/react-native/issues/29974
Changelog
[iOS] [Fixed] - Fix KeyboardAvoidingView height when "Prefer Cross-Fade Transitions" is enabled
Test Plan
On iOS 14+
- Access Settings > "General" > "Accessibility" > "Reduce Motion", enable "Reduce Motion" then enable "Prefer Cross-Fade Transitions".
- Open the RNTester app and navigate to the KeyboardAvoidingView page
- Focus and blur inputs and observe the keyboard behaving correctly
https://user-images.githubusercontent.com/11707729/186822671-801872be-7db1-4c5c-904b-1987441c1326.mov
Platform | Engine | Arch | Size (bytes) | Diff |
---|---|---|---|---|
android | hermes | arm64-v8a | 7,618,232 | -16,250 |
android | hermes | armeabi-v7a | 7,032,488 | -13,914 |
android | hermes | x86 | 7,918,294 | -18,019 |
android | hermes | x86_64 | 7,891,912 | -16,263 |
android | jsc | arm64-v8a | 9,495,801 | -16,098 |
android | jsc | armeabi-v7a | 8,273,423 | -13,769 |
android | jsc | x86 | 9,433,588 | -17,881 |
android | jsc | x86_64 | 10,026,574 | -16,118 |
Base commit: df0b6900eca873417c867483b719e8e892a4b75d Branch: main
Platform | Engine | Arch | Size (bytes) | Diff |
---|---|---|---|---|
ios | - | universal | n/a | -- |
Base commit: df0b6900eca873417c867483b719e8e892a4b75d Branch: main
@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.
@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.
This pull request was successfully merged by @gabrieldonadel in 4b9382c250261aab89b271618f8b68083ba01785.
When will my fix make it into a release? | Upcoming Releases