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

gabrieldonadel · 2022-08-26T04:44:52Z

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 #31484
Closes #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

Screen.Recording.2022-08-26.at.01.32.17.mov

analysis-bot · 2022-08-26T05:08:36Z

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: df0b690
Branch: main

… is enabled

analysis-bot · 2022-08-26T12:32:39Z

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

Base commit: df0b690
Branch: main

facebook-github-bot · 2022-08-26T13:18:12Z

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

jacdebug · 2022-08-30T14:07:34Z

Libraries/Components/Keyboard/KeyboardAvoidingView.js

@@ -107,14 +120,14 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
    }
  };

-  _updateBottomIfNecessary = () => {
+  _updateBottomIfNecessary = async () => {


Call sites for function _updateBottomIfNecessary is not using await, as a side effect the function call this.props.onLayout(event) now won't wait for _updateBottomIfNecessary to finish.

As per the doc, This event is fired immediately once the layout has been calculated

Ohh good point, I added an await to the _updateBottomIfNecessary call to ensure everything is properly calculated before the this.props.onLayout function is called.

facebook-github-bot · 2022-08-31T13:27:45Z

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

react-native-bot · 2022-08-31T14:55:05Z

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

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

… is enabled (#34503) 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 #31484 Closes #29974 [iOS] [Fixed] - Fix KeyboardAvoidingView height when "Prefer Cross-Fade Transitions" is enabled Pull Request resolved: #34503 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 Reviewed By: jacdebug Differential Revision: D39055213 Pulled By: cipolleschi fbshipit-source-id: fac17cbe02867e0fe522397f6cb59a8b51c1840f

…sitions" is enabled (#34503)" This reverts commit ec0049b.

… is enabled (#34503) 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 #31484 Closes #29974 ## Changelog [iOS] [Fixed] - Fix KeyboardAvoidingView height when "Prefer Cross-Fade Transitions" is enabled Pull Request resolved: #34503 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 Reviewed By: jacdebug Differential Revision: D39055213 Pulled By: cipolleschi fbshipit-source-id: fac17cbe02867e0fe522397f6cb59a8b51c1840f

… is enabled (facebook#34503) 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 facebook#31484 Closes facebook#29974 ## Changelog [iOS] [Fixed] - Fix KeyboardAvoidingView height when "Prefer Cross-Fade Transitions" is enabled Pull Request resolved: facebook#34503 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 Reviewed By: jacdebug Differential Revision: D39055213 Pulled By: cipolleschi fbshipit-source-id: fac17cbe02867e0fe522397f6cb59a8b51c1840f # Conflicts: # Libraries/Components/Keyboard/KeyboardAvoidingView.js

…refer Cross-Fade Transitions is enabled (#35933) Summary: Similar to the issue here #34503 but this is also happening if we just use `ScrollView` and `TextInput` with `automaticallyAdjustKeyboardInsets` enabled. When we enable `Prefer Cross-Fade Transitions` in `iOS` we get a keyboard height of `0` which causes the inset/offset miscalculation and the content jumps up when the keyboard gets hidden. ## Changelog  [IOS] [FIXED] - Fix ScrollView `automaticallyAdjustKeyboardInsets` not resetting when Prefer Cross-Fade Transitions is enabled and keyboard hides Pull Request resolved: #35933 Test Plan: Tested with brand new react native project with/without the fix before fix `automaticallyAdjustKeyboardInsets` with enabled/disabled opening/closing keyboard https://user-images.githubusercontent.com/6507800/214039873-33bfb016-f99f-4644-9174-20bf32cf07d6.mov after fix `automaticallyAdjustKeyboardInsets` with enabled/disabled opening/closing keyboard https://user-images.githubusercontent.com/6507800/214039887-4054a749-ab15-4399-b6a9-73dc9283aa6b.mov Reviewed By: christophpurrer Differential Revision: D42686390 Pulled By: jacdebug fbshipit-source-id: 98488e0c9639c19a4acae1a1de1a5fde411e2462

…refer Cross-Fade Transitions is enabled (facebook#35933) Summary: Similar to the issue here facebook#34503 but this is also happening if we just use `ScrollView` and `TextInput` with `automaticallyAdjustKeyboardInsets` enabled. When we enable `Prefer Cross-Fade Transitions` in `iOS` we get a keyboard height of `0` which causes the inset/offset miscalculation and the content jumps up when the keyboard gets hidden. ## Changelog  [IOS] [FIXED] - Fix ScrollView `automaticallyAdjustKeyboardInsets` not resetting when Prefer Cross-Fade Transitions is enabled and keyboard hides Pull Request resolved: facebook#35933 Test Plan: Tested with brand new react native project with/without the fix before fix `automaticallyAdjustKeyboardInsets` with enabled/disabled opening/closing keyboard https://user-images.githubusercontent.com/6507800/214039873-33bfb016-f99f-4644-9174-20bf32cf07d6.mov after fix `automaticallyAdjustKeyboardInsets` with enabled/disabled opening/closing keyboard https://user-images.githubusercontent.com/6507800/214039887-4054a749-ab15-4399-b6a9-73dc9283aa6b.mov Reviewed By: christophpurrer Differential Revision: D42686390 Pulled By: jacdebug fbshipit-source-id: 98488e0c9639c19a4acae1a1de1a5fde411e2462

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Aug 26, 2022

react-native-bot added Bug Platform: iOS iOS applications. labels Aug 26, 2022

facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Aug 26, 2022

fix: KeyboardAvoidingView height when "Prefer Cross-Fade Transitions"…

d91e124

… is enabled

gabrieldonadel force-pushed the fix/keyboard-avoiding-view-cross-fade-transitions branch from 0fdab0f to d91e124 Compare August 26, 2022 12:09

jacdebug reviewed Aug 30, 2022

View reviewed changes

chore: Add await to _updateBottomIfNecessary call

d739d8c

gabrieldonadel requested a review from jacdebug August 30, 2022 22:33

jacdebug approved these changes Aug 31, 2022

View reviewed changes

facebook-github-bot closed this in 4b9382c Aug 31, 2022

react-native-bot added the Merged This PR has been merged. label Aug 31, 2022

gabrieldonadel deleted the fix/keyboard-avoiding-view-cross-fade-transitions branch August 31, 2022 14:55

kelset added a commit that referenced this pull request Oct 3, 2022

Revert "fix: KeyboardAvoidingView height when "Prefer Cross-Fade Tran…

9fd7643

…sitions" is enabled (#34503)" This reverts commit ec0049b.

snyk-bot mentioned this pull request Oct 11, 2022

[Snyk] Upgrade react-native from 0.63.3 to 0.70.1 NOUIY/react-native-macos#806

Open

NOUIY mentioned this pull request Oct 25, 2022

[Snyk] Upgrade react-native from 0.63.3 to 0.70.2 NOUIY/react-native-macos#857

Open

NOUIY mentioned this pull request Nov 3, 2022

[Snyk] Upgrade react-native from 0.63.3 to 0.70.3 NOUIY/react-native-macos#887

Open

NOUIY mentioned this pull request Nov 16, 2022

[Snyk] Upgrade react-native from 0.63.3 to 0.70.4 NOUIY/react-native-macos#917

Open

snyk-bot mentioned this pull request Nov 28, 2022

[Snyk] Upgrade react-native from 0.63.3 to 0.70.5 NOUIY/react-native-macos#924

Open

grgmo mentioned this pull request Jan 23, 2023

[iOS] Fix ScrollView automaticallyAdjustKeyboardInsets not resetting when Prefer Cross-Fade Transitions is enabled #35933

Closed

FeatherJiang mentioned this pull request Feb 22, 2023

[iOS]KeyboardAvoidingView When I turn on the reduced Motion, the page is blank #36100

Closed

cipolleschi mentioned this pull request Nov 1, 2023

[RN][CI]Update node installation on debian (0.70) #41278

Closed

cipolleschi mentioned this pull request Jan 8, 2024

[0.70][RN][General] Migrate boost download url away from JFrog #42178

Merged

joarkosberg mentioned this pull request Aug 22, 2024

useAnimatedKeyboard gives wrong values when prefersCrossFadeTransitions is turned on. software-mansion/react-native-reanimated#6440

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

gabrieldonadel commented Aug 26, 2022 •

edited

Loading

analysis-bot commented Aug 26, 2022 •

edited

Loading

analysis-bot commented Aug 26, 2022 •

edited

Loading

facebook-github-bot commented Aug 26, 2022

jacdebug Aug 30, 2022

gabrieldonadel Aug 30, 2022

facebook-github-bot commented Aug 31, 2022

react-native-bot commented Aug 31, 2022

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

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

Conversation

gabrieldonadel commented Aug 26, 2022 • edited Loading

Summary

Changelog

Test Plan

analysis-bot commented Aug 26, 2022 • edited Loading

analysis-bot commented Aug 26, 2022 • edited Loading

facebook-github-bot commented Aug 26, 2022

jacdebug Aug 30, 2022

Choose a reason for hiding this comment

gabrieldonadel Aug 30, 2022

Choose a reason for hiding this comment

facebook-github-bot commented Aug 31, 2022

react-native-bot commented Aug 31, 2022

gabrieldonadel commented Aug 26, 2022 •

edited

Loading

analysis-bot commented Aug 26, 2022 •

edited

Loading

analysis-bot commented Aug 26, 2022 •

edited

Loading