[Android] LayoutAnimation during Keyboard dismiss leads to empty space

[samiede]

Using LayoutAnimation in conjunction with dismissing the keyboard leads to a weird behaviour in which the app seems to try to show the keyboard layout wise without actually showing the keyboard, but only every other time.

React Native version:

Binaries:
Node: 12.9.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.10.3 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
Android SDK:
API Levels: 27, 28, 29
Build Tools: 27.0.3, 28.0.3, 29.0.0, 29.0.1, 29.0.2
System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64
Android NDK: 20.0.5594570
IDEs:
Xcode: /undefined - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.5 => 0.60.5

Steps To Reproduce

1. Use

LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'))

in a function that triggers the keyboard to be dismissed or use the hardware back button
2. Trigger layout change by e.g. changing screens

Describe what you expected to happen:

Layout animation is consumed.

Instead, something seems to trigger a layout change that still has the keyboard extended.

I found a GitHub issue form January of last year of someone having the same problem:
https://stackoverflow.com/questions/48503892/react-native-android-layoutanimation-keyboard-flatview-bug

[react-native-bot]

It looks like you are using an older version of React Native. Please update to the latest release, v0.61 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running `react-native info` on a project using the latest release.

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

[VictorioMolina]

Using LayoutAnimation in conjunction with dismissing the keyboard leads to a weird behaviour in which the app seems to try to show the keyboard layout wise without actually showing the keyboard, but only every other time.

React Native version:

Binaries:
Node: 12.9.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.10.3 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
Android SDK:
API Levels: 27, 28, 29
Build Tools: 27.0.3, 28.0.3, 29.0.0, 29.0.1, 29.0.2
System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64
Android NDK: 20.0.5594570
IDEs:
Xcode: /undefined - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.60.5 => 0.60.5

Steps To Reproduce

1. Use

LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'))

in a function that triggers the keyboard to be dismissed or use the hardware back button
2. Trigger layout change by e.g. changing screens

Describe what you expected to happen:

Layout animation is consumed.

Instead, something seems to trigger a layout change that still has the keyboard extended.

I found a GitHub issue form January of last year of someone having the same problem:
https://stackoverflow.com/questions/48503892/react-native-android-layoutanimation-keyboard-flatview-bug

Having the same problem did you fix it?

[VictorioMolina]

Exactly the same problem

[samiede]

I ended up not using Layout Animations, unfortunately :/

[bberak]

Hey @samiede and @VictorioMolina,

I'm having the same issue unfortunately.. Would hate to disable LayoutAnimation entirely because the UI seems so static without it :(

Did you have any luck with this problem in he last few months?

[bberak]

Hey @samiede and @VictorioMolina,

I never found the root cause of the problem, but what solved it for me was enabling react-native-screens

Run:

# bare React Native project
npm install react-native-screens

# if you use Expo managed workflow
expo install react-native-screens

Then place the following code at the top of your root file before rendering any screens:

import { enableScreens } from "react-native-screens";

enableScreens();

Note: I am using Expo SDK 38, so I'm not sure if this fix is applicable in non-Expo environments. Here is a link to the Expo docs