React-native-reanimated-bottom-sheet: callbackNode? - Callback on highest snap point - HOW TO?

Created on 12 Aug 2020 · 2Comments · Source: osdnk/react-native-reanimated-bottom-sheet

callbackNode - Reanimated node which holds position of bottom sheet, where 1 it the highest snap point and 0 is the lowest.

I've never worked with Animated:
How to create a function that will execute when bottom sheet is at highest snap point?

Thanks!

Source

sergey-king

Most helpful comment

15 min playing around. Here is the solution if anybody curious:

const onFullScreen = () => {
    console.log("I'll fire on full screen");
};

const callbackNode = useRef(new Animated.Value(0));
Animated.useCode(() => Animated.onChange(
    callbackNode.current,
    Animated.block([
        Animated.cond(
            Animated.eq(callbackNode.current, 0),
            Animated.call([], () => {
                onFullScreen && onFullScreen();
            })
        ),
    ])
), [onFullScreen]);

sergey-king on 12 Aug 2020

👍6

All 2 comments

15 min playing around. Here is the solution if anybody curious:

const onFullScreen = () => {
    console.log("I'll fire on full screen");
};

const callbackNode = useRef(new Animated.Value(0));
Animated.useCode(() => Animated.onChange(
    callbackNode.current,
    Animated.block([
        Animated.cond(
            Animated.eq(callbackNode.current, 0),
            Animated.call([], () => {
                onFullScreen && onFullScreen();
            })
        ),
    ])
), [onFullScreen]);

sergey-king on 12 Aug 2020

👍6

@sergey-king I'm finding your snippet to be much more reliable to use than the provided onCloseStart callbacks, thank you for sharing!

I think it would be helpful if the docs included instructions for how to use the callbackNode, headerPosition, and other reanimated props.

EDIT: Reading through the source now, I see that it shouldn't make too much of a difference so I must be using the onCloseStart callbacks incorrectly.