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

admin管理员组

文章数量:1277607

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.

• Configuring the babel.config.js :

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

• Enabling Hermes, setting it to true.
• Configuring the MainApplication.java file.
• Cleaning the build.
• Resetting 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, 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.

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.

• Configuring the babel.config.js :

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

• Enabling Hermes, setting it to true.
• Configuring the MainApplication.java file.
• Cleaning the build.
• Resetting 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, 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.

• javascript
• react-native
• react-native-reanimated
• react-native-reanimated-v2

Share Improve this question Follow edited Oct 6, 2023 at 14:29 Henke - Нава́льный П с м 5,78766 gold badges4141 silver badges5151 bronze badges asked Jul 20, 2021 at 20:49 Yoga UtomoYoga Utomo 36511 gold badge44 silver badges1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

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...

本文标签： javascriptCannot define a function calling 39worklet39 quotundefined is not a functionquotStack Overflow