Fix incompatiblity in types with new versions of react-native

[XantreDev]

Description

Reanimated type is not compatible with new react-native types for transforms (added string type)

src/Components/Slider.tsx:97:17 - error TS2322: Type '{ translateX: number; }' is not assignable to type 'never'.

97 transform: [{ translateX: translateX.value }],
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/Features/UpdateNotifications/InAppUpdateProgress.tsx:66:7 - error TS2322: Type 'StyleProp' is not assignable to type 'StyleProp<AnimateStyle<MaybeSharedValue<StyleProp>>>'.
Type 'ViewStyle' is not assignable to type 'StyleProp<AnimateStyle<MaybeSharedValue<StyleProp>>>'.
Type 'ViewStyle' is not assignable to type 'AnimateStyle<MaybeSharedValue>'.
Types of property 'transform' are incompatible.
Type 'string | (PerpectiveTransform | RotateTransform | RotateXTransform | RotateYTransform | RotateZTransform | ... 7 more ... | MatrixTransform)[] | undefined' is not assignable to type 'AnimatedTransform | undefined'.
Type 'string' is not assignable to type 'never[]'.

66 style={style}
~~~~~

node_modules/react-native-reanimated/lib/typescript/reanimated2/helperTypes.d.ts:28:5
28 style?: StyleProp<AnimateStyle<StylesOrDefault

>>;
~~~~~
The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<AnimateProps, any, any>> & Readonly<...>'

src/Features/UpdateNotifications/InAppUpdateProgress.tsx:75:15 - error TS2322: Type '{ translateX: number; }' is not assignable to type 'never'.

75 {
~
76 translateX: -(width.value ?? 0) / 2,

77               },
~~~~~~~~~~~~~~~

src/Features/UpdateNotifications/InAppUpdateProgress.tsx:78:15 - error TS2322: Type '{ scaleX: number; }' is not assignable to type 'never'.

78               {
              ~
79                 scaleX: progressShared.value,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
80               },
~~~~~~~~~~~~~~~

src/Features/UpdateNotifications/InAppUpdateProgress.tsx:81:15 - error TS2322: Type '{ translateX: number; }' is not assignable to type 'never'.

81               {
              ~
82                 translateX: (width.value ?? 0) / 2,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
83               },
~~~~~~~~~~~~~~~

src/Toast.tsx:181:9 - error TS2322: Type 'AnimatedStyleProp<ViewStyle | ImageStyle | TextStyle>' is not assignable to type 'StyleProp<ViewStyle>'.
Type 'AnimateStyle<ViewStyle>' is not assignable to type 'StyleProp<ViewStyle>'.
 Type 'AnimateStyle<ViewStyle>' is not assignable to type 'ViewStyle'.
   Types of property 'backfaceVisibility' are incompatible.
     Type 'number | "hidden" | "visible" | undefined' is not assignable to type '"hidden" | "visible" | undefined'.
       Type 'number' is not assignable to type '"hidden" | "visible" | undefined'.

