KeyboardAwareScrollView example causing some error related to view-flattened thrown by Reanimated

[idrakimuhamad]

Describe the bug

I took the example of the KeyboardAwareScrollView into my app, but recently I notice that its throwing a warning related to view-flattened on Android. On some extend, certain devices will crash when on released build.

The message are like the below:

[Reanimated] The view with tag 1005 gets view-flattened on Android. To disable view-flattening, set `collapsable={false}` on this component.

Repo for reproducing
https://github.com/idrakimuhamad/repro-tamagui

To Reproduce
Steps to reproduce the behaviour:

1. The first screen contained an input at the bottom and wrapped inside a KeyboardAwareScrollView. Try to focus on it and close.
2. Press the link "Go to bug screen"
3. This screen contained a scroll view with a bottom TextInput. This screen doesn't have any keyboard aware view wrapped.
4. Focus on the input and let the keyboard appear
5. Without closing the keyboard, press the back button
6. Once you're back at the previous screen, a warning will appear at the bottom.

On certain devices on release build, the app totally crash. I couldn't replicate with this sample app, but for me to be able to be certain that this is not the caused, I'd require to move over this first.

Expected behavior
No error or warning should be shown.

Screenshots

Smartphone (please complete the following information):

• RN version: 0.71.8
• RN architecture: paper
• Library version: 1.7.0

[devoren]

Same problem: in my case, when I go to another screen while the keyboard is visible, this warning appears.

[kirillzyusko]

Hi @idrakimuhamad @devoren 👋

Most likely need to specify collapsable={false} on TextInput that you are measuring. But it's just idea from my head 😅

I'll look into reproduction example, thanks!

[kirillzyusko]

Hi @idrakimuhamad @devoren

I think the issue was happening because the component (on screen B) was unmounted and you were trying to measure text input on screen A (and you were receiving this warning).

One possible approach (I haven't tried it yet) - you can add active property to KeyboardAwareScrollView and specify it as active={useIsFocused()}. And if active === false, then you don't need to make any calculations in useKeyboardHandler.

I also added new hook useReanimatedFocusedInput - you can try to use it as well. It does all calculation in native thread so it may solve this problem ;)

If the problem is not solved, then please tell me about it and I'll re-open this issue 🙌