One touchable opacity doesn't press when another touchable opacity is pressed

Question

I was making a program in React native in which there are two buttons which when pressed will increase a tap counter. The problem is when one button is pressed the other won't respond and doesn't increase the counter. The button is made with Touchableopacity and the action is done by onPress.

<View style = {{flex:1,flexDirection:'row',justifyContent:'center'}}>
            <View>
            <TouchableOpacity style = {styles.button}
            onPress = {() => this.start() }
            >
              <Text style={styles.buttonText}>
                Tap
              </Text>
            </TouchableOpacity>
            </View>
            <View>
            <TouchableOpacity style = {styles.button}
            onPress = {() => this.start() }>
              <Text style={styles.buttonText}>
                Tap
              </Text>
            </TouchableOpacity>
            </View>
          </View>
</View>

Answer 1

Try using onTouchStart instead of onPress.

So change:

<TouchableOpacity style={styles.button} onPress={() => this.start()}>

To:

<TouchableOpacity style={styles.button} onTouchStart={() => this.start()}>

The reason you want to to this is because while one button is still being pressed, the onPress action on another button won't fire until you stop pressing the original button.