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

Delaying onPress is out of the scope for the current issue because we have a path forward. I think that if we want to make that part of React Native feel more like the platform, we should do it for real (and actually hook it up to navigations).


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