React Native: TouchableOpacity remove delay

June 26, 2024

I have a calculator app with a lot of buttons (TouchableOpacity’s), and the problem occurs when the user presses a lot of the buttons very fast after each other: The first button press may get handled, however the other button presses will get ignored as the delay on the onPress event is too high. How do I remove that delay so that the onpress event gets fired instantly?

<TouchableOpacity
  activeOpacity={0.7}
  onPress={() => console.log("test")}
>
    This is a button
</TouchableOpacity>

I also tried using TouchableWithoutFeedback, Pressable, as well as the onPressIn, pressInDelay properties which also did not remove the delay

>Solution :

Use a different touchable component: TouchableWithoutFeedback
might be more responsive for your use case.

<TouchableWithoutFeedback onPress={handlePress}>
        <View>
          <Text>This is a button</Text>
        </View>
      </TouchableWithoutFeedback>
    </View>