React-native-reanimated-bottom-sheet: snapTo snapping to the wrong SnapPoint

[baijii]

I have a simple sheet component with 3 buttons:

export const SimpleSheet: React.FC = (): JSX.Element => {
  const bs = useRef<BottomSheet>(null)

  const renderContent = () => (
    <View style={styles.content}>
      <Button title="Top" onPress={() => { bs?.current?.snapTo(2) }} />
      <Button title="Center" onPress={() => { bs?.current?.snapTo(1) }} />
      <Button title="Bottom" onPress={() => { bs?.current?.snapTo(0) }} />
    </View>
  )

  return (
    <BottomSheet
      ref={bs}
      snapPoints={[125, '50%', '95%']}
      initialSnap={1}
      renderContent={renderContent}
    />
  )
}

1. I press the Top button
   -> snap to top

2. I press the Bottom button
   -> nothing happens

3. I press the Center button
   -> snap to bottom

It seems as the component is remembering the last snap point it is supposed to snap to and performs the action after the next snapTo.

happend on current npm version 1.0.0-alpha.18 on iOS

Thanks in advance

[baijii]

A dirty solution would be to perform snapTo twice:

export const SimpleSheet: React.FC = (): JSX.Element => {
  const bs = useRef<BottomSheet>(null)

  const snapTo = (snapPoint: number): void => {
    bs?.current?.snapTo(snapPoint)
    bs?.current?.snapTo(snapPoint)
  }

  const renderContent = () => (
    <View style={styles.content}>
      <Button title="Top" onPress={() => snapTo(2) } />
      <Button title="Center" onPress={() => snapTo(1)} />
      <Button title="Bottom" onPress={() => snapTo(0)} />
    </View>
  )

  return (
    <BottomSheet
      ref={bs}
      snapPoints={[125, '50%', '95%']}
      initialSnap={1}
      renderContent={renderContent}
    />
  )
}

It works, but it just doesn't seem right.

[philipposslicher]

Having the same issue with my app, the "hack" works, but would love a more proper solution.

[andreev-danila]

+1, same problem

[ChrisRowtcliff]

+1 same issue here within a functional component

[arsomjin]

Having the same issue after update from '1.0.0-alpha.14' to '1.0.0-alpha.18'.

[IngyuTae]

+1 same issue with 1.0.0-alpha.19

[kraffslol]

+1 Same issue here. Android with 1.0.0-alpha.19

[osamaaamer95]

+1

[AbdelkhalekESI]

+1

[AbdelkhalekESI]

downgrade version to '1.0.0-alpha.14' works for me !

[LaMemeBete]

+1

[RominHalltari]

downgrading to version to '1.0.0-alpha.14' doesn't work for me.

[terribleben]

Possibly fixed by https://github.com/osdnk/react-native-reanimated-bottom-sheet/pull/206 which was included in the recent release 1.0.0-alpha.20.

[MojtabaMahdian]

bs = React.createRef(null);

ref={this.bs}
snapPoints={[330, 0]}
borderRadius={10}
/>
i use with this keyword fixed

call ref like this : this.bs.current.snapTo(1);