React Native why pressing two different buttons quickly with same onPress func not triggering onPress

Question

I have a counter state and four buttons, each button is passed the same onPress function which will increase the counter value with 1.

If I press any two different buttons alternately extremely quickly (i.e. button 2 --> button 4 --> button 2 --> button 4), the onPress function is sometimes ignore (you can see the counter value is not increasing). I expect the counter will increase when clicked.

But If I press the same buttons continuously (keep pressing button 2 quickly) the problem doesn't seems happening.

Here's a minimal example that describe the problem:

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image, TouchableOpacity, Dimensions } from 'react-native';

export default class TestCount extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clickCount: 0,
    };

  }

  increaseCount = () => {
    this.setState(function(prevState, props){
      return {
        clickCount: prevState.clickCount + 1
      }
    })
  }

  render() {
    const { clickCount } = this.state;
    return (
      <View style={styles.container}>
        <View style={styles.countBoard}>
          <Text style={styles.question}>{clickCount}</Text>
        </View>
        <View style={styles.butons}>
          <TouchableOpacity style={styles.choice}>
            <Text style={styles.btnText} onPress={this.increaseCount}>Button 1</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.choice}>
            <Text style={styles.btnText} onPress={this.increaseCount}>Button 2</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.choice}>
            <Text style={styles.btnText} onPress={this.increaseCount}>Button 3</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.choice}>
            <Text style={styles.btnText} onPress={this.increaseCount}>Button 4</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

}

const BtnWidth = Math.floor((Dimensions.get('window').width - 40) / 2);
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  countBoard: {
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 15,
  },
  question: {
    fontSize: 40,
    fontWeight: '600',
  },
  btnText: {
    fontSize: 22,
    borderColor: '#595959',
  },
  butons: {
    width: '100%',
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
  choice: {
    width: BtnWidth,
    height: 50,
    borderWidth: 1
  }
});

Vencovsky Vencovsky · Accepted Answer · 2019-06-27T19:11:46

This is maybe not a problem with React Native, but a normal function of your phone.

In some phones that don't handle double touches, if you press in two points, it will press in "the midle" of the two points.

So when you are pressing fast, sometimes you have two touches at the same time and it will become only one in "the middle".

This happened alot with me when I'm pressing on the phone, but it doesn't work, then I realize the reason why it wasn't working is because part of my hand that is holding the phone is touching the screen, creating two points on the screen and making it click in the middle of the two points.

React Native why pressing two different buttons quickly with same onPress func not triggering onPress

2 Answers