CODEWITHSUNDEEP
reactjsreact-native
TMD
TMD

Reputation: 325

react native touch function can not response well

When a View cover another View, the TouchableOpacity can not response well.

When I press the View, it should alert message. But it can not response well, sometime it does not alert message.

This demo work well in simulator, just do not work well in device.

demo

Here is the full code : https://github.com/kk412027247/swipe_multiple_card

Need helps, many thanks.

export default class Card extends React.Component{
    translateX = new Animated.Value(0);
    _panResponder = PanResponder.create({
        onMoveShouldSetResponderCapture: () => Platform.OS === 'ios' ? 
        this.props.zIndex ===3 : this.props.zIndex === 1,
        onMoveShouldSetPanResponderCapture: () => Platform.OS === 'ios' ? 
        this.props.zIndex ===3 : this.props.zIndex === 1,
        onPanResponderMove: Animated.event([null,{dx: this.translateX}]),
        onPanResponderRelease: (e, {vx, dx}) => {
            const screenWidth = Dimensions.get("window").width;
            if (vx >= 0.5 || dx >= 0.5 * screenWidth) {
                this.props.forward();
                Animated.timing(this.translateX, {
                    toValue: 0,
                    duration: 200
                }).start();
            } else if(vx <= -0.5 || dx <= -0.5 * screenWidth){
                this.props.backward();
                Animated.timing(this.translateX, {
                    toValue: 0,
                    duration: 200
                }).start();
            } else {
                Animated.spring(this.translateX, {
                    toValue: 0,
                    bounciness: 10
                }).start();
            }
        }
    });


render(){
const {title,content, top, left, zIndex, elevation, backgroundColor,scale} = this.props;
const _style = [
  styles.container, {
    top,
    left,
    zIndex,
    elevation,
    backgroundColor,
    transform:[
      // {scale:scale},
      {translateX: this.translateX}
    ]
  }
];
return(

    <Animated.View
      style={_style}
      {...this._panResponder.panHandlers}
    >
      <TouchableOpacity
        style={styles.button}
        onPress={alert.bind(null, title)}
      >
        <Text style={styles.title}>{title}</Text>
        <Text>{content}</Text>
      </TouchableOpacity>

    </Animated.View>


    )
  }
}

Upvotes: 1

Views: 1356

Answers (1)

TMD
TMD

Reputation: 325

finally I find the answer myself. Because PanResponder capture the event, button can not respond the touch event. To fix this problem, if finger move is short, wen can ignore it. For example, we can ignore the action if the finger mover is less then 5px. Now button will respond the touch event.

onMoveShouldSetPanResponder:(evt, gestureState) => {
    const { moveX, moveY, dx, dy } = gestureState
    if( dx > 5 || dy > 5) {
        return true
    }else {
        return false
    }

}

Now button will respond the touch event.

I find the answer from here.

Upvotes: 2

Related Questions