Одновременное реагирование на срабатывание нескольких нажатий

Question

У меня есть две пары <View> внутри <TouchableNativeFeedback>, которые действуют как два отдельных счетчика, которые срабатывают при касании, но я не могу их одновременно коснуться.

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> 
    ); 
    } 
} 

Я попытался сделать:

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

, но это не сработало.

Мой главный компонент:

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: Я хотел бы быть в состоянии коснуться обоих счетчиков одновременно и они работают. Прямо сейчас, если я касаюсь одного, он становится единственным ответчиком и блокирует все другие касания, пока мой палец нажат.

Answer 1

View, который находится за пределами TouchableNativeFeedback нужно вернуться так, как это: -

<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>