react-native-reanimated: Reanimated2: exception in useAnimatedStyle

Did you try to run metro with reset cache?

I have the same problem, I’ve followed all the guides I could find, did everything here, still keeps breaking ```TypeError: Cannot convert undefined or null to object at Function.values (<anonymous>)

  at useAnimatedStyle (node_modules/react-native-reanimated/lib/reanimated2/Hooks.js:332:27)```

I saw this like 5 times already. All the fixes were cache.

If you’re trying to use “useAnimatedStyle” working on storybook web. You may have to write “worklet” at the top of the passed function.

const animatedStyle = useAnimatedStyle(() => {
    "worklet";
    
    //some logic
    return {
        //your style
    }
})

For my case, it happened because babel couldn’t perceive directive literal of useAnimatedStyle, which, I guess, should have been automatically added when I use the hook.

As a result, react-native-reanimated/plugin couldn’t work as supposed. This lines of code are supposed to find our codes (which we applied useAnimatedStyle) and process ‘woklet’ part.

So, the simple solution, which doesn’t feel right, is to write “worklet” at the top of the passed function of useAnimatedStyle. So that, reanimated babel plugin can perceive the passed function wth directive.

Maybe it’s a problem of storybook’s default babel plugin. I suspect that one of babel plugin used in building storybook is blocking reanimated worklet to be injected in a right way.

this is not fixed/closed yet, I too getting the same issue

yarn start --reset-cache didn’t help me

const AnimatedBar: () => React$Node = () => {
    const barWidth = useSharedValue(30);
    const barAnimatedStyle = useAnimatedStyle(() => {
        return {
            width: withTiming(barWidth.value, {
                duration: 500,
            }),
        };
    });

    const setBarWidth = () => {
        barWidth.value = 300;
    }

    return (
        <React.Fragment>
            <View>
                <IconButton
                    icon="menu-left"
                    color="#aaaaaa"
                    size={50}
                    onPress={() => setBarWidth()}
                />
            </View>
            <Animated.View style={[styles.bottomBar, barAnimatedStyle]}>
                <Text>BottomBar</Text>
            </Animated.View>
        </React.Fragment>
    );
}

bable.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-reanimated/plugin',
  ],
};

Versions:

"react-native": "0.63.4",
"react-native-reanimated": "2.0.0-alpha.6",

App runs fine if I comment the useAnimatedStyle call

I was able to resolve the babel issues by changing my babel.config.js to .babelrc.json as follows:

{
  "presets": [
    "babel-preset-gatsby"
  ],
  "plugins": [
    "react-native-reanimated/plugin"
  ]
}

I think this might have been a bit of a project specific case. However, I am starting to have issues with storybook(where I will open a ticket on their end). But I got a spring example to work on web!

This error occurs because useAnimatedStyle expects worklet as an argument (ref) and react-native-reanimated/plugin is supposed to convert the passed argument to worklet automatically (ref). But if the passed function didn’t get converted into a worklet due to any reason above error shows. For example directive will not work in cljs project.

Above error is only shown in the older version, like 2.1.0, 2.2.0, etc. newer versions don’t show errors due to this check, but the app just crashes with these logs

06-05 01:21:19.812 12779 12779 F DEBUG   : Abort message: 'JNI DETECTED ERROR IN APPLICATION: JNI GetObjectRefType called with pending exception java.lang.RuntimeException: Tried to synchronously call function {G__75911} from a different thread.
06-05 01:21:19.812 12779 12779 F DEBUG   : 
06-05 01:21:19.812 12779 12779 F DEBUG   : Occurred in worklet location: /home/parvesh_monu/Desktop/ArchFiles/React/status-react/node_modules/react-native-reanimated/src/reanimated2/hook/useAnimatedStyle.ts (492:18)
06-05 01:21:19.812 12779 12779 F DEBUG   : 
06-05 01:21:19.812 12779 12779 F DEBUG   : Possible solutions are:
06-05 01:21:19.812 12779 12779 F DEBUG   : a) If you want to synchronously execute this method, mark it as a Worklet
06-05 01:21:19.812 12779 12779 F DEBUG   : b) If you want to execute this method on the JS thread, wrap it using runOnJS
06-05 01:21:19.812 12779 12779 F DEBUG   :   at void com.swmansion.reanimated.AndroidErrorHandler.raise(java.lang.String) (AndroidErrorHandler.java:6)

I think there should also be an exported method for creating worklet instead of only relying on the directive. The method which currently exists is not completely implemented and is being removed in https://github.com/software-mansion/react-native-reanimated/pull/3254 PR.

Please don’t remove the method and fix its implementation. Thank you cc: @piaskowyk

watchman watch-del-all
yarn start --reset-cache

this doesn’t work for me.

I’m using reanimated@2.2.0 in react-native project. I tried everything I could, like reset cache, watchman clean cache, etc… It’s still not working.

@monthem could you please open a new issue regarding storybook?

babel plugin should handle all the default hooks. looks like storybook’s babel plugin messes around with the hooks names and reanimated plugin can’t detect them since worklet this is still working.

yarn start --reset-cache

run this code, it worked for me

refrens: https://docs.swmansion.com/react-native-reanimated/docs/next/troubleshooting/