react-native-reanimated: Potential TypeScript errors in react-native-reanimated 3.4.0

The same issue .../node_modules/react-native-reanimated/src/reanimated2/threads.ts: [Reanimated] Babel plugin exception: ReferenceError: unknown node of type "TSInstantiationExpression" with constructor "Object"

“react-native-reanimated”:“3.5.4” “react-native”: “0.70.13”,

You may need to update your version of metro-react-native-babel-preset and @babel/core. And reset the metro cache (yarn start --reset-cache)

Hi @satya164, which versions should I upgrade till? I’m still facing this error.

[Reanimated] Babel plugin exception: Error: Unknown node type: “TSInstantiationExpression”

I am getting an error for missing semicolon in FlatList.tsx. I am using react native 0.69.12 and react-native-reanimated 3.5.4. Anyone else experiencing this?

Having same issue: Reanimated 3.5.4 and RN 0.67.4

I get an error when giving types for useAnimatedRef and Animated.FlatList, I’m using Reanimated 3.5.4

const ref = useAnimatedRef<FlatList<any>>();

or

const ref = useAnimatedRef<Animated.FlatList<any>>();

and this is the error

No overload matches this call.
  Overload 1 of 2, '(props: AnimateProps<ReanimatedFlatListPropsWithLayout<any>> | Readonly<AnimateProps<ReanimatedFlatListPropsWithLayout<any>>>): ReanimatedFlatListClass<...>', gave the following error.
    Type 'AnimatedRef<FlatList<any>>' is not assignable to type 'LegacyRef<ReanimatedFlatListClass<any>> | undefined'.
      Type 'AnimatedRef<FlatList<any>>' is not assignable to type '(instance: ReanimatedFlatListClass<any> | null) => void'.
        Types of parameters 'component' and 'instance' are incompatible.
          Type 'ReanimatedFlatListClass<any> | null' is not assignable to type 'FlatList<any> | undefined'.
            Type 'null' is not assignable to type 'FlatList<any> | undefined'.
  Overload 2 of 2, '(props: AnimateProps<ReanimatedFlatListPropsWithLayout<any>>, context: any): ReanimatedFlatListClass<any>', gave the following error.
    Type 'AnimatedRef<FlatList<any>>' is not assignable to type 'LegacyRef<ReanimatedFlatListClass<any>> | undefined'.ts(2769)

You may need to update your version of metro-react-native-babel-preset and @babel/core. And reset the metro cache (yarn start --reset-cache)

still having unknown node of type "TSInstantiationExpression" with constructor "Node" issue after deleting node_modules and yarn.lock, anyone else ?

When i use useAnimatedRef<Reanimated.ScrollView>(); i get this type error (style error due to ...rest prop that extends ScrollViewProps):

