CODEWITHSUNDEEP
react-native
SinunHenkka
SinunHenkka

Reputation: 565

How to cancel TouchableOpacity responder when touch is dragging instead of pressing?

I am trying to implement my own react-native swiper component but the swiper stops working immediately when TouchableOpacity is added inside the Animated.View. I think the Touchable will become the responder and my own panResponder will not work. (You can see the Opacity of the pressing)

The problem is that I want the touchable to work, but if the touch to the screen is not one tap but dragging then I want the swiper to work. (This behavior is working when using scrollView with Touchables)

Here: Make TouchableOpacity not highlight element when starting to scroll [React Native] is said that: "A scroll gesture should cancel the TouchableOpacity touch responder" But how this is done?

For testing purposes I have tried to capture the responder to my Animated.View with this:

onStartShouldSetResponderCapture: () => true,

But it seems to have no effect (I was expecting that with this the swiping would work but the touchable not).

Here is the sample code (If you change the TouchableOpacity to View the swiping is working):

import React, { Component } from 'react';
import { View, Animated, PanResponder, Dimensions, TouchableOpacity, Text } from 'react-native';

class App extends Component {

  componentWillMount() {
    const position = new Animated.ValueXY();
    const panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: (event, gesture) => {
        position.setValue({ x: gesture.dx, y: 0 })
      },
      onPanResponderRelease: (event, gesture) => {
          Animated.spring(this.state.position, {
                toValue: { x: 0, y: 0 }
              }).start();
      }
    });
    this.state = { panResponder, position };
  }

  render() {
    return (
          <Animated.View style={[this.state.position.getLayout(), styles.viewStyle]} {...this.state.panResponder.panHandlers}>
              <TouchableOpacity style={styles.touchableStyle}>
                     <Text>Swipe not working</Text>
              </TouchableOpacity>
          </Animated.View>
    );
  }
}

const styles = {
  viewStyle: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    width: Dimensions.get('window').width
  },
  touchableStyle: {
    backgroundColor: '#ddd',
    height: 100,
    borderWidth: 5,
    borderColor: '#000',
    justifyContent: 'center',
    alignItems: 'center'
  }
};

export default App;

Please help me, if you have solution. I have trying to get this to work for some time now.

Upvotes: 5

Views: 5570

Answers (1)

SinunHenkka
SinunHenkka

Reputation: 565

It managed to resolve the problem:

onStartShouldSetPanResponder: () => true

Had to be replaced with:

onMoveShouldSetPanResponder: () => true

There is still the same problem with opacity hihglighting but that is not so big problem. Make TouchableOpacity not highlight element when starting to scroll [React Native]

Upvotes: 1

Related Questions