I'm developing an app which requires handling of simultaneous touches(usually 2 or 3 at most). So that the user can have multiple buttons pressed at the same time. The problem's that on Android when the user presses one of the buttons(not necessary RN's <Button>), they cannot press the others as long as the first button is hold. First I had tried RN's <Pressable>, to receive both PressIn and PressOut events, in a way like this:
const Key = ({label, ...}): Node => {
const [hold, setHold] = useState(false);
return (
<Pressable
onPressIn={...}
onPressOut={...}
style={hold ? styles.keyHold : styles.keyUnhold}
>
<Text>{label}</Text>
</Pressable>
);
};
const Keyboard = ({...}): Node => {
//...
return (
<FlatList
data={data}
renderItem={({item}) => {
const {label, name} = item;
return <Key title={label} ... />;
}}
/>
);
};
And it had the said problem. Afterwards I had found many answers on StackOverflow(React Native - onTouchStart vs PanResponder for multiple touches per second How do I enable touch on multiple buttons simultaneously in react native? How to detect simultaneous onPress events in react native?) and I tried onTouchStart/onTouchEnd and <View> replacing <Pressable> and onPressIn/onPressOut. The problem remains except that when holding a button(constructed using <View>) and trying to press another one, the first one is released and any touch on the screen will trigger the first one(which is still physically hold).
Many answers and comments on the posted questions suggest using PanResponder but by ducking I cannot find any example of achieving something like what I want using PanResponder.
So the question is that: How to achieve this in RN? Should I use PanResponder? If yes, an example on how to do that can really be helpful for me. Or perhaps there are other ways of achieving this of which I'm unaware?
(I'm using RN 0.66 on a real Android device running 7.1)
