How do I enable touch on multiple buttons simultaneously in react native?

Question

I need that when I am touching and holding one button then I should also be able to touch on the button 1.

Answer 1

This is my solution for multiple buttons

import React, { Component } from 'react';
import {
    View,
    PanResponder,
} from 'react-native';
import ReactNativeComponentTree from'react-native/Libraries/Renderer/shims/ReactNativeComponentTree';

export default class MultiTouch extends Component{
    constructor(props) {
        super(props);

        this.onTouchStart = this.onTouchStart.bind(this);
        this.onTouchEnd = this.onTouchEnd.bind(this);
        this.onTouchCancel = this.onTouchCancel.bind(this);

        this.triggerEvent = this.triggerEvent.bind(this);
    }
    onTouchStart(event){
        const element = ReactNativeComponentTree.getInstanceFromNode(event.target)._currentElement;
        this.triggerEvent(element._owner, 'onPressIn');
    }
    onTouchEnd(event){
        const element = ReactNativeComponentTree.getInstanceFromNode(event.target)._currentElement;
        this.triggerEvent(element._owner, 'onPressOut');
    }
    onTouchCancel(event){
        const element = ReactNativeComponentTree.getInstanceFromNode(event.target)._currentElement;
        this.triggerEvent(element._owner, 'onPressOut');
    }
    onTouchMove(event){
       // console.log(event);
    }
    triggerEvent(owner, event){ // Searching down the 
        if(!owner || !owner.hasOwnProperty('_instance')){
            return;
        }
        if(owner._instance.hasOwnProperty(event)){
            owner._instance[event]();
        }else{
            this.triggerEvent(owner._currentElement._owner, event);
        }
    }
    render(){
        return (
            
                {this.props.children}
            
        );
    }
}

Then I simply wrap the buttons that needs to be pressed at the same time withe the component

Cheers!

UPDATE

Because of breaking changes in native react v.0.51, my previous solution does not work any more. But I manage to create a new one. Instead of using TouchableWithoutFeedback and onPress I use View and onTouch on each button that should have multitouch.

import React, { Component } from 'react';
import {
    View,
} from 'react-native';
export default class RoundButtonPart extends Component{
    constructor(props) {
        super(props);

        this.state = { active: false };

        this.onTouchStart = this.onTouchStart.bind(this);
        this.onTouchEnd = this.onTouchEnd.bind(this);
        this.onTouchCancel = this.onTouchCancel.bind(this);
    }

    onTouchStart(event){
        this.setState({ active: true });
        this.props.onPressIn && this.props.onPressIn();
    }
    onTouchEnd(event){
        this.setState({ active: false });
        this.props.onPressOut && this.props.onPressOut();
    }
    onTouchCancel(event){
        this.setState({ active: false });
        this.props.onPressOut && this.props.onPressOut();
    }
    onTouchMove(event){

    }
    render(){
        return (
            

                 {this.props.children}
            
        );
    }
}