React native Question posted in
The official React Native documentation can be found here.

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

Tags:

2

Answers


  1. 0

    React Native’s TouchableOpacity has a built-in delay to prevent multiple touches. You can try to disable it using the delayPressIn prop:

    Try below maybe work:

    import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

const MyButton = () => {
  return (
    <TouchableOpacity
      activeOpacity={0.7}
      delayPressIn={0}
      onPress={() => console.log("test")}
    >
      <Text>This is a button</Text>
    </TouchableOpacity>
  );
};

export default MyButton;
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search