using dynamic snapPoints there is a glitch in the bottom

[Piero87]

Hello again :D,
I'm trying to use dynamic snapPoints connected to a state, this is the code:

  constructor(props) {
    super(props);
    this.state = {
      snapPoints: [0, 310]
    };
  }

this is the Bottom Sheet component:

      <BottomSheet
        ref={this.bottomSheetRef}
        index={-1}
        snapPoints={this.state.snapPoints}
        backdropComponent={BottomSheetBackdrop}
      >
       ...
     </BottomSheet>

Then on the click you will see in the video attached I do this:

      this.setState({
        snapPoints: [0, 510]
      });

or this:

      this.setState({
        snapPoints: [0, 430]
      });

or this:

      this.setState({
        snapPoints: [0, 310]
      });

And when the BottomSheet move to [0, 310] snapPoints make a glitch on the bottom:

Registrazione.schermo.2021-01-06.alle.21.45.27.mov

I was afraid it was a fault of some of my components so I try a more clean and do the same:

Registrazione.schermo.2021-01-06.alle.21.47.38.mov

Library	Version
@gorhom/bottom-sheet	2.0.0
react-native	0.63.3
react-native-reanimated	1.13.2
react-native-gesture-handler	1.9.0

[gorhom]

try to set the backgroundComponent with bottom: -100

[Piero87]

@gorhom I have tried but I don't see any difference, can you give me an example?

[gorhom]

@Piero87 okay I'll prepare something later 👍

[Piero87]

thank you 🙏

[Piero87]

@gorhom have you closed because it's fixed?

[gorhom]

this should be resolved with 3.1.0 & 2.0.3 👍

[Piero87]

@gorhom Yes it's fixed, thank you.
I take this opportunity to ask you something else about the snapPoint field, I have a button in the bottom of the sheets, that have this styles:

  base: {
    position: 'absolute',
    bottom: 0,
    width: Dimensions.get('window'),
    height: 80,
  },

And this is where I insert it:

      <BottomSheet
        ref={this.bottomSheetRef}
        index={-1}
        snapPoints={snapPoints}
        onChange={this.onBottomSheetChange}
        backdropComponent={BottomSheetBackdrop}
>
<ButtonFullScreen />
</BottomSheet>

And when I change the snapPoints from the higher to the lowest value:

Registrazione.schermo.2021-01-12.alle.00.39.02.mov

As you can see goes up and then return in position, you know how can I fix this?

[iamnafri]

@gorhom Yes it's fixed, thank you. I take this opportunity to ask you something else about the snapPoint field, I have a button in the bottom of the sheets, that have this styles:

  base: {
    position: 'absolute',
    bottom: 0,
    width: Dimensions.get('window'),
    height: 80,
  },

And this is where I insert it:

      <BottomSheet
        ref={this.bottomSheetRef}
        index={-1}
        snapPoints={snapPoints}
        onChange={this.onBottomSheetChange}
        backdropComponent={BottomSheetBackdrop}
>
<ButtonFullScreen />
</BottomSheet>

And when I change the snapPoints from the higher to the lowest value:
Registrazione.schermo.2021-01-12.alle.00.39.02.mov

As you can see goes up and then return in position, you know how can I fix this?

@Piero87 did you find a solution regarding this?
I faced the same issue in v4.