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>

Can you try passing the keys to your buttons? It's kinda hard for react to know what exactly you're pressing otherwise and it can lead to bugs — Konstantin, Apr 03 '20 at 10:12

score 0 · Answer 1 · answered Apr 03 '20 at 10:57

0

The problem i resolved by using and onTouchStart instead of and onPress

answered Apr 03 '20 at 10:57

Ashish Mathew

117
1
9

score 0 · Accepted Answer · answered Apr 03 '20 at 11:02

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.

score 0 · Answer 3 · answered Jul 15 '20 at 20:51

I don't know what version of React Native the previous posters were using but "onTouchStart" is only available on View components not on Touchable Opacity.

Wrapping my touchable in a view mimics onPress behavior very well

<View onTouchStart={myEventHandler}>
  <TouchableOpacity>
    <Text>My Touchable Button</Text>
  </TouchableOpacity>
</View>

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

3 Answers3