react-native-reanimated 2: cannot make a function with ‘worklet’ keyword (undefined is not a function)

im just learning react-native-reanimated v2, but i got an issue when creating a function with ‘worklet’ keyword.

I installed react-native-reanimated v2 on a React Native bare project using npx react-native init myApp.
I have followed all the react-native-reanimated v2 installation instruction, including:

• configuring the babel.config.js

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

• Enabling hermes, set it to true
• Configuring the MainApplication.java file
• Clean the build
• Reset the cache using yarn start --reset-cache

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 above, its just a simple code on App.js, but if i put 'worklet' keyword, it always get undefined is not a function error like this :

If you understand, please let me know. Thanks 🙂

Answer

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…