How do I do tap-and-drag in a React Native table?

Question

I have a table, which is actually a just a bunch of styled View elements, in React Native that looks like the following:

I want to set it up so that users can tap their finger on any of the empty boxes and drag their finger around to highlight those boxes.

I've already set up something similar for the web version of the component using mousedown/mouseover/mouseup on desktop and touchstart/touchmove/touchend for mobile browsers, but I'm having trouble creating the same effect in React Native.

After doing some searching, I came across a thing called PanResponder (https://reactnative.dev/docs/panresponder), which I suspect if set up correctly will get what I'm after. However, the docs don't explain much about how the various pan handlers work.

Following the example in the docs, I wrote the following starter code:

const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: (evt, gestureState) => true,
    onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
    onMoveShouldSetPanResponder: (evt, gestureState) => true,
    onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

    onPanResponderGrant: (evt, gestureState) => {
        console.log('onPanResponderGrant gestureState');
        // console.log('onPanResponderGrant gestureState', gestureState);
    },

    onPanResponderMove: (evt, gestureState) => {
        console.log('onPanResponderMove gestureState');
        // console.log('onPanResponderMove gestureState', gestureState);
    },

    onPanResponderTerminationRequest: (evt, gestureState) => true,

    onPanResponderRelease: (evt, gestureState) => {
        console.log('onPanResponderRelease');
    },

    onPanResponderTerminate: (evt, gestureState) => {
        console.log('onPanResponderTerminate');
    },

    onShouldBlockNativeResponder: (evt, gestureState) => {
        return true;
    }
});

With that, I can get events to fire when I tap a specific box and move around within that box. However, as soon as I move my finger to the next box, the onPanResponderTerminate event fires, and I don't get any other events firing.

My questions are: Is PanResponder the right thing to use for the task I want to accomplish? If so, how do I need to change it to get what I want? If not, what should I use instead? Thank you.

score 0 · Answer 1 · answered May 11 '20 at 18:19

While the full answer involves a number of things, the basic problem I was running into was that I was attaching the PanResponder to every single empty box, where in fact what I needed to do was attach one PanResponder to the View element that contains all the other individual View element boxes.

Also, it's necessary to set onPanResponderTerminationRequest to false in order to avoid the onPanResponderTerminate event from firing, which was also causing problems.

By doing those two things, I was able to get started on what I want to achieve. In addition to all that though, I had to do stuff like conditionally set scrollEnabled on the ScrollView element to false, etc. to stop the screen from scrolling when tapping and dragging my finger across the table boxes.

Long story short, the above should get anyone else with the same problem started, but there's more to getting what I want to achieve done, but that was the initial hill I wasn't able to get over before. Thanks.

How do I do tap-and-drag in a React Native table?

1 Answers1