React-native-reanimated-bottom-sheet: Capture Current Index

[obetomuniz]

On reach a specific index of the Bottom Sheet snapPoints, I need to fire an event in my application, how can I do it? Looks like that currently there is no way to control events or the bottom sheet position with the library.

[samfriend]

Use the callbackNode

[obetomuniz]

Hi @samfriend, thanks for your reply. Can you give me an example of usage? It's not clear how to use this feature.

[samfriend]

my code in detecting the current state of the bottomsheet. I only have 2 snap points, Full height and zero height, so the % should be 1 and 0.

Be careful tho if you have snap points [100%,30%,0], the call back sometimes will NOT be exactly 30% e.g. 29.999999 ....

bottomSheetCallback = ([value]) => {
    //1 is closed, 0 is opened
    if (value === 1) {
       //closed
    }
    if (value === 0) {
      //opened
    }
}

render() {
    return (
        <View style={{position: 'absolute', bottom: 0, left: 0, height: containerHeight, width: containerWidth}} pointerEvents={'box-none'}>
            <BottomSheet
                ref={ref => this.bottomSheet = ref}
                snapPoints={[COMMONS.DEVICE_HEIGHT, 0]}
                initialSnap={1}
                callbackNode={this.value_fall}
                renderHeader={this.renderHeader}
            />
            <Animated.Code
                exec={
                    block([
                        cond(eq(this.value_fall, 0), call([this.value_fall], this.bottomSheetCallback)),
                        cond(eq(this.value_fall, 1), call([this.value_fall], this.bottomSheetCallback)),
                        // Animated.call([this.value_fall], this.logNativeValue ),        // 1 close -> 0 when open
                        set(this.value_backdrop, sub(1, this.value_fall)),                //backdrop opacity, 1 - %
                    ])

                }/>
            {/*Overlay shadow*/}
            {this.props.store.NavigationStore.isApplicationCameraVisible ? (
                <Animated.View style={{
                    position: 'absolute', top: 0, bottom: 0, left: 0, right: 0,
                    opacity: this.value_backdrop,
                    backgroundColor: '#000'
                }}
                   pointerEvents={'none'}
                />
            ) : null}

        </View>
    );

[obetomuniz]

Hmmm so in this case, I need to add react-native-reanimated as a direct dependency, right? That is what I was trying to avoid, anyway, looks like necessary. Thanks for the explanation and clear example.

[chengsokdara]

my code in detecting the current state of the bottomsheet. I only have 2 snap points, Full height and zero height, so the % should be 1 and 0.

Be careful tho if you have snap points [100%,30%,0], the call back sometimes will NOT be exactly 30% e.g. 29.999999 ....

bottomSheetCallback = ([value]) => {
    //1 is closed, 0 is opened
    if (value === 1) {
       //closed
    }
    if (value === 0) {
      //opened
    }
}

render() {
    return (
        <View style={{position: 'absolute', bottom: 0, left: 0, height: containerHeight, width: containerWidth}} pointerEvents={'box-none'}>
            <BottomSheet
                ref={ref => this.bottomSheet = ref}
                snapPoints={[COMMONS.DEVICE_HEIGHT, 0]}
                initialSnap={1}
                callbackNode={this.value_fall}
                renderHeader={this.renderHeader}
            />
            <Animated.Code
                exec={
                    block([
                        cond(eq(this.value_fall, 0), call([this.value_fall], this.bottomSheetCallback)),
                        cond(eq(this.value_fall, 1), call([this.value_fall], this.bottomSheetCallback)),
                        // Animated.call([this.value_fall], this.logNativeValue ),        // 1 close -> 0 when open
                        set(this.value_backdrop, sub(1, this.value_fall)),                //backdrop opacity, 1 - %
                    ])

                }/>
            {/*Overlay shadow*/}
            {this.props.store.NavigationStore.isApplicationCameraVisible ? (
                <Animated.View style={{
                    position: 'absolute', top: 0, bottom: 0, left: 0, right: 0,
                    opacity: this.value_backdrop,
                    backgroundColor: '#000'
                }}
                   pointerEvents={'none'}
                />
            ) : null}

        </View>
    );

Is it possible to get index when there are more than 2 snapPoints?