'global.__reanimatedWorkletInit is not a function. react-native-animated v2
I using 'worklet';
and runOnUI()
and then get the error below.
Because I use 'worklet';
I added import 'react-native-reanimated'
Because I also use runOnUI
I added import {runOnUI} from 'react-native-animated'
Error:
ERROR TypeError: global.__reanimatedWorkletInit is not a function. (In 'global.__reanimatedWorkletInit(_f)', 'global.__reanimatedWorkletInit' is undefined)
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
Solution 1:[1]
Short answer:
Besides runOnUI
also import and use something else from react-native-reanimated
, for example also add useSharedValue
:
import { useSharedValue, runOnUI } from 'react-native-reanimated';
and use the shared value:
const sharedVal = useSharedValue(0);
Now the error will go away.
Long answer (how I got to the solution):
At first I got the error (global.__reanimatedWorkletInit is not a function.
) when trying to create a widget:
import React from 'react';
import { Text } from 'react-native';
const Example = () => {
const someWorklet = () => {
'worklet';
console.log("Hey I'm running on the UI thread");
};
return (<Text>Example</Text>);
};
export default Example;
Adding import 'react-native-reanimated';
helped me to get rid of the error.
Then I wanted to run someWorklet
. So I added a runOnJS
(runOnUI
got me the same results) call. My component now returned:
<View>
<Text>Worklet: {runOnUI(someWorklet)()}</Text>
</View>
and I imported it via import { runOnUI } from 'react-native-reanimated';
.
Now the same error was back.
Only after I also imported and called useSharedValue
everything worked as expected. This is my component code which didn't throw the error anymore:
import React from 'react';
import { View, Text } from 'react-native';
import { useSharedValue, runOnJS } from 'react-native-reanimated';
const Example = () => {
const someWorklet = () => {
'worklet';
console.log("Hey I'm running on the UI thread");
return 'World';
};
const sharedVal = useSharedValue(0);
return (
<View>
<Text>Hello, {runOnJS(someWorklet)()}</Text>
</View>
);
};
export default Example;
Solution 2:[2]
Just add these two lines in App.tsx and index.js
1)import "react-native-reanimated"
2)global.__reanimatedWorkletInit = () => {}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Andru |
Solution 2 | Saad Sheikh |