snapTo snapping to the wrong SnapPoint

osdnk / react-native-reanimated-bottom-sheet

Highly configurable bottom sheet component made with react-native-reanimated and react-native-gesture-handler

MIT License

3.33k stars 328 forks source link

snapTo snapping to the wrong SnapPoint #168

Open baijii opened 4 years ago

baijii commented 4 years ago

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}
    />
  )
}

I press the Top button -> snap to top
I press the Bottom button -> nothing happens
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 commented 4 years ago

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.