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: https://snack.expo.io/@notbrent/opacity-on-touchable

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 https://stackoverflow.com/help/mcve 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 - https://github.com/facebook/react-native/issues/29360. very keen perception on your part!

1 Like

here is the commit that fixes it: https://github.com/facebook/react-native/commit/43c161c30aff2f5306d32c9994fefc9edae08f85

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 (https://www.npmjs.com/package/patch-package)

1 Like

hi again, this is resolved now. see https://github.com/expo/expo/issues/10464#issuecomment-703178030

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: https://stackoverflow.com/questions/34139687/react-native-touchableopacity-wrapping-floating-button-get-nothing/36720618#36720618