multiple panresponder on screen managing different areas (in the same time)

Question

is there any way to use two Panresponder at the same time without their touches interfere each other?

I want to create an app where one can change the position of two quadrats at the same time in specific areas: the blue quadrat should be movable only in the blue area and the gray quadrat in the white area. (Image:here you see my app-screen) but the problem is that the touch-events interfere each other.

this is my code until now:

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Animated,
  PanResponder,
  Dimensions,
} from "react-native";

const phoneWidth = Dimensions.get("window").width;

export default function App() {
  const ball = useState(new Animated.ValueXY())[0];
  const panResponder = useState(
    new PanResponder.create({
      onStartShouldSetPanResponder: () => false,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: (_, gesture) => {
        ball.setOffset({
          x: ball.x._value,
          y: ball.y._value,
        });
      },
      onPanResponderMove: (_, gesture) => {
        console.log(gesture);
        if (gesture.moveY < 200) {
          ball.x.setValue(gesture.dx);
          ball.y.setValue(gesture.dy);
        }
      },
      onPanResponderRelease: () => {
        ball.flattenOffset();
        if (ball.y._value > 160) {
          ball.y.setValue(160);
        }
        if (ball.y._value < 0) {
          ball.y.setValue(0);
        }
        ball.flattenOffset();
        if (ball.x._value > phoneWidth - 50) {
          ball.x.setValue(phoneWidth - 50);
        }
        if (ball.x._value < 0) {
          ball.x.setValue(0);
        }
      },
    })
  )[0];

  const ball2 = useState(new Animated.ValueXY())[0];
  const panResponder2 = useState(
    new PanResponder.create({
      onStartShouldSetPanResponder: () => false,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: () => {
        ball2.setOffset({
          x: ball2.x._value,
          y: ball2.y._value,
        });
      },
      onPanResponderMove: (_, gesture) => {
        ball2.x.setValue(gesture.dx);
        ball2.y.setValue(gesture.dy);
      },
      onPanResponderRelease: () => {
        ball2.flattenOffset();
      },
    })
  )[0];

  return (
    <View style={styles.container}>
      <View style={styles.whitefield}>
        <Animated.View
          style={[styles.grayBall, ball.getLayout()]}
          {...panResponder.panHandlers}
        />
      </View>
      <View style={styles.bluefield}>
        <Animated.View
          style={[styles.blueball, ball2.getLayout()]}
          {...panResponder2.panHandlers}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  whitefield: {
    position: "absolute",
    top: 0,
    left: 0,
    height: 200,
    width: 400,
    backgroundColor: "white",
  },
  bluefield: {
    position: "absolute",
    top: Dimensions.get("window").height - 200,
    left: 0,
    height: 200,
    width: 400,
    backgroundColor: "lightskyblue",
  },
  container: {
    flex: 1,
    backgroundColor: "yellow",
    alignItems: "center",
    justifyContent: "center",
  },
  blueball: {
    width: 50,
    height: 50,
    backgroundColor: "blue",
  },
  grayBall: {
    width: 50,
    height: 50,
    backgroundColor: "grey",
  },
});

score 0 · Answer 1 · answered Apr 18 '21 at 05:50

This isnt a full answer but it was getting to be too much as a comment:

I cant figure out how to make the view's pan handlers to not bubble up ;( Since i cant prevent the handler from running from the second touch (that is from a different View). I guess I am going to attempt to create my own version of dx, dy, dx2, dy2 from within the handler being invoked. the big trick will be trying to use event.nativeEvent.touches which is the array of active touches on the screen called from in onPanResponderMove

onPanResponderMove: Animated.event(
        [
            null,
            { dx: this.pan2.x, dy: this.pan2.y }
        ],
        {
            useNativeDriver: false,
            listener: (event, gestureState) => {

                let touches = event.nativeEvent.touches;
                //do stuff here
            }
        }
)

multiple panresponder on screen managing different areas (in the same time)

1 Answers1