Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Capture Current Index

See original GitHub issue

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.

Issue Analytics

State:
Created 4 years ago
Comments:5

Top GitHub Comments

8reactions

samfriendcommented, Apr 23, 2019

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>
    );

0reactions

chengsokdaracommented, Oct 16, 2020

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?