Touchable and Pressable: slow UI feedback on Expo SDK 39

Expo SDK
1

I’m upgrading from Expo SDK 38 to SDK 39 and noticed a problem with the Touchable component on my device (Android 10). It seems that the Touchable (and Pressable) component has a delay to start the UI feedback (both Ripple or something I did on onPressIn).

I don’t know which React Native version Expo SDK 39 uses, but it seems to be a problem introduced in 63.0.0 and fixed in 63.0.3. Please see this issue and the version changelog.

You can see the differences below:

Expo SDK 38 Expo SDK 39
expo-sdk-38 expo-sdk-39

I don’t know how to specify the Expo SDK version in a Snack, so I didn’t create one.

2

Hi

You can specify the SDK version in a snack on the bottom right of the screen.

But this is a known issue. I think it was fixed in the latest bugfix release.

If you run expo diagnostics you will see what react native version the Expo SDK is based on, but Expo can cherry pick fixes from later react native versions, and I think they did that in the case of this issue.

See the details of the bugfix release here:
https://github.com/expo/expo/issues/10464#issuecomment-703178030

1 Like
3

Thank you for your reply and orientations.

The issue you mentioned is similar but not the same. I managed to reproduce it on Snack. For the Ripple to be displayed in SDK 39 it is necessary to hold for a few moments (130ms if I am right about the cause), in SDK 38 it is instantly.

Also, I executed expo diagnostics and it returned:

Expo CLI 3.28.0 environment info:
    System:
      OS: Windows 10 10.0.18362
    Binaries:
      Node: 12.14.1 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: Version  4.0.0.0 AI-193.6911.18.40.6821437
    npmPackages:
      expo: ^39.0.0 => 39.0.3
      react: 16.13.1 => 16.13.1
      react-dom: 16.13.1 => 16.13.1
      react-native: https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz => 0.63.2
      react-native-web: ~0.13.7 => 0.13.16
    Expo Workflow: managed

Which makes me believe the mentioned issue from React Native wasn’t integrated to Expo SDK 39 yet.

Should I create an Issue in GitHub about it?

4

Hi

Sorry, I misremembered about Expo diagnostics telling you which version of react native the SDK was based on.

But as far as I know the bugfix release was indeed supposed to fix your issue.

The fix for this in React Native is mentioned here:

Changed

The SDK 39 bugfix release notes say:

react-native:

  • Fixed regression in Blob support. (issue)
  • TouchableOpacity press-in delay removed. (issue)
  • Fix Xiaomi TextInput native crash. (issue)

In both the React Native and the Expo SDK 39 bugfix release notes there is mention of removing a delay for TouchableOpacity.

I tried your Snacks and I think the problem is that in SDK 39 it seems that an onPress prop is needed for it to show the effect. If I add an onPress then it seems to work as expected. Does that fix it for you?

Also, please make sure you’re running the latest client (Expo app) on your device(s).

5

Hi,

Yes, I’m running the latest Expo client. Yes, setting onPress solved the issue in the Snack.

The mentioned issues are not the same because they are related to different commits and dates:

I’m having this trouble when trying to upgrade my app to SDK 39 both with TouchableNativeFeedback and Pressable, all my “buttons” have onPress, so it didn’t fix the delay. I really don’t know why this is happening and why I can’t reproduce it in Snack :frowning_face:

You can see that the Pressability issue isn’t resolved in Expo if you go to node_modules/react-native/Libraries/Pressability/Pressability.js and see its code. If I apply the mentioned fix, everything works without any delay.

Is there any forecast to create a new patch (39.0.4)? Should I create an Issue to track this better?

Other weird things are happening, but then I need to debug it better, understand it and maybe open another topic.

PS: If you see the Issue I mentioned, you’ll notice that a unstable_pressDelay was created (see this commit) as a temporary workaround to delay onPressIn when the Pressable is inside a ScrollView. I don’t know if this should be patched together.

6

Hi

I think it would be best to create an issue on GitHub and include the above info.

Until it is fixed, perhaps you can use patch-package as mentioned by @notbrent here.

7

Thank you for your time. I created an Issue here:

https://github.com/expo/expo/issues/10715

8

This issue is now fixed.

Quoting @notbrent from the opened issue:

you can now update your react-native version to https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz to include facebook/react-native@86ffb9c and facebook/react-native@a6395d5 :slight_smile:

1 Like
9

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