KeyboardAvoidingView collapses to 0 height on iOS14 when "Prefer Cross-Fade Transitions" is enabled

[svenlombaert]

This is a copy-paste from another issue that the OP closed without it being resolved.

Description

For users with Prefer Cross-Fade Transitions enabled in their Accessibility > Motion options on iOS 14 KeyboardAvoidingView will collapse to 0px in height when the keyboard hides (when an input is blurred).

The KeyboardAvoidingView behaves correctly when Prefer Cross-Fade Transitions is switched off.

The issue appears to be caused by incorrect endCoordinates coming back from the Keyboard.addListener('keyboardWillChangeFrame') listener in KeyboardAvoidingView as the values that come back differ significantly depending on the status of Prefer Cross-Fade Transitions.

This behaviour happens with behaviour set to height, padding and margin and doesn't appear to be an issue with the KeyboardAvoidingView directly but just the Keyboard events.

React Native version:

System:
    OS: macOS 11.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 34.64 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.14.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.11.2 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK:
      API Levels: 26, 27, 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.2
      System Images: android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_275 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.0 => 0.64.0
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. On a device with iOS 14
2. Enable Settings > Accessibility > Motion > Reduce Motion and Prefer Cross-Fade Transitions (will only show up after enabling Reduce Motion)
3. Use a KeyboardAvoidingView in an app and observe the behaviour when dismissing a keyboard by blurring a TextInput

Expected Results

The KeyboardAvoidingView should reset to its normal height.

Snack, code example, screenshot, or link to a repository:

See linked issue: #29974

[iliaskarim]

The bug can be repro'd with the KeyboardAvoidingView example:
https://user-images.githubusercontent.com/356623/117317703-c0810200-ae57-11eb-9822-7398ed9fbe4c.mov

[enahum]

This also seems to happen with an inverted FlatList when the keyboard closes.

[levibuzolic]

Apologies for closing the original issue, it was a mistake. I thought it had been resolved in React Native 0.64.x but I still had a workaround patch in place. It has been reopened.

I suspect the patch that @sterlingwes suggested still works: #29974 (comment)