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

[aliza-khu]

@tjzel, Any estimation time for release 3.4.0? And is the resolution of this issue going to be included in it or not?

[renchap]

I tried the nightly package in our app, and I am seeing one issue:

We store some shared values in a context, but the context default values are not proper shared values objects, as (afaik) you can not create share values outside of a component.

We initialize them with { value: 0 } objects, which are never used as those context values are always set when rendering the provider.

Example:

export const myContext = createContext<{ counter: SharedValue<number> }>({
  counter: { value: 0 },
})

// Then used like this:

const Component: React.FC = () => {
  const counter = useSharedValue(0)

  return (
    <myContext.Provider value={{ counter }}>
      {/* … */}
    </myContext.Provider>
  )
}

This fails with the following error:

index.tsx:76:3 - error TS2739: Type '{ value: number; }' is missing the following properties from type 'SharedValue<number>': addListener, removeListener, modify

[tjzel]

Hi @renchap.
What you're describing is an issue stemming from improper typing in manually written types file. Out of simplicity SharedValue type was declared as an object with only value prop. This wasn't true though and SharedValue has its other properties 'revealed' now. Assigning an object that has only value prop is correctly detected as an error.

From my personal experience I also found default values for useContext a pain. I'd suggest the following:

export const myContext = createContext<{ counter: SharedValue<number> }>({
  counter: undefined as unknown as SharedValue<number>,
})

I know it's not pretty, but you could make it better:

interface myContextType {
  counter: SharedValue<number>;
}

export const myContext = createContext<myContextType>(
  {} as myContextType
);

Which I think is much more elegant.

[tjzel]

@aliza-khu About the release, I believe it may require a few additional weeks. With regards to the issue you raised, we will make every effort to fix it before the release, provided that we have sufficient time. If you have any ideas for a desired fix, we would be delighted if you could open a pull request.

Lastly, I kindly request that you avoid including non-TypeScript problems in this issue to ensure that all matters are handled systematically.

[jblarriviere]

Hello ! I tried the nightly package in our app as well, and I've encountered an issue when trying to provide an adapter created through createAnimatedPropAdapter as a 3rd argument to useAnimatedProps.

Example:

This example from the docs would raises the same error we have : https://reanimated-beta-docs.swmansion.com/docs/core/useAnimatedProps#adapters-

It fails with the following error:

TS2345: Argument of type 'AdapterWorkletFunction' is not assignable to parameter of type 'PropsAdapterFunction | PropsAdapterFunction[] | null | undefined'

Please let me know if there's more I can do !

[tjzel]

@jblarriviere Thanks for pointing that out! Adapters are quite complex and so far I had to cast it to old .d.ts types but missed some places - but thanks to your quick feedback a fix is already there!

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

#4645 (comment)

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.