[Bug]: Dynamic sizing doesn't work when the inner content height is changed by animation in React Native New Architecture iOS

[cheolhow]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

iOS

What happened?

In React Native New Architecture iOS, Dynamic resizing does not work when inner content height changes by animation. snapPoints with enableDynamicSizing does not work as expected.
The snapPoints list doesn't seem to include dynamic content heights.
On Android it works as expected.

Reproduction steps

• Create <BottomSheetModal/> with enableDynamicSizing: true
• Create an animated component that can change the height of content

Reproduction sample

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

Relevant log output

No response

[Krupskis]

Same issue here, happens on stepped component, where each step has different height

[Krupskis]

@cheolhow by the way it's not the new architecture I think, if you downgrade to v4 it works.

[cheolhow]

@Krupskis

It is not clear whether “new architecture” has been applied in “expo snack”. However, in V5 before the "new architecture" (Expo 51), the code worked on Android and iOS. After applying "new architecture", it works on Android, but on iOS, there is a problem with height calculation when the height-changing animation implemented with "react-native-reanimated" is initially executed. I think that the change to “new architecture” caused a problem with dynamic calculations on iOS.

[EmilioAguilarRosenthal]

I'm seeing similar behavior. It seems that when animating the height of items inside the sheet (e.g., original height to zero/hidden), the change is not recorded internally for the Bottom Sheet. This is causing issues especially with keyboard handling. For example, when hiding components within the sheet on input focus, the components hide, and the keyboard appears, but the Bottom Sheet seems to think the hidden components are still visible. This is causing the sheet to extend to the outermost bounds of the range (emulating the fillParent behavior), leaving considerable dead space between the top of the keyboard and the bottommost bounds of the bottommost component(s) still visible in the sheet.

It would be helpful if there was a way to more directly control the sheet's positioning in these instances or otherwise inform the Bottom Sheet that the internal height has changed and to recalculate the snap points. I attempted to control this by passing a SharedValue of the contentHeight to the sheet, with the contentHeight being updated once the internal components heights have changed, but this has had no (apparent) impact on the dynamic snap point calculations within the sheet.

[cheolhow]

software-mansion/react-native-reanimated#6739

Since React Native New Architecture, there is an issue where the onLayout event does not detect all changes in the UI Thread of "react-native-reanimated".
It seems that "react-native-bottom-sheet" uses the onLayout event or its timing when dynamically determining the height.
The "Container View" that wraps the outer part of the "Accordion" component in the current example also does not have height information considering the inner Animated.View during the onLayout event.
Because of this, the enableDynamicHeight option of "react-native-bottom-sheet" calculates the height based only on the collapsed height, not the height when the Accordion is open.
To solve this, I fixed the height of the "Container View" to a fixed number when the height change animation ends.
This makes the enableDynamicHeight option of "react-native-bottom-sheet" work as expected.

It looks like we'll need to see how this issue is resolved in "react-native-reanimated" in the future, and also fix the behavior related to enableDynamicHeight.