Potential TypeScript errors in react-native-reanimated 3.4.0

[tjzel]

Description

This issue is dedicated for all react-native-reanimated users that have upgraded to 3.4.0. We made a significant change in which we remove old, manually typed definition file react-native-reanimated.d.ts to use automatically generated .d.ts files.

However, the code base is complex enough that full transition could not be done all at once and some type errors are to be expected. Therefore, please report your type problems in this issue, so we could have them all in one place.

Moreover, if issues that emerged are too burdensome for you to keep up smooth development with react-native-reanimated we've prepared a quick guide on how to revert those changes, until the fixes come.

This is a special branch that is the current version of react-native-reanimated but doesn't use automatically generated types. Keep in mind, that this version is also not type errors free and we don't plan on improving it, since its maintenance is too time consuming.

How to restore previous typings in react-native-reanimated

CLI solve

cd <path to node_modules> ; \
cd react-native-reanimated ; \
rm package.json ; \
wget https://raw.githubusercontent.com/software-mansion/react-native-reanimated/restore-d.ts/package.json ; \
wget https://raw.githubusercontent.com/software-mansion/react-native-reanimated/restore-d.ts/react-native-reanimated.d.ts

Manual solve

1. Open our special branch.
2. From there download two files:
   • package.json (make sure it's the file that's in the root of repository)
   • react-native-reanimated.d.ts
3. Move those files (replace package.json) in node_modules/react-native-reanimated in your project files.
4. In case TypeScript has trouble resolving types after that, a restart of your IDE/TypeScript compiler might be necessary.

Steps to reproduce

1. Upgrade react-native-reanimated to 3.4.0.

Reanimated version

3.4.0

Platforms

Android, iOS, Web

[tjzel]

Hi @doomsower. The issue was fixed in #5074 - for now I suggest using the nightly version of Reanimated (yarn add react-native-reanimated@nightly).

[efstathiosntonas]

@tjzel hi, after upgrading to 3.5.3 it throws this:

Extrapolation' cannot be used as a value because it was exported using 'export type'. 215 Extrapolation.CLAMP

introduced on PR: https://github.com/software-mansion/react-native-reanimated/pull/5074

I can just replace it with "clamp", just mentioning it

[tjzel]

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

[tjzel]

@efstathiosntonas Just released 3.5.4 with relevant fix.

[efstathiosntonas]

@tjzel thank you ❤️

[erikkjernlie]

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?

[tjzel]

@erikkjernlie I suggest bumping your minor version of React-Native

[MystDexter]

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

[satya164]

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)

[devoren]

Hello! TypeError when i use AnimatedFlashList:

[tjzel]

@devoren it seems like your FlashList doesn't have its item's types but renderItem is typed. Could you show a code snippet that leads to it?

[devoren]

@tjzel Component:

const array = [1,2,3,4,5,6,7[
const renderItem: ListRenderItem<number> = ({ item }) => {
return (
    <LiveItem
        item={item}
    />
);
};

const keyExtractor = (item: number, index: number) => {
return item.toString();
};

return (
<>
    <FocusAwareStatusBar barStyle={'light-content'} />
    <AnimatedFlashList
        data={array}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        estimatedItemSize={window.height}
        pagingEnabled
        decelerationRate={'normal'}
    />
</>
);

[tjzel]

@devoren I'm afraid a definition for AnimatedFlashList is a must here.

[devoren]

@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>);

[tjzel]

@devoren No problems, I'm glad to see that it works since types for createAnimatedComponent can be troublesome at the moment!

[Rakha112]

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)

[emil-malmgaard-rasmussen]

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

[pioner92]

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",

[dsound-zz]

https://github.com/software-mansion/react-native-reanimated/issues/4645#issuecomment-1733700583

G

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'm also getting the same error. Unable to use react-native-reanimated

react-native: 0.67.5 react-native-reanimated: 3.5.4

[tenShotsMiss]

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)

I'm also getting this one.

"react-native": "0.72.5", "react-native-reanimated": "^3.5.4"

[tjzel]

AnimatedRef & FlatList error will be fixed with #5308.

[thongquach]

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"

[manjeetcars24]

missing semicolon in FlatList.tsx error is still coming on the latest version (3.5.4) + RN(0.70.12). Anyone able to have a proper fix for it ?

[dmontag23]

It seems the toHaveAnimatedStyle method on the jest object throws a Property 'toHaveAnimatedStyle' does not exist on type 'Matchers... error. However, the error seems to only be a typescript error as the test still runs without any issues and passes as expected.

It seems this happens because I'm explicitly importing expect from @jest/globals, but node_modules/react-native-reanimated/lib/typescript/reanimated2/jestUtils.d.ts does not extend explicit @jest/globals expect matchers. For an example of how this can be done, check out this file from the react testing library.

I fixed this by adding a reanimated.d.ts file to my project with the following contents:

// Explicit `@jest/globals` `expect` matchers.
declare module '@jest/expect' {
  interface Matchers<R extends void | Promise<void>> {
      toHaveAnimatedStyle(style: Record<string, unknown>[] | Record<string, unknown>, config?: {
          shouldMatchAllProps?: boolean;
      }): R;
  }
}

But something similar should be automatically included in the types for reanimated.

[tjzel]

@dmontag23 We will look into it.

[tjzel]

Closing this issue since collective TS errors stemming from 3.4.0 are resolved. Please open new issues for new TS errors.

As for those semicolons @manjeetcars24, try upgrading your TypeScript and maybe React Native.

[AntQwanlity]

Still having TSInstantiationExpression in 3.6.1

[tjzel]

@AntQwanlity Try bumping your TypeScript to 4.7 at least.

[VladSt90]

Still having TSInstantiationExpression in 3.6.1

The same. Latest version of react-native

[AntQwanlity]

@AntQwanlity Try bumping your TypeScript to 4.7 at least.

Typescript 5.3

[tjzel]

@AntQwanlity Check out solutions in here

[chriskrogh]

want to flag that I ran into this issue after creating a managed expo app in a monorepo:

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

the root cause was because I moved the typescript dev dependency to the root package.json instead of each individual package's package.json. this can also happen if @typescript-eslint plugin / parser are installed at the root.

moving from the root into each package's devDependencies solved the issue for me

[patlux]

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