Updating sheet position after snapPoints change about react-native-reanimated-bottom-sheet

[njdancer]

As a workaround you can set the key to a value changes with the snapPoints. This will force a re-render.

For example:

const BottomSheetContainer = ({ snapPointHeight }) => {
  return (
    <BottomSheet
      key={snapPointHeight}
      renderContent={() => <BottomSheetContent />}
      renderHeader={() => <BottomSheetHeader />}
      snapPoints={[snapPointHeight, 400]}
    />
  )
}

[EricPKerr]

@osdnk is there a recommended way to do this? Seems like dynamic snapPoint support would be an awesome addition to this

[rvssvl]

@EricPKerr @osdnk In my project I don't know in advance the height of the content which is passed to BottomSheet's renderContent, is it possible to snap by percentage of the 'contentHeight' not the 'screenHeight'?

[Daavidaviid]

As a workaround you can set the key to a value changes with the snapPoints. This will force a re-render.

For example:

const BottomSheetContainer = ({ snapPointHeight }) => {
  return (
    <BottomSheet
      key={snapPointHeight}
      renderContent={() => <BottomSheetContent />}
      renderHeader={() => <BottomSheetHeader />}
      snapPoints={[snapPointHeight, 400]}
    />
  )
}

When I set the key, the app just freezes

[und3f1n3d]

I actually look forward to this update. My issue is when device orientation changes, let say i have snapPoinst is like this: ['70%', '45%, '25%']. When it was initialized at Portrait mode, snap points are correctly calculated. However, once rotate to landscape mode, you can see the snap points are no longer going to the right places even when i am not having a dynamic snapPoint and only using a static % values. When i said right places, means that the alignments are different between initialized at Portrait mode first and rotate vs. initialized at Landscape mode first and rotate. Because of this, the sheet often went overboard and I can't close it because I have a header as well. :(

So then i tried to solve it with dynamic snapPoints, yet, no luck. So I would appreciate if the next update has this fix. It's a great component so far! 👍