useAnimatedStyle hook is not recognized as worklet in .tsx file

[mrvincenzo]

I have this code (from the example code) in a function component in a .tsx file

  const randomWidth = useSharedValue(10);

  const config = {
    duration: 500,
    easing: Easing.bezier(0.5, 0.01, 0, 1),
  };

  const style = useAnimatedStyle(() => {
    return {
      width: withTiming(randomWidth.value, config),
    };
  });

  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'white',
      }}>
      <Animated.View style={[{ width: 100, height: 80, backgroundColor: 'black', margin: 30 }, style]} />
      <Button
        title='toggle'
        onPress={() => {
          randomWidth.value = Math.random() * 350;
        }}
      />
    </View>
  );

The react-native-reanimated/plugin doesn't recognize the useAnimatedStyle as worklet. I suspect that the issue may be related to the fact that it is a TS file and not a JS one. The only way around it is to add the worklet literal inside the hook, e.g.

 const style = useAnimatedStyle(() => {
   'worklet';
   return {
     width: withTiming(randomWidth.value, config),
   };
 });

If I don't add the worklet literal, I am getting the Tried to synchronously call anonymous function from a different thread. error.

The react-native-reanimated/plugin is defined correctly in babel.config.json and I am running the metro bundler with npm run start -- --reset-cache.

Is additional setup needed to make the hooks recognizable in TypeScript?

[mrvincenzo]

Well, it is not related to typescript. I create an empty React Native Typescript project from scratch and everything works there as expected. It's gotta be something else.

[mrvincenzo]

The problem was in metro.config.js:

module.exports = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-typescript-transformer'), // <--- PROBLEM
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

Removing babelTransformerPath line resolved the problem.

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};