React-native-reanimated-bottom-sheet: Updating snapPoints props issues

[uhmarcel]

Hi everyone,

Is there a proper way to dynamically change snapPoints props?

I'm trying to switch snapPoints depending on the content I'm rendering on the drawer. I've had a lot of trouble. Currently I found that in order to change snapPoints, the new array has to be the same size of the previous one, otherwise you get an error "undefined 'val'". I found a workaround to this issue by filling up the new snapShots array with snaps of the same height to complete the previous size, which seems to work. However, I have another problem; once you switch snapPoints, the drawer always shows the largest snapPoint height with no option.

[ferrannp]

Been struggling with the same but it does not look there is a current implementation of this. So for example if you have:

snapPoints: [0, 200]

And at some point you decide to change for example the children you are rendering, you need more space and then change snapPoints to:

snapPoints: [0, 400]

Instead of animating from 200 to 400 it just jumps to 400. Not sure how complex would be to add this behavior though 🤔 .

[felippepuhle]

I was wondering if we can also handle different number of snapPoints, for example:

const snapPoints = someConditionHere ? [0, 100, 200] : [0, 200]

[uhmarcel]

I was wondering if we can also handle different number of snapPoints, for example:

const snapPoints = someConditionHere ? [0, 100, 200] : [0, 200]

Exactly. What I'm doing as a workarround is to do like:

const snapPoints = someConditionHere ? [0, 100, 200] : [0, 200, 200]

Even though is a sketchy/hacky solution, it seems to work fine.
Hope it helps anyone with similar requirements.

[BrtqKr]

Hi, thank you for digging into this issue. Unfortunately dynamic snapPoints are not yet supported, partially because of the way reanimated works, but there's one workaround. You can create dummy snapPoints (for example multiple starting points) and then use duplicates as dynamic ones. Unfortunately it doesn't solve the case when you want to generate more snapPoints than the amount of created duplicates, but this seems like a decent solution and it should work correctly.

[Monomachus]

@BrtqKr can you explain a little more, maybe with some code examples?
For example in my case I have initial snapPoints to this ['90%', '46%', '15%'], but if the keyboard appears (I have a TextInput inside the sheet) then I'd like to change top snapPoint to '60%' instead of '90%' for example.

Is something like that possible?

[Kinark]

Same issue here

[KristineTrona]

Also looking for the same feature. I want to render different sized content inside the bottom sheet, and some of it has text input, which would need to size it smaller depending on the keyboard height. Animation transitions between different snapPoints should be smooth.

[Saracevas]

Has anyone managed to find a solution to this issue yet?