How can I track the location of the BottomSheet on the Y-axis?

[priedejm]

I am trying to figure out how I can track the location of my bottom sheets location on the y-axis. I noticed the props animatedPosition and onChange and figured a combination of the two could do the trick. The issue is I cannot find any examples anywhere of animatedPosition being used.

Could someone point me in the right direction on how I can accomplish this?

Upon finding no examples, I tried what you see below. No luck on printing anything other than 0 though.

const App = () => {
  const snapPoints = [100, 200, 500];
  const [currentPosition, setCurrentPosition] = React.useState(0)
  

useEffect(() => {
  console.log(currentPosition)
}, []);

  return (
    <View style={styles.container}>

      <BottomSheet
        snapPoints={snapPoints}
        animatedPosition={currentPosition}
        index={0}>
        <View
          style={{
            width: '100%',
            height: '100%',
            backgroundColor: 'green',
          }}></View>
      </BottomSheet>
    </View>
  );
};

Thank you for any insight at all, I appreciate it more than you know.

[ahmetgsu]

@priedejm Instead of using a state for current position, you can do the following:

const animatedPosition = useSharedValue(0)

useSharedValue is imported from reanimated library.

and pass this constant to animatedPosition of BottomSheet component. Whenever the position of the BottomSheet changes, it will give you a different position. You can log animatedValue.value to see the BottomSheet location.

For example: Let's say we have 2 snapPoints [300, 850]

index === -1 animatedPosition.value will be 850 (it changes depending on the phone model)
index === 0 animatedPosition.value will be 550 (the first snapPoint)
index === 1 animatedPosition.value will be 0 (the second snapPoint - full screen)

[ThatGuySam]

Does this track the position if the users manually pans the sheet?