Tried to synchronously call anonymous function from a different thread. with DrawerNavigator-CodePudding

I just upgraded to react native 0.67.3 and now when I open my app, which uses react navigation v6, I receive this error:


Occurred in worklet location: /Users/path/thing/node_modules/react-native-reanimated/lib/reanimated2/hook/useAnimatedStyle.js (332:24)

Possible solutions are:
a) If you want to synchronously execute this method, mark it as a Worklet
b) If you want to execute this method on the JS thread, wrap it using runOnJS
2022-03-09 10:54:14.180294-0500 thing[1949:15686] [native] Tried to synchronously call anonymous function from a different thread.

Occurred in worklet location: /Users/path/thing/node_modules/react-native-reanimated/lib/reanimated2/hook/useAnimatedStyle.js (332:24)

I'm currently using DrawerNavigator like this:

         <Drawer.Navigator initialRouteName="Home" >
            <Drawer.Screen name="HomeStack" component={HomeStack} />
          </Drawer.Navigator>

Here are my versions of the relevant packages:

    "react-native-reanimated": "2.3.1",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.3.11",
    "react-native-gesture-handler": "^1.9.0"

Any ideas what in DrawerNavigator may be causing this and how to fix?

CodePudding user response：

React Navigation Drawer Navigator V6 is using react-native-reanimatedV2 which employ special worklet function to synchronously run code for both JavaScript and UI thread.

Try to fallback to old react-native-reanimated V1 by set useLegacyImplementation to true


 <Drawer.Navigator useLegacyImplementation={true} initialRouteName="Home" >
     <Drawer.Screen name="HomeStack" component={HomeStack} />
 </Drawer.Navigator>