[Fabric] ScrollView + autogrowing TextInput + Reanimated prevents TextInput autogrow

[kirillzyusko]

Description

A combination of ScrollView + autogrowing TextInput and reanimated prevents TextInput from a grow.

[!IMPORTANT] I provided a snack link, but it's not reproducible in snack, because I guess it's running old arch. The issue is reproducible in new arch only - I guess you can paste a code into your FabricExample app. But if it's not reproducible on your end - let me know and i'll prepare a repo.

Steps to reproduce

1. Click on any text input
2. Press enter button many times

Actual result:

TextInput is not growing

https://github.com/software-mansion/react-native-reanimated/assets/22820318/3207778c-abb0-4bfc-a1b8-6ed39da14a99

Expected result:

TextInput grows

https://github.com/software-mansion/react-native-reanimated/assets/22820318/8423e1f3-b36a-4434-ba77-ece44380bc51

Snack or a link to a repository

https://snack.expo.dev/@kirylziusko/rea-textinput-autogrow-issue

Reanimated version

3.6.1

React Native version

0.72.4

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

Real device, simulator

Device model

• Pixel 7 Pro (Android 14)
• Iphone 15 Pro (iOS 17.2, simulator)

Acknowledgements

Yes

[Latropos]

@tomekzaw I've tracked this error down and it looks that I've found its origin:

    // Even if only non-layout props are changed, we need to store the update in
    // PropsRegistry anyway so that React doesn't overwrite it in the next
    // render. Currently, only opacity and transform are treated in a special
    // way but backgroundColor, shadowOpacity etc. would get overwritten (see
    // `_propKeysManagedByAnimated_DO_NOT_USE_THIS_IS_BROKEN`).

Indeed if you remove code below this comment then you can use multiline text input as expected. Also if you change your reproduction code and change the animated style so that it doesn't contain animated transform or animated opacity the bug disappears.

https://github.com/software-mansion/react-native-reanimated/blob/4ad3a517d80f1680f9d9c8897f2211358bd142a6/Common/cpp/NativeModules/NativeReanimatedModule.cpp#L521

[Latropos]

@tomekzaw It seems that this bug is somehow a result of this approach: https://github.com/software-mansion/react-native-reanimated/pull/4075