Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pressable delay too long for pressed to be true #29321

Closed
mrousavy opened this issue Jul 9, 2020 · 2 comments
Closed

Pressable delay too long for pressed to be true #29321

mrousavy opened this issue Jul 9, 2020 · 2 comments
Labels
Needs: Triage 🔍 Resolution: Locked This issue was locked by the bot.

Comments

@mrousavy
Copy link
Contributor

mrousavy commented Jul 9, 2020

Description

The <Pressable> component (and all other Touchable components) have received added delay until the onPressIn function fires in react-native 0.63. This means any TouchableOpacitys will feel sluggish and won't immediately respond to touches. See:

1 mov

When immediately clicking, the pressed property won't be set to true at all, so no opacity changes/feedback to the user!

2 mov

After holding (Long press) the pressed property is true and the opacity switches.

Note: When I manually set delayPressIn={0} the feedback appears instant again, but I'm not going to do that for hundreds of Touchables inside my project. Also, this only works on Touchable components, Pressable doesn't even have this feature!

Am I missing something? Is this intended behaviour?

React Native version:

info Fetching system and libraries information...
(node:14869) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
System:
    OS: macOS 10.15.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 5.47 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.4.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.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 25, 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.0, 30.0.0, 30.0.0
      System Images: android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
      Android NDK: 21.2.6472646
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_252 - /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.0 => 0.63.0 
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

  1. Use <TouchableOpacity> component (or <Pressable> and use style function to toggle between opacity depending on pressed property)
  2. Press it

Expected Results

The Touchable/Pressable should show feedback right away

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

1 mov

When immediately clicking, the pressed property won't be set to true at all, so no opacity changes/feedback to the user!

2 mov

After holding (Long press) the pressed property is true and the opacity switches.

mrousavy referenced this issue Jul 9, 2020
Summary:
*Pressable* is a component which is intended to replace the Touchable* components such as *TouchableWithoutFeedback* and *TouchableOpacity*. The motivation is to make it easier to create custom visual touch feedback so that React Native apps are not easily identified by the “signature opacity fade” touch feedback.

We see this component as eventually deprecating all of the existing Touchable components.

Changelog:
[Added][General] New <Pressable> Component to make it easier to create touchable elements

Reviewed By: yungsters

Differential Revision: D19674480

fbshipit-source-id: 765d657f023caea459f02da25376e4d5a2efff8b
@elicwhite
Copy link
Member

Looks like this commit got missed: 4aaf629#diff-ff4d5358a97501a402a3f234318497e4

@elicwhite
Copy link
Member

Also, looks like this is a duplicate of #29313

@facebook facebook locked as resolved and limited conversation to collaborators Oct 1, 2021
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Oct 1, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Needs: Triage 🔍 Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

3 participants