index.d.ts(154, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<AnimatedScrollViewClass> & Readonly<AnimateProps<AnimatedScrollViewProps>>'

helperTypes.d.ts(32, 5): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<AnimatedScrollViewClass> & Readonly<AnimateProps<AnimatedScrollViewProps>>'

I am getting an error for missing semicolon in FlatList.tsx. I am using react native 0.69.12 and react-native-reanimated 3.5.4. Anyone else experiencing this?

@Xmaxer what you presented are not the same use cases and the underlying problem is a common pitfall in TypeScript.

Consider the following snippet (notice it doesn’t use Reanimated):

function variableFoo() {
  return '100%';
}

function constantFoo() {
  return '100%' as const;
}

const variableWidth = `${variableFoo()}`;

const constantWidth = `${constantFoo()}` as const;

const castWidth = `${constantFoo()}` as `${number}%`;

const style1: ViewStyle = {
  width: variableWidth, // this produces an error
};

const style2: ViewStyle = {
  width: constantWidth, // this is ok
};

const style3: ViewStyle = {
  width: castWidth, // this is ok
};

This happens because TypeScript always tries to infer the type as wide as possible - in this case it infers a computed string as string what causes errors. It’s because width property of ViewStyle is not a string but: The keyword as const tells TypeScript to do the opposite: infer the type as narrowly as possible.

If you’re not convinced, here’s your example that I modified to highlight the problem:

const wrongNextWidth = `${interpolate(
  expandingAnimation.value,
  [0, 1],
  [30, 100]
)}%`;

const correctNextWidth = `${interpolate(
  expandingAnimation.value,
  [0, 1],
  [30, 100]
)}%` as const;

const wrongStyle: ViewStyle = {
  width: wrongNextWidth, // this produces an error
};

const correctStyle: ViewStyle = {
  width: correctNextWidth, // this is ok
};

So your best bet here it to use as const in those situations - or if it’s still problematic for TypeScript, try to cast it to it’s direct type (${number}% here).

@efstathiosntonas https://github.com/software-mansion/react-native-reanimated/blob/%40tjzel/tarball/types/animated-style/react-native-reanimated-3.4.9.tgz, preferably download the file into your project and use yarn add file:./react-native-reanimated-3.4.9.tgz, don’t mind the version, it’s just to differentiate from others since if you use 3.4.0 it could try to install it from cache instead of this tarball. Thanks and let me know about TS errors you encounter!

after metro bundle load I get this error:

 BUNDLE  ./index.js 

error: node_modules/react-native-reanimated/src/reanimated2/threads.ts: <project-folder>/node_modules/react-native-reanimated/src/reanimated2/threads.ts: unknown node of type "TSInstantiationExpression" with constructor "Node"

using react-native-reanimated 3.4.2

EDIT: ok it got fixed by removing node_modules-folder and yarn.lock-file.

@efstathiosntonas Yeah, after I ‘fixed’ this error, and then ‘fixed’ it again I realised there are more entry points for it to break, so I decided to finally rewrite and fix styles of Animated Components.

If you want (I’d appreciate it) I can build a tarball from that branch so you could check if it fixes your issues - I think it should, since I added a bunch of type tests and it’s passing them.

@natew This was not on purpose. Accidentally WithDecayConfig was imported as import instead of import type and for some reason that import was not detected by TypeScript as type import and was added to JS code and that broke web. Relevant fix has already been merged and we are preparing 3.5.0 that will have this and other fixes included. If you need it asap I suggest installing react-native-reanimated’s nightly version (yarn add react-native-reanimated@nightly or npm install react-native-reanimated@nightly).

Try to delete your node_modules or node_modules and yarn.lock and see if the issue is gone without applying this patch.

It didn’t work.

Hi @bfricka. You’re absolutely right.

This pull request is not supposed to be a breaking change - it shouldn’t change our API. I should’ve explained this more elaborately in this issue’s description, but types are not supposed to be gone in 3.4.0 - therefore, if a type you imported from react-native-reanimated is missing then it’s an error and you are more than welcome to report it - and I will restore it.

Reason for some types missing is the fact that old .d.ts contained actual errors and imports that couldn’t be resolved - therefore I decided to actually get as little from it as possible; also our codebase is quite complex and it’s sometimes hard to tell if some piece of code is relevant (especially when its types are incorrect).

Those structural types you mention are an obvious mistake on my side - I focused on getting exported, auto-generated types right and didn’t think about the fact that some important types might actually not be exported in our .ts code.

I will go through the types from our old .d.ts once again and add all missing, relevant types. Thank you for pointing this out!

@tjzel After upgrading to 3.4.0 from 3.3.0 I’m getting the following type error:

node_modules/react-native-reanimated/src/reanimated2/threads.ts: /<redacted>/app/node_modules/react-native-reanimated/src/reanimated2/threads.ts: Unknown node type: "TSInstantiationExpression"

I’ve reviewed the latest installation instructions and updated versions of Babel etc. but the error persists.

[Reanimated] Babel plugin exception: ReferenceError: unknown node of type “TSInstantiationExpression” with constructor “Node”

Had to remove an outdated ui library that used a older react-native-reanimated version. That’s fixed it for me.

Run npm why react-native-reanimated to check which dependencies are uses react-native-reanimated.

@tjzel Sorry to bother you, after changing the type everything works here: before: const AnimatedFlashList = Animated.createAnimatedComponent(FlashList); after: const AnimatedFlashList = Animated.createAnimatedComponent(FlashList<number>);

I am getting an error for missing semicolon in FlatList.tsx. I am using react native 0.69.12 and react-native-reanimated 3.5.4. Anyone else experiencing this?

I am having the same issue. I am using react native 0.72.4 and react-native-reanimated 3.5.4

Yes, I didn’t check for enums, guess I have to release 3.5.4 soon, thanks for noticing it.

@tjzel Thank you! You were right, after removing node_modules and reinstalling everything works!

@devoren There is still something wrong with your version - e.g. type AdaptTransforms is no longer used in Animated Styles. Try to remove your node_modules, then install the packages again. After that please use npm why react-native-reanimated or yarn why react-native-reanimated to see if you actually only have the nightly version installed.

@tjzel Ah I see, my fault for not checking the true definition of DimensionValue. Thanks for the clarification and explanation, much appreciated.

leaving this here since the other issue is closed:

@tjzel this issue is back on 0.72.4, offending(~?~) commit: https://github.com/facebook/react-native/commit/2558c3d4f56776699602b116aff8c22b8bfa176a

using: 3.5.0-nightly-20230813-f55e831b1

edit: after removing | string from react-native StyleSheetTypes.d.ts` all errors went away

@bfricka removing an exported type export is a breaking change, that said I am one of the biggest proponents of Reanimated and the Software Mansion team and my comment was only made out of concern. I also haven’t replaced the types yet myself, but in any case I’d need official word from the team on what they’d want to do before I made any contribution.

@tjzel thanks! Look forward to it.

We got around this issue with this patch https://github.com/RocketChat/Rocket.Chat.ReactNative/pull/5128/commits/9f93bc3543a63fa7484387c0c113c150f8967c6f

diff --git a/node_modules/react-native-reanimated/package.json b/node_modules/react-native-reanimated/package.json
index 0ffa9d3..00d6cd1 100644
--- a/node_modules/react-native-reanimated/package.json
+++ b/node_modules/react-native-reanimated/package.json
@@ -34,8 +34,8 @@
   },
   "main": "lib/module/index",
   "module": "lib/module/index",
-  "react-native": "src/index",
-  "source": "src/index",
+  "react-native": "lib/module/index",
+  "source": "lib/module/index",
   "types": "lib/typescript/index",
   "files": [
     "Common/",

Correction - adding the following to package.json resolutions seems to have resolved the issue for me:

"resolutions": {
    "@babel/plugin-transform-typescript": "^7.20.0",
    "@babel/types": "^7.20.0",
    ...
  },

I resolved the TSInstantiationExpression issue by deleting yarn.lock and regenerating it. I was not able to find the specific dependency causing the issue.

Is this error coming from babel? It seems like it. I just built a fresh RN app with Reanimated and it works for me - could you post more details about the error you are encountering?

I searched for TSInstantiationExpression in the reanimated code base, and it’s not there, so it seems that the error must be coming from somewhere else. Unfortunately, there is no stack trace logged, just the error exactly as I included above.

I’m using RN 0.71.11, so I’ll test building a fresh RN 0.71.11 app and adding Reanimated 3.4.0 tomorrow and see what happens.

@tjzel After upgrading to 3.4.0 from 3.3.0 I’m getting the following type error:

node_modules/react-native-reanimated/src/reanimated2/threads.ts: /<redacted>/app/node_modules/react-native-reanimated/src/reanimated2/threads.ts: Unknown node type: "TSInstantiationExpression"

I’ve reviewed the latest installation instructions and updated versions of Babel etc. but the error persists.

Same here