181         style={useAnimatedStyle(() => ({
         ~~~~~

node_modules/react-native/Libraries/Components/View/ViewPropTypes.d.ts:234:3
 234   style?: StyleProp<ViewStyle> | undefined;
       ~~~~~
 The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & ViewProps & { animatedProps?: Partial<ViewProps> | undefined; layout?: typeof BaseAnimationBuilder | BaseAnimationBuilder | LayoutAnimationFunction | undefined; entering?: any; exiting?: any; } & MotiProps<...> & { ...; } & RefAttributes<...>'

src/Toast.tsx:183:23 - error TS2322: Type '{ translateY: number; }' is not assignable to type 'never'.

183           transform: [{ translateY: translateY.value }],

### Steps to reproduce

1.  Try to use transform in reanimated with react-native 0.71.12

### Snack or a link to a repository

*

### Reanimated version

3.4.1

### React Native version

0.71.12

### Platforms

Android, iOS

### JavaScript runtime

None

### Workflow

None

### Architecture

None

### Build type

None

### Device

None

### Device model

_No response_

### Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[XantreDev]

patch

diff --git a/node_modules/react-native-reanimated/lib/typescript/reanimated2/helperTypes.d.ts b/node_modules/react-native-reanimated/lib/typescript/reanimated2/helperTypes.d.ts
index f904b0c..1d4c221 100644
--- a/node_modules/react-native-reanimated/lib/typescript/reanimated2/helperTypes.d.ts
+++ b/node_modules/react-native-reanimated/lib/typescript/reanimated2/helperTypes.d.ts
@@ -8,8 +8,8 @@ type AdaptTransforms<T> = {
     [P in keyof T]: Adaptable<T[P]>;
 };
 type TransformsStyle = Pick<RNTransformsStyle, 'transform'>;
-type TransformStyleTypes = TransformsStyle['transform'] extends readonly (infer T)[] | undefined ? T : never;
-type AnimatedTransform = AdaptTransforms<TransformStyleTypes>[];
+type TransformStyleTypes = Extract<TransformsStyle['transform'], any[]>[number]
+type AnimatedTransform = AdaptTransforms<TransformStyleTypes>[] | string;
 export type AnimateStyle<S> = {
     [K in keyof S]: K extends 'transform' ? AnimatedTransform : S[K] extends ReadonlyArray<any> ? ReadonlyArray<AnimateStyle<S[K][0]>> : S[K] extends object ? AnimateStyle<S[K]> : S[K] extends ColorValue | undefined ? S[K] | number : S[K] | SharedValue<AnimatableValue>;
 };

[tjzel]

Hi @XantreGodlike. Could you please post the code that's causing this error? Also there is a separate issue dedicated for TypeScript issues: #4645

[XantreDev]

[XantreDev]

All transforms in useAnimatedStyle breaks typechecking

The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<AnimateProps, any, any>> & Readonly<...>'

src/Features/UpdateNotifications/InAppUpdateProgress.tsx:75:15 - error TS2322: Type '{ translateX: number; }' is not assignable to type 'never'.

75 {
~
76 translateX: -(width.value ?? 0) / 2,

77               },
~~~~~~~~~~~~~~~

src/Features/UpdateNotifications/InAppUpdateProgress.tsx:78:15 - error TS2322: Type '{ scaleX: number; }' is not assignable to type 'never'.

78               {
              ~
79                 scaleX: progressShared.value,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
80               },
~~~~~~~~~~~~~~~

src/Features/UpdateNotifications/InAppUpdateProgress.tsx:81:15 - error TS2322: Type '{ translateX: number; }' is not assignable to type 'never'.

81               {
              ~
82                 translateX: (width.value ?? 0) / 2,
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
83               },
~~~~~~~~~~~~~~~

[tjzel]

Would you be so kind to post your code as text so I could check exactly what's the reason for this issue to appear? We have useAnimatedStyle transforms in our Examples and their types are correct so I would need to look here at what exactly is breaking.

[elliottkember]

I'm seeing the same thing on my end with React Native 0.71.12. This was not present in 0.71.8. I'm using version 2.17.0 of this library.

  const translate = useSharedValue(0);
  const animatedTransform = useAnimatedStyle(() => ({
    transform: [{ translateX: translate.value }],
  }));

src/components/Switch.tsx(58,17): error TS2322: Type '{ translateX: number; }' is not assignable to type 'never'.

My patch for 2.17.0 is as follows patches/react-native-reanimated+2.17.0.patch

diff --git a/node_modules/react-native-reanimated/react-native-reanimated.d.ts b/node_modules/react-native-reanimated/react-native-reanimated.d.ts
index c33d830..1519d00 100644
--- a/node_modules/react-native-reanimated/react-native-reanimated.d.ts
+++ b/node_modules/react-native-reanimated/react-native-reanimated.d.ts
@@ -126,15 +126,12 @@ declare module 'react-native-reanimated' {
       ...others: Adaptable<number>[]
     ) => AnimatedNode<T>;

-    export type TransformStyleTypes = TransformsStyle['transform'] extends
-      | readonly (infer T)[]
-      | undefined
-      ? T
-      : never;
+    export type TransformStyleTypes = Extract<TransformsStyle['transform'], any[]>[number];
+
     export type AdaptTransforms<T> = {
       [P in keyof T]: Adaptable<T[P]>;
     };
-    export type AnimatedTransform = AdaptTransforms<TransformStyleTypes>[];
+    type AnimatedTransform = AdaptTransforms<TransformStyleTypes>[] | string;

     export type AnimateStyle<S> = {
       [K in keyof S]: K extends 'transform'