[v4] | [v2] BottomSheet interferes with onLayout calculations of its child components

[indiaabbott]

Bug

Apologies in advance if this is intended behaviour.

In my project, I wish to dynamically calculate snap points based on the height of certain 'content sections' that are rendered in the Bottom Sheet. e.g.

const onButtonLayout = (e: LayoutChangeEvent) => {
    setButtonHeight(e.nativeEvent.layout.height)
  }

// inside a useEffect
setSnapPoints([buttonHeight, viewHeight])

<BottomSheet
      ref={bottomSheetRef}
      index={0}
      snapPoints={snapPoints}
    >
      <View onLayout={onLayout}>
        <Button onLayout={onButtonLayout} />
        <HiddenSection />
      </View>
    </BottomSheet>

The button height and view height are then used to create the snapPoints array.

Essentially I am trying to achieve something similar to what this issue requests: #1024, until v5 introduces this functionality! :)

However I noticed that wrapping my View in the BottomSheet seems to cause onLayout functions to be called multiple times with different increasing values, sometimes it eventually settles on the correct value but not always. I saw this from console logging inside the onLayout functions. This causes inconsistent UI due to the snapPoints being inconsistent / not getting the correct values.

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.1
react-native	0.71.14
react-native-reanimated	2.17.0
react-native-gesture-handler	2.13..4

Steps To Reproduce

1. Wrap component(s) in a BottomSheet,
2. pass supported components an onLayout prop,
3. console log to see it being called multiple times. You might see some janky UI as well.

Describe what you expected to happen:

1. onLayout is only called once, as seen when the components are not wrapped in BottomSheet

Reproducible sample code

See above

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[XantreDev]

You can use enableDynamicSizing for this purpose

[indiaabbott]

You can use enableDynamicSizing for this purpose

Thanks for your response, however in my experience enableDynamicSizing only calculates a snap point for the full length of content inside the sheet. I want to dynamically calculate an entire snap point array not just one point :)

[XantreDev]

onLayout will be called multiple times, I think it's expected, because you are changing the size of the modal after it renders.
You can try to combine dynamicSizing with your method, if your points will be less than full modal size