Updating to 39.0.0 causes TouchableOpacity to not work 100%

  1. SDK Version: 39.0.0
  2. Platforms(Android/iOS/web/all): iOS

After updating to SDK version 39.0.0, my TouchableOpacity’s no longer work 100%. The onPress function still works, but it doesn’t signal to the user that the component has been pressed. Thus, the “opacity” part of TouchableOpacity doesn’t work.

I tried changing the component to Pressable, but I get the same issue here.

This is my package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@apollo/client": "^3.0.0-rc.9",
    "@apollo/react-hooks": "^3.1.5",
    "@mux/upchunk": "^2.0.0",
    "@react-native-community/art": "^1.2.0",
    "@react-native-community/datetimepicker": "3.0.0",
    "@react-native-community/hooks": "^2.6.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-community/netinfo": "5.9.6",
    "@react-navigation/bottom-tabs": "^5.2.7",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.3.9",
    "@types/react-native-autocomplete-input": "^4.0.1",
    "@types/react-native-material-dropdown": "^0.11.4",
    "@welldone-software/why-did-you-render": "^4.3.2",
    "algoliasearch": "^4.2.0",
    "apollo-boost": "^0.4.9",
    "apollo-link-ws": "^1.0.20",
    "axios": "^0.19.2",
    "base-64": "^0.1.0",
    "expo": "^39.0.3",
    "expo-analytics-segment": "~9.0.0",
    "expo-av": "~8.6.0",
    "expo-blur": "~8.2.0",
    "expo-camera": "~9.0.0",
    "expo-constants": "~9.2.0",
    "expo-document-picker": "~8.4.0",
    "expo-file-system": "~9.2.0",
    "expo-image-picker": "~9.1.0",
    "expo-linking": "^1.0.1",
    "expo-location": "~9.0.0",
    "expo-media-library": "~9.2.1",
    "expo-network": "~2.3.0",
    "expo-permissions": "~9.3.0",
    "expo-sms": "~8.3.1",
    "expo-store-review": "~2.2.0",
    "expo-updates": "~0.3.3",
    "expo-video-thumbnails": "~4.3.0",
    "firebase": "7.9.0",
    "geolib": "^3.3.1",
    "graphql": "^15.1.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-instantsearch-dom": "^6.5.0",
    "react-instantsearch-native": "^6.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.0.tar.gz",
    "react-native-animated-bar": "^0.2.0",
    "react-native-autocomplete-input": "^4.2.0",
    "react-native-doorman": "^1.2.3-alpha.1",
    "react-native-dropdown-autocomplete-textinput": "^1.0.1",
    "react-native-dropdown-picker": "^3.0.4",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-material-dropdown": "^0.11.1",
    "react-native-paper": "^3.8.0",
    "react-native-picker-dropdown": "^0.1.2",
    "react-native-progress": "^4.1.2",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.4",
    "react-native-screens": "~2.10.1",
    "react-navigation": "^4.1.0",
    "react-navigation-stack": "^2.1.0",
    "react-use-search": "^0.2.3",
    "rn-fetch-blob": "^0.12.0",
    "sentry-expo": "^2.0.3",
    "stream-chat": "^1.11.3",
    "stream-chat-expo": "^0.11.0",
    "stream-chat-react": "^1.1.2",
    "subscriptions-transport-ws": "^0.9.16"
  },
  "devDependencies": {
    "@types/node": "^14.0.13",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "eslint-config-nando": "^1.0.9",
    "react-native-dotenv": "^0.2.0",
    "react-native-dropdown-autocomplete": "^1.0.18"
  },
  "private": true
}

And this is an example of a TouchableOpacity component:

            <TouchableOpacity onPress={function}>
              <Entypo name='back' size={30} color='#eee' />        
            </TouchableOpacity>

Changing it Pressable gets the same issue:

            <Pressable onPress={function}>
              <Entypo name='back' size={30} color='#eee' />        
            </Pressable>

it works fine: opacity on touchable - Snack

pressable doesn’t have the same effect because … it isn’t meant to do that. you have to make pressable have this behavior manually if you want, that’s the point of it, it makes it easier to customize the press effect.

in the future, please refer to How to create a Minimal, Reproducible Example - Help Center - Stack Overflow when you encounter what you think may be a bug. it’s a great process to follow where at the end you either have a good piece of code to share that reproduces your issue, or you figured out the bug in your own code.

Hi,

It works fine, however, if you press the touchable with one light touch (like a user would do), then it gets triggered but the opacity effect doesn’t appear, which is problematic because most TouchableOpacity are meant for just one click/touch, not a 0.5 sec or longer press.

From sdk 38 to 39, this behaviour is definitely different.

hello. it’s not different as far as i can tell. if you can post a video recording comparing the two or some reproducible example that would be helpful.

edit: it looks like this is the issue that you are observing - TouchableOpacity no longer shows opacity tap effects on 0.63.0 · Issue #29360 · facebook/react-native · GitHub. very keen perception on your part!

1 Like

here is the commit that fixes it: Touchable: Revert `minPressDuration` on Legacy Components · facebook/react-native@43c161c · GitHub

it has not yet landed in any react-native release. i requested that it be included in 0.63.4 in https://github.com/react-native-community/releases/issues/203#issuecomment-700370941

you can pull it in to your local project using something like patch-package if you like (patch-package - npm)

1 Like

hi again, this is resolved now. see SDK 39++ bug fix release · Issue #10464 · expo/expo · GitHub

I’ve followed all steps in upgrading but I still have this issue, TouchableOpacity doesn’t reduce opacity onPress when you only tap, which is typical user press behaviour.
I’ve reinstalled the expo client app, deleted node-modules and reinstalled.

EDIT: I’ve now figured this out. If I import TouchableOpacity from ‘react-native-gesture-handler’ it works fine, as opposed to importing from ‘react-native’. I’m new to react native and javascript generally, so I don’t know why this is working this way. And the docs tell you to import from ‘react-native’. A little confusing

1 Like

Actually it is not the right solution because it will not work properly if you use it inside absolute positioned View as described in this answer: android - React Native, TouchableOpacity wrapping floating button get nothing - Stack Overflow

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.