Know which element was touched with React Native's PanResponder? - react-native

Question

Im making a drag and drop with the PanResponder but I only want part of a component to be the 'target' which initiates the drag. Many elements are contained within a ScrollView, and dragging on the elements outside of the 'target' should scroll as usual.
const Dragger = () => {
return (
<View {...panResponder.panHandlers}>
<View style={{ flexDirection: 'row' }}>
<Text>Drag me</Text>
<Text>Im not draggable</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Text>Drag me</Text>
<Text>Im not draggable</Text>
</View>
</View>
)
}
const Parent = () => {
return(
<ScrollView>
<Text>Stuff</Text>
<Dragger />
<Text>Stuff</Text>
<ScrollView/>
)
}
Can this be done or do I need to attach multiple panHandlers to each <Text>Drag me</Text>?
From the docs I see there is a nativeEvent.target which returns "The node id of the element receiving the touch event", however it's just a number so Im not sure how to use it?
Would I need to find out the node IDs of the <Text>Drag me</Text> elements and see if the number that came back is in that list?
UPDATE: Here is a more visual demo of what Im trying to do:
https://snack.expo.io/#jamesweblondon/rude-pretzel
I need PanResponder drag events on the grey boxes, but not on the text inputs:
import React from "react";
import { StyleSheet, Text, View, TextInput } from "react-native";
const items = new Array(50).fill(0).map((item, index) => {
return {
id: index,
backgroundColor: `rgb(${Math.floor(Math.random() * 255)}, ${
index * 5
}, ${132})`,
};
});
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
item: {
display: "flex",
flexDirection: "row",
height: 200,
width: "100%",
justifyContent: "space-around",
alignItems: "center",
},
input: {
color: "white",
fontSize: 20,
height: "100%",
flex: 1,
},
handle: {
display: "flex",
backgroundColor: "grey",
height: "80%",
width: 100,
marginHorizontal: 20,
},
});
export default function App() {
return (
<View style={styles.container}>
{items.map((item) => {
return (
<View
style={[styles.item, { backgroundColor: item.backgroundColor }]}
>
<View style={styles.handle} />
<TextInput style={styles.input} defaultValue={item.id} />
</View>
);
})}
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}

Answer 1

You started your question with some snippets that I couldn't find in the link you posted, so I started from that and created a fork.
So in order to get the PanResponder drag events on the grey boxes, but not on the text inputs you should do like this on your item component:
<View style={[styles.item, { backgroundColor: item.backgroundColor }]} >
<View style={styles.handle} {...panResponder.panHandlers} />
<TextInput style={styles.input}>{item.id}</TextInput>
</View>
For the PanResponder i used the default config from https://reactnative.dev/docs/panresponder#example
Here's an update on your code to try it.
Hope this helps! Tell me if this isn't working for you.