React-native-screens: Bug using React Navigation, React Native Screens and KeyboardAvoidingView together.

[Guuz]

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"

[WoLewicki]

The actual behavior should show how it looks now and the expected one should show how it should look (I mean GIF links). I cannot reproduce it on my physical SE 2020 and on the 12 Pro Max simulator. The view doesn't jump. Does this issue happen only on the phones with a notch? And does it happen on the simulator too? Could you add your example to the
TestExample project to make sure we are having the same configuration?

[Guuz]

Whoops, i swapped the actual and expected video. Does it really need to be a GIF or are the streamable links fine?

I'll add an example in te TestExample and i'll ping when. Hope to do it today.
I'll also test older non-notch devices. Did not do that because i didn't think it would be related. But a good suggestion!

[WoLewicki]

Streamable links are fine, but they expire after some time, hopefully it won't be a problem here. Thanks

[Guuz]

@WoLewicki this baffles me...
https://github.com/Guuz/react-native-screens/blob/reproduction-keyboardavoidingview-bug/TestsExample/App.js
I forked the repo and changes App.js to be the exact same as that i have build here:
https://github.com/Guuz/react-native-screens-navigation-keyboard-bug/blob/main/App.tsx

The only difference is that i used TypeScript and that i depend on react-native-screens. Not sure how the TestExample imports the lib itself, since it's not in the package.json. Probably builds it from source?

But in the TestExample the bug does not occur, but it does in the example i created. Something must be different. I copy-pasted the code from one to the other.

Could it be caused by how react-native-screens is included in the TestExample project? Any other idea's?

I'm still convinced there is a bug somewhere. Since i'm getting this behaviour in my app and also by creating a completely new project and just adding 1 screen as i have done here (https://github.com/Guuz/react-native-screens-navigation-keyboard-bug). I just cant explain why the TestExample doesn't show the bug. But it could very well be related... 🤔

[WoLewicki]

Oh, it is very interesting. Most probably one of the latest commits introduces the change that resolves it, and in the repo's example, we are using the version from the newest master. Maybe this commit changed it: https://github.com/software-mansion/react-native-screens/commit/c528f83bd9f0ebedcc21af3be609535037bc0067 ? And yes, the files for the react-native-screens are taken from the source and put into project. I think I will release a new version today and you can check if the issue disappears there. I will ping you here after the release.

[WoLewicki]

@Guuz https://github.com/software-mansion/react-native-screens/releases/tag/2.16.0 :tada:

[Guuz]

@WoLewicki Updating to 2.16.0 fixes the issue! ❤️ Thanks so much for the assistance! 👍

[kevgrig]

Issue still happens with 2.16.1: https://github.com/software-mansion/react-native-screens/issues/749