TouchableWithoutFeedback onPress triggers before onPressOut (Android)

[jurelik]

Description

If you tap a TouchableWithoutFeedback area really fast, the onPress function will trigger before onPressOut, even though the documentation states the folowing:

onPressOut: Called as soon as the touch is released even before onPress. The first function argument is an event in form of PressEvent.

This happens with a clean app install using "react-native init" using a real Android device or the Android emulator.

React Native version:

System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 852.92 MB / 8.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.8.4 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.1
      System Images: android-28 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_242 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.2 => 0.63.2 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Init a new react-native app using the "react-native init" command
2. Change the App.js file to the following:

import React from 'react';
import {
  SafeAreaView,
  View,
  StatusBar,
  TouchableWithoutFeedback
} from 'react-native';

const App: () => React$Node = () => {
  return (
    <>
      <SafeAreaView style={{ flex: 1 }}>
        <TouchableWithoutFeedback
          onPress={() => console.warn('onPress')}
          onPressOut={() => console.warn('onPressOut')}
        >
          <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', borderColor: 'red', borderWidth: 1 }}>
          </View>
        </TouchableWithoutFeedback>
      </SafeAreaView>
    </>
  );
};

export default App;

3. Run on an Android device or an Android emulator & tap on the TouchableWithoutFeedback area quickly (fast tap). The 'onPressOut' message will display after the 'onPress' message. This does not happen if you hold the finger down and then release it.

Expected Results

onPressOut should complete before onPress does as per the documentation, even on a fast tap.

Snack, code example, screenshot, or link to a repository:

https://github.com/jurelik/pressOutTest

[safaiyeh]

Thanks @jurelik, have you checked out Pressable? This component may have solved event handling issues. https://reactnative.dev/docs/pressable

[TheHighriser]

I still can see this problem. Even with Pressable. onPressOut is always fired last.

[lsps9150414]

Still seeing this problem with Pressable as well. onPress is fired before onPressOut when pressing quickly. If I press and hold for a while then onPressOut is fired first.

Also seeing the problem with iOS simulator.

[Wyctus]

This still happens both on Android and iOS. What is the current state of this issue?

[HyopeR]

This problem continues.

Edit: Actually, I looked around a bit. If you go to this link; https://reactnative.dev/docs/pressable You will see this schematic. The problem is. Is this really the behavior we expect it to be?

[github-actions[bot]]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because the author hasn't provided the requested feedback after 7 days.