Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bug using React Navigation, React Native Screens and KeyboardAvoidingView together.

See original GitHub issue

Description

Using React Navigation, React Native Screens, KeyboardAvoidingView and navigation.setOptions() results in weird glitches.

In our app we have screens that have 1 or more TextInputs. If the input is valid a submit button appears in the header. Thats why setOptions() is used. We also enabled React Native Screens (enableScreens()) as recommended in the docs. For making text input possible a KeyboardAvoidingView is used. We do this in the “standard” way. At least based on our search online on how other people use KeyboardAvoidingView and React Navigation. By wrapping the entire screen and using flex: 1.

All these things combined lead to a strange bug where the height of the views “collapse” and expand again. See the videos below.

Screenshots

See Expected and Actual behavior

Steps To Reproduce

See my reproduction Github repo and video’s.

Expected behavior

How it should look: https://streamable.com/en62cm

Actual behavior

Bug: https://streamable.com/2opla6

Snack or minimal code example

https://github.com/Guuz/react-native-screens-navigation-keyboard-bug

There are 2 things that seem to influence this. I’m not exactly sure why and what happens under the hood. But not using RNS (remove enableScreens()) causes this issue to go away. The other one is by not using setOptions().

Package versions

See reproduction repo.

"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"react": "16.13.1",
"react-native": "0.63.3",
"react-native-gesture-handler": "^1.9.0",
"react-native-screens": "^2.15.0"