[Bug]: renderFooter custom container Flickers When Using renderFooter with Multiline BottomSheetTextInput

[MaximeDemurger]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS, Android

What happened?

When using the renderFooter prop to include a BottomSheetTextInput with the multiline feature enabled, the send icon within the footer starts to flicker. This flickering occurs because the size of the BottomSheetTextInput changes dynamically as the user types, causing the footer's position to be recalculated repeatedly and leading to instability in the send icon's display.

Key Points:

1. Components Involved:

• renderFooter prop
• BottomSheetTextInput with multiline enabled
• Send icon within the footer

2. Issue Details:

• Enabling multiline allows the input field to expand as more lines are added.
• Dynamic size changes of the BottomSheetTextInput cause the footer to reposition frequently.
• The constant recalculations lead to the send icon flickering on the screen.

3. Impact:

• Poor user experience due to the unstable appearance of the send icon.
• Potential usability issues when users try to interact with the send icon during flickering.

Reproduction steps

• Use the renderFooter function to add a footer to your component.
• Design a container for BottomSheetTextInput that resembles Instagram's comment section.
• Insert a send icon (like a paper airplane) into the custom container.
• Add the multiline prop to the BottomSheetTextInput to allow multiple lines of text.
• Enter text with multiple lines and press the return key several times to ensure it works correctly.
• Adjust the footer position calculations to stop the send icon from flickering.

Reproduction sample

https://snack.expo.dev/@maximedemurger/bottom-sheet---issue-reproduction-template

Relevant log output

https://github.com/user-attachments/assets/f8bbe974-0290-4e7a-b617-605c163fba7d