Ask questionsPressable has unchangeable delay for opacity effect (onPressIn)


The <Pressable /> component has an unchangeable delay between pressing and visual feedback.


<table> <tr> <th>Pressable</th> <th>TouchableOpacity</th> </tr> <tr> <td><img src="" height=120/></td> <td><img src="" height=120/></td> </tr> </table>

As you can see, the TouchableOpacity has instant visual feedback when I press it, where as the Pressable takes about 120ms (wild guess). I though should fix this delay?

React Native version:

info Fetching system and libraries information...
(node:46144) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
    OS: macOS 10.15.5
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 6.86 GB / 32.00 GB
    Shell: 5.7.1 - /bin/zsh
    Node: 14.4.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.6 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
    CocoaPods: 1.9.3 - /usr/local/bin/pod
    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
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
    Java: 1.8.0_252 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.1 => 0.63.1 
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Create <Pressable /> component
  2. Give it an opacity effect with the new style function that supplies the pressed argument
  3. See delay between press and effect

Expected Results

The opacity effect/visual feedback should appear instantly, like on the TouchableOpacity.

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


import React, { useCallback } from 'react';
import { Pressable, PressableProps, PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native';

export interface PressableOpacityProps extends PressableProps {
	disabledOpacity?: number;

export type StyleType = (state: PressableStateCallbackType) => StyleProp<ViewStyle>;

export default function PressableOpacity(props: PressableOpacityProps): JSX.Element {
	const { style, disabled, disabledOpacity, ...passThroughProps } = props;

	const getOpacity = useCallback(
		(pressed: boolean) => {
			if (disabled) return disabledOpacity ?? 1;
			else return pressed ? 0.6 : 1;
		[disabled, disabledOpacity],
	const _style = useCallback<StyleType>(({ pressed }) => [style, { opacity: getOpacity(pressed) }], [getOpacity, style]);

	return <Pressable style={_style} disabled={disabled} {...passThroughProps} />;

Now just use it:


export default function App() {
  return (<PressableOpacity style={{ width: 200, height: 30 }} onPress={() => console.log('hello!')} />);

Answer questions yungsters

Thanks for the thoughtful (and extremely prompt) responses.

Let me first respond to @andreialecu. Your realization that onPress is "delayed" in Outlook for iOS begins to touch upon a pretty fundamental disconnect between how React Native (and websites) handle touch feedback for navigation, and how Apple's Human Interface Guidelines handles touch feedback for navigation. It isn't something we can resolve with only changes to Pressable, but I do believe we need to eventually cross that road. (The gist of the guidelines is that the touch feedback should deactivate after the navigation has been reversed / popped.)

As for next steps, we feel pretty strongly that the delay should be the new default in Pressable. The reason for this default is that someone who is testing a new interactive user interface is much more likely to notice that the touch feedback is delayed as opposed to testing whether the new interactive element accidentally triggers during a scroll or swipe gesture. But when they realize and want to override that delay, they should be able to do so (or learn why it exists and maybe leave it).

If this makes sense, my proposal is the following:

  • Remove the default 130ms delay from Pressability (which affects TouchableWithoutFeedback, Pressable, etc.).
  • Change Pressable to introduce the 130ms delay when it is enclosed within a ScrollView.
  • Change Pressable to introduce a new prop, pressDelay?: ?('default' | 'none'). When set to none, there will be no press delay (regardless of whether it is enclosed within a ScrollView).

As a net effect, TouchableWithoutFeedback and its composing libraries will continue to work as they did before. However, Pressable will start with the new behavior (delay by default in ScrollView) but can be configured otherwise (to have no delay).

Does this seem reasonable?


Related questions

Crash on email detection in TextInput on Xiaomi devices running android 10 hot 11
Cannot find module 'C:\Users\USER\AppData\Roaming\npm\node_modules\expo-cli\bin\expo.js hot 6
How to fix the error Value for title cannot be cast from ReadableNativeMap to String hot 6
xcode 11.4 build fatal error: module map file xxx/Build/Products/Debug-iphoneos/YogaKit/YogaKit.modulemap&#39; not found hot 6
ERR_INVALID_ARG_TYPE(name, 'string', value); ^ TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined at validateString (internal/validators.js:125:11) at Object.join (path.js:1147:7)
native_modules.gradle file is not downloading
Undefined symbol on Flipper using 0.62 on real iOS device
"RnDiffApp" has not been registered - 0.60.5 to 61.0-rc.2 hot 4
FlatList TypeError: undefined is not an object (evaluating 'props.getItem') hot 4
Error: Cannot find module 'warnOnce' hot 4
error Failed to install the app. Make sure you have the Android development environment set up: Run CLI with --verbose flag for more details. Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 :ReactNative:Unexpected empty result of running 'npx.cmd --quiet --no-install react-native config' command from 'null' directory. :ReactNative:Running 'npx.cmd --quiet --no-install react-native config' command from 'null' directory failed. hot 4
8 errors while debugging new react native app Execution failed for task ':app:compileDebugJavaWithJavac'. - React Native hot 4
Hi! I created new react native project and I can't build on android hot 4
react native 0.62 crash down in android 4.4.2 - react-native hot 3
React-native I18nManager.forceRTL doesn't applies changes in first app load hot 3
Github User Rank List