javascriptreact-nativereact-native-reanimatedreact-native-reanimated-v2

Cannot define a function calling 'worklet': "undefined is not a function"


I'm learning React Native Reanimated version 2, but I got an issue when creating a function that calls 'worklet'.

I installed React Native Reanimated version 2 on a React Native bare project that was created with npx react-native init myApp.
I have followed all the installation instructions, as follows.

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

I try to make a simple Worklet function like this:

    import React from 'react';
    import { View, Button } from 'react-native';

    const App = () => {

      const someWorklet = () => {
        'worklet';
        console.log('this run on UI thread');
      };

      return (
        <View >
          <Button title="Press" onPress={() => { }} />
        </View>
      );
    };

    export default App;

As you can see, the code in App.js is simple, but when I call 'worklet', I always get an undefined is not a function error as shown below.

error message


Solution

  • Ohh i feel like a stupid man...
    I just need to import the react-native-reanimated in the App.js and all done.. :)

    import 'react-native-reanimated'
    

    It looks like the react-native-reanimated v2 documentation doesnt mention to import the react-native-reanimated on to the top of our project...