Below is the snippet for creating an instance of the panResponder
:
constructor( props ) { super( props ); this.position = new Animated.ValueXY(); this.panResponder = PanResponder.create( { onStartShouldSetPanResponder: ( ) => true, onPanResponderMove: ( event, gesture ) => { this.position.setValue( { x: 0, y: gesture.dy } ); }, onPanResponderRelease: ( event, gesture ) => { if ( gesture.dy > SWIPE_THRESHOLD ) { this.forceSwipe( 'up' ); } else if ( gesture.dy < -SWIPE_THRESHOLD ) { this.forceSwipe( 'down' ); } else { this.resetPosition(); } }, onMoveShouldSetPanResponderCapture: ( evt, gestureState ) => gestureState.dx !== 0 && gestureState.dy !== 0, } ); } getCardStyle() { return { ...this.position.getLayout(), }; }
Below is the code snippet of my Component:
<Animated.View key={ item.id } style={ [ this.getCardStyle(), styles.cardStyle ] } { ...this.panResponder.panHandlers }><Card shouldPanRespond={ this.shouldPanRespond } item={ item } /></Animated.View>
Code snippet for card component:
<TouchableOpacity activeOpacity={ 1 } style={ cardStyle } onPress={ this.onPress }><ScrollView contentContainerStyle={ cardStyle }><Image resizeMode="cover" style={ imageStyle } source={ { uri: img_url } } /><View style={ titleWrapStyle }><Text style={ textStyle }>{ title }</Text></View></ScrollView></TouchableOpacity>
I am building cards that are absolutely positioned one behind another. These cards can then be swiped up or down using the panResponder
. But, on tapping the screen I am supposed to show a detail page on the same screen.
Now, I can detect the tap, but whenever the user taps/clicks, I want to disable the panResponder
so that the card cannot be swiped and the user can scroll through the content. Once, the user scrolls to the end, I want re-enable swiping i.e I want to enable panning.
I know that onStartShouldSetResponder: () => false
disables panResponder
but how do we disable it after an instance is created. I couldn't find much about it else where.