Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16552

React Native: How to disable PanResponder temporarily?

$
0
0

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.


Viewing all articles
Browse latest Browse all 16552

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>