Search code examples
react-nativebuttonexpotouchableopacity

React Native: TouchableOpacity remove delay


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>