仅当我移动手指时才允许 Panresponder React Native

Question

I am very new to react native animations. I want to create sliding up panel, though there are many libraries for this, but I don't want to use these for self learning purpose.

The code I have written:-

constructor(props){
        super(props);
        this.animatedHeight = new Animated.Value(100);

        this.panresponder = PanResponder.create({
            onMoveShouldSetPanResponder:()=>true,
            onPanResponderMove:(e,gesture)=>{

                if( gesture.dy < 0 && gesture.vy < 0 )
                    this.animatedHeight.setValue(Math.abs(gesture.dy) + 100) // increasing the height. Original height + delta y
                else if(gesture.dy > 0 && gesture.vy > 0){
                     // code for decreasing the height
                }
            }
        })
    }


render(){
     return(
        <Animated.View  

            style={[styles.movableContainer,{height:this.animatedHeight}]}
            {...this.panresponder.panHandlers}
        ></Animated.View>
    )
}

const styles = StyleSheet.create({
    movableContainer:{
        bottom: 0,
        width:'100%',
        backgroundColor:'red',
        position:'absolute',
        zIndex:9999
    }
})

After releasing whenever I am putting my finger back to screen the panel shrinks. I want to shrink the panel when ever I am moving my finger

Answer 1

Try adding below code when create PanResponder

    onPanResponderGrant: (evt, gestureState) => {
        this.animatedHeight.setOffset(this.animatedHeight._value);
    }
    onPanResponderRelease: (e, { vx, vy }) => {
        this.animatedHeight.flattenOffset();
    }