react-native icon indicating copy to clipboard operation
react-native copied to clipboard

fix: KeyboardAvoidingView height when "Prefer Cross-Fade Transitions" is enabled

Open gabrieldonadel opened this issue 1 year ago • 3 comments

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+

  1. Access Settings > "General" > "Accessibility" > "Reduce Motion", enable "Reduce Motion" then enable "Prefer Cross-Fade Transitions".
  2. Open the RNTester app and navigate to the KeyboardAvoidingView page
  3. Focus and blur inputs and observe the keyboard behaving correctly

https://user-images.githubusercontent.com/11707729/186822671-801872be-7db1-4c5c-904b-1987441c1326.mov

gabrieldonadel avatar Aug 26 '22 04:08 gabrieldonadel

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

analysis-bot avatar Aug 26 '22 05:08 analysis-bot

Platform Engine Arch Size (bytes) Diff
ios - universal n/a --

Base commit: df0b6900eca873417c867483b719e8e892a4b75d Branch: main

analysis-bot avatar Aug 26 '22 12:08 analysis-bot

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

facebook-github-bot avatar Aug 26 '22 13:08 facebook-github-bot

@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

facebook-github-bot avatar Aug 31 '22 13:08 facebook-github-bot

This pull request was successfully merged by @gabrieldonadel in 4b9382c250261aab89b271618f8b68083ba01785.

When will my fix make it into a release? | Upcoming Releases

react-native-bot avatar Aug 31 '22 14:08 react-native-bot