search

enzomanuelmangano / pressto

Your React Native app deserves better tapping interactions.
MIT License
112 stars 0 forks source link

RNGH warning that says: [react-native-gesture-handler] None of the callbacks in the gesture are worklets. #2

Open 7dp opened 2 weeks ago

7dp commented 2 weeks ago

I encounter this warning whenever i use the PressableScale from pressto (PressableOpacity not tested).

Usage: 

<PressableScale disabled={isDisabled} {...props} style={[pressableStyle, { ...props }?.style]}>
  {renderContent()}
</PressableScale>

Logs:

 WARN  [react-native-gesture-handler] None of the callbacks in the gesture are worklets. If you wish to run them on the JS thread use '.runOnJS(true)' modifier on the gesture to make this explicit. Otherwise, mark the callbacks as 'worklet' to run them on the UI thread. 
    at GestureDetector (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:179805:49)
    at BasePressable (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:205114:24)
    at Button (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:204755:22)
    at RCTView
    at View (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:74982:43)
    at RCTView
    at View (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:74982:43)
    at RCTScrollContentView
    at RCTScrollView
    at ScrollView (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:80866:36)
    at ScrollView
    at AnimatedComponent(ScrollView) (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:151306:38)
    at anonymous (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:173844:33)
    at anonymous (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:186370:24)
    at RNCSafeAreaView
    at anonymous (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:190386:21)
    at LoginScreen (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:319863:26)
    at StaticContainer (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:147075:17)
    at EnsureSingleNavigator (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:143656:24)
    at SceneView (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:146962:22)
    at RCTView
    at View (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:74982:43)
    at DebugContainer (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:299831:36)
    at MaybeNestedStack (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:297741:23)
    at RCTView
    at View (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:74982:43)
    at RNSScreen
    at Animated(Anonymous) (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:86934:62)
    at Suspender (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:191000:22)
    at Suspense
    at Freeze (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:191014:23)
    at DelayedFreeze (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:190960:22)
    at InnerScreen (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:190782:41)
    at Screen (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:190925:50)
    at SceneView (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:297803:22)
    at Suspender (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:191000:22)
    at Suspense
    at Freeze (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:191014:23)
    at DelayedFreeze (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:190960:22)
    at RNSScreenStack
    at ScreenStack (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:191338:25)
    at NativeStackViewInner (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:298082:22)
    at RCTView
    at View (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:74982:43)
    at SafeAreaProviderCompat (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:299496:24)
    at NativeStackView
    at PreventRemoveProvider (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:145742:25)
    at NavigationContent (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:146724:22)
    at anonymous (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:146740:27)
    at NativeStackNavigator (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:297659:18)
    at StackNavigator (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:297557:48)
    at EnsureSingleNavigator (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:143656:24)
    at BaseNavigationContainer (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:142152:28)
    at ThemeProvider (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:148095:21)
    at NavigationContainerInner (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:147969:26)
    at ErrorBoundary (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:149203:22)
    at RCTView
    at View (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:74982:43)
    at GestureHandlerRootView (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:178807:21)
    at KeyboardControllerView
    at Animated(Anonymous) (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:86934:62)
    at AnimatedComponent(Animated(Anonymous)) (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:151306:38)
    at KeyboardProvider (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:185289:24)
    at RNCSafeAreaProvider
    at SafeAreaProvider (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:190196:24)
    at PersistGate (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:194359:22)
    at Provider (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:194098:21)
    at App (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:130479:26)
    at withDevTools(App) (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:130021:27)
    at RCTView
    at View (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:74982:43)
    at RCTView
    at View (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:74982:43)
    at AppContainer (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:74825:25)
    at main(RootComponent) (http://localhost:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&lazy=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=taaruf.online.id&transform.routerRoot=app&transform.engine=hermes&transform.bytecode=true:117867:28)

Hoping to get this warnings resolved. Thanks! 😊

enzomanuelmangano commented 2 weeks ago

Hey @7dp I'm not able to reproduce the issue here. Could you please provide me with a reproducible example?

Also, I've noticed you're passing the disabled prop (instead of enabled) which is not supported by pressto

7dp commented 2 weeks ago

Hey, this is the reproducible project. I am using Expo with react-native v0.75.4 here. Please take a look.

Steps:

  1. Create expo project with --template blank-typescript
  2. Install and setup pressto, RNGH, Reanimated, and RNScreens
  3. Run prebuild
  4. Upgrade to RN 0.75.4 (latest as of now) with this Expo's official guide: https://expo.dev/changelog/2024/08-14-react-native-0.75
  5. Run prebuild again
  6. Install pod
  7. Use the PressableScale component, e.g: 
    
import { StatusBar } from "expo-status-bar";
import { PressableScale } from "pressto";
import { StyleSheet, Text, View } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() { return (

Open up App.tsx to start working on your app! console.log("scale")} />

); }



Repo:
https://github.com/7dp/repro-pressto-1

Thanks! 😊
7dp commented 1 week ago

Hi @enzomanuelmangano , not to mean to rush, but could you please take some time to look at this issue?

virendrasingh-tech commented 1 week ago

Same issue occurring for me if pressable is inside @react-native-segmented-control/segmented-control tab or react-native-pager-view tab component

7dp commented 1 week ago

Recently i found that this warning could be easily reproduced just by upgrading the GestureHandler to >= 2.17.0. 🤔

enzomanuelmangano commented 6 days ago

@7dp thanks for providing the repro and sorry for my late reply. Usually, when using expo it's a good practice to align all the package versions consistent with the ones expected by expo (you can run npx expo install --check or npx expo install --fix). By using the expected versions, I'm not experiencing the issue.

Is there any reason why incompatible versions are being used?

Screenshot 2024-10-18 alle 16 34 45
7dp commented 6 days ago

Yea, i use RNGH 2.18.1 because it was recommended by Expo official docs when upgrading to RN 0.75. Take a look at their article: https://expo.dev/changelog/2024/08-14-react-native-0.75#2-install-updated-packages

P.S: RNGH version that officially support RN 0.75 is starting from RNGH 2.18.0. Take a look: https://github.com/software-mansion/react-native-gesture-handler/releases/tag/2.18.0

enzomanuelmangano commented 6 days ago

@7dp Thanks! My bad, I misread the steps previously 😅 It seems that the reanimated plugin is not "workletizing" correctly the Tap Gesture and I have no idea why. Although I temporarily enforced the "worklet" keyword.

You can give a try by running: 

yarn add pressto@0.2.0-beta.0

Let me know if this fixes the issue for you as well - I'll dive a bit deeper and create a new release

7dp commented 6 days ago

Very nice @enzomanuelmangano, i tried the v0.2.0-beta.0 and can confirm no warning being printed to console anymore. 🥳