Typescript with Reanimated and Animated.AnimateProps

[wcastand]

trying to type my project (fix errors after upgrading deps to v3 and adding Animated as default view)

and i get a problem on a few props because of Animated.AnimateProps

first: testID becomes string | AnimateSharedValue ... so typescript is not happy about it.
second: createContext create a Provider that accept ReactNode but with Animated the type is React.ReactNode | Animated.SharedValue<React.ReactNode>

Is there a type that you provide for your ViewProps? because Animated.AnimateProps<ViewProps> breaks a lot of types expectation (testID, createContext, ...)

AnimateProps does { [K in keyof Omit<P, 'style'>]: P[K] | SharedValue<P[K]>; } but i would like to be able to Omit some keys that makes no sense to be sharedValue like testID or children or i am missing something?

[MissieKahsay]

It seems that you're encountering type errors when trying to upgrade dependencies to v3 and add Animated as the default view in your project. Specifically, you're running into issues with the props for Animated components, which are causing TypeScript errors.

The problem with the testID prop becoming a string | AnimateSharedValue is likely due to the fact that the AnimateSharedValue type is being included in the union type. To resolve this issue, you could try explicitly typing the testID prop as a string, like this:

testID?: string;

Regarding the issue with the createContext provider, it seems that the ReactNode type is being extended to include Animated.SharedValue. One way to handle this could be to define a custom type that extends ReactNode but excludes the Animated.SharedValue type, like this:

type ProviderValue = Exclude<ReactNode, Animated.SharedValue<any>>;

Then, you can use this custom type as the generic type for your provider, like this:

const MyContext = createContext<ProviderValue>(defaultValue);

Regarding your question about the AnimateProps type, it seems that this type includes all props of P, except for the style prop, which is replaced with SharedValue<P['style']>. If you want to omit certain props from the AnimateProps type, you could try creating a custom type that excludes those props, like this:

type AnimatePropsWithoutTestID<P extends object> = Omit<P, 'testID'> & { style?: SharedValue<P['style']>; };

Then, you can use this custom type instead of AnimateProps, like this:

const MyAnimatedComponent = Animated.createAnimatedComponent<ViewProps, AnimatePropsWithoutTestID<ViewProps>>(View);

This will create an animated version of the View component, with all props except for testID included in the AnimateProps type.