同时多个触摸响应器/动作

Question

I have 2 pairs of <View> inside <TouchableNativeFeedback> that act as 2 separate counters that trigger when touched, but I'm not able to touch them simultaneously.

class TouchBox extends Component {
  constructor(props) {
    super(props);
    this.state = {counter: 0}
  }

  render() {
    return (
      <TouchableNativeFeedback style={{flex: 1}} onPress={() => {this.setState({counter: this.state.counter + 1})}}>
        <View style={this.props.style}>
          <Text style={{fontSize: 75}}>{this.state.counter}</Text>
        </View>
      </TouchableNativeFeedback>
    );
  }
}

I tried doing:

<View style={this.props.style} onStartShouldSetResponder={() => {this.setState({counter: this.state.counter + 1}}>
          <Text style={{fontSize: 75}}>{this.state.counter}</Text>
</View>

but it didn't work.

My main component is:

class TouchTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchBox style={{backgroundColor: 'skyblue', width: 200, height: 100, alignItems: 'center'}}/>
        <Text>Test</Text>
        <TouchBox style={{backgroundColor: 'skyblue', width: 200, height: 100, alignItems: 'center'}}/>
      </View>
    );
  }
}

Edit: I would like to be able to touch both of the counters simultaneously and have them work. Right now if I touch one it becomes the only responder and blocks all other touches while my finger is pressed.

Answer 1

View which is outside the TouchableNativeFeedback needs to return true, like this:-

<View style={this.props.style} onStartShouldSetResponder={(e) => {this.setState({counter: this.state.counter + 1}) return true;}}>
          <Text style={{fontSize: 75}}>{this.state.counter}</Text>
</View>