fix: transform type change in RN 0.71.9

[radko93]

This commit facebook/react-native@2558c3d added string to transform type and it broke Reanimated types.

Summary

fixes #45

[efstathiosntonas]

@radko93 thanks for opening this PR, I believe this change is not enough, it can break other stuff too like refs (when using useRef) and <Animated.View style={styles.whatever}/> at least with @types/react@18.2.6 and typescript@5.1.3

After applying this too everything works fine:

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 ec993fd..d99761f 100644
--- a/node_modules/react-native-reanimated/react-native-reanimated.d.ts
+++ b/node_modules/react-native-reanimated/react-native-reanimated.d.ts
@@ -78,7 +78,7 @@ declare module 'react-native-reanimated' {
 
     export type AnimateStyle<S> = {
       [K in keyof S]: K extends 'transform'
-        ? AnimatedTransform
+        ? AnimatedTransform | string
         : S[K] extends ReadonlyArray<any>
         ? ReadonlyArray<AnimateStyle<S[K][0]>>
         : S[K] extends object

edit: just saw that the initial commit included the change above, if I do not include the string on AnimateStyle<S> then I get these errors:

test.tsx:1186:13 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: { style?: StyleProp<AnimateStyle<StyleProp<TextStyle>>>; ref?: Ref<Component<AnimateProps<TextInputProps>, any, any>> | undefined; ... 149 more ...; showSoftInputOnFocus?: boolean | ... 1 more ... | undefined; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type 'RefObject<TextInput>' is not assignable to type 'Ref<Component<AnimateProps<TextInputProps>, any, any>> | undefined'.
      Type 'RefObject<TextInput>' is not assignable to type 'RefObject<Component<AnimateProps<TextInputProps>, any, any>>'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<ComponentClass<AnimateProps<TextInputProps>, any>, { announcements: { title: string; date: string; }; introductionDialog: { overlayColor: string; }; ... 105 more ...; walkthrough_dialogs: { ...; }; }, {}, never, ComponentClass<...>, ComponentClass<...>>): ReactElement<...>', gave the following error.
    Type 'RefObject<TextInput>' is not assignable to type 'Ref<Component<AnimateProps<TextInputProps>, any, any>> | undefined'.

1186             ref={input}
                 ~~~

  node_modules/@types/react/index.d.ts:146:9
    146         ref?: Ref<T> | undefined;
                ~~~
    The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & { style?: StyleProp<AnimateStyle<StyleProp<TextStyle>>>; ref?: Ref<Component<AnimateProps<TextInputProps>, any, any>> | undefined; ... 149 more ...; showSoftInputOnFocus?: boolean | ... 1 more ... | undefined; } & { ...; } & { ...; }'

src/components/KeyboardAvoidingView.tsx:159:9 - error TS2322: Type 'false | ViewStyle | ImageStyle | RegisteredStyle<ViewStyle | TextStyle | ImageStyle> | RecursiveArray<ViewStyle | ... 3 more ... | RegisteredStyle<...>> | null | undefined' is not assignable to type 'StyleProp<AnimateStyle<StyleProp<ViewStyle>>>'.
  Type 'ViewStyle' is not assignable to type 'StyleProp<AnimateStyle<StyleProp<ViewStyle>>>'.

159         style={!behavior ? style : StyleSheet.compose(style, animatedStyle)}
            ~~~~~

  node_modules/react-native-reanimated/react-native-reanimated.d.ts:98:7
    98       style?: StyleProp<AnimateStyle<StylesOrDefault<P>>>;
             ~~~~~
    The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<AnimateProps<ViewProps>, any, any>> & Readonly<...>'

src/components/KeyboardAvoidingView.tsx:145:25 - error TS2322: Type 'ForwardedRef<View>' is not assignable to type 'LegacyRef<Component<AnimateProps<ViewProps>, any, any>> | undefined'.
  Type '(instance: View | null) => void' is not assignable to type 'LegacyRef<Component<AnimateProps<ViewProps>, any, any>> | undefined'.
    Type '(instance: View | null) => void' is not assignable to type '(instance: Component<AnimateProps<ViewProps>, any, any> | null) => void'.
      Types of parameters 'instance' and 'instance' are incompatible.
        Type 'Component<AnimateProps<ViewProps>, any, any> | null' is not assignable to type 'View | null'.
          Type 'Component<AnimateProps<ViewProps>, any, any>' is not assignable to type 'NativeMethods & ViewComponent'.
            Type 'Component<AnimateProps<ViewProps>, any, any>' is missing the following properties from type 'NativeMethods': measure, measureInWindow, measureLayout, setNativeProps, and 2 more.

145         <ReanimatedView ref={ref} onLayout={handleOnLayout} style={style} {...props}>
                            ~~~

  node_modules/@types/react/index.d.ts:154:9
    154         ref?: LegacyRef<T> | undefined;
                ~~~
    The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<AnimateProps<ViewProps>, any, any>> & Readonly<...>'

[radko93]

@efstathiosntonas thank you for you feedback, I updated the PR to bring back the change again.

[efstathiosntonas]

Thanks @radko93, please note that I'm not familiar with reanimated typings so the proposed fix might not be the best one.

[radko93]

It's quite confusing because TransformsStyle['transform'] should include string already

[piaskowyk]

Thanks for the help! 🎉

[sciranka]

Hi folks, may I ask, are you also going to release a new 2.x.x version with this fix?

cc @piaskowyk

[idrisssakhi]

Is it possible to have this fix on 2. X.X version please. I explain, we have a dependency with react-native-vision-camera that does not support REA 3, and we want to have the last version of React. We are blocked with version 0.71.8.
Would you please merge this commit into v2 it will be great for those blocked on v2 for the moment

[piaskowyk]

We are working on react-native-vision-camera and Reanimated 3 integration right now

[efstathiosntonas]

@piaskowyk you’re working on vision-camera v2 or the upcoming one? Thanks

[WookieFPV]

Is it possible to have this fix on 2. X.X version please. I explain, we have a dependency with react-native-vision-camera that does not support REA 3, and we want to have the last version of React. We are blocked with version 0.71.8. Would you please merge this commit into v2 it will be great for those blocked on v2 for the moment

You can use this patch:
react-native-reanimated-npm-2.17.0-564aa2c54f.patch

index c33d8306ed219100bb76020a5d7b2be3f6e97d57..f6bc1ef37bdce534ba13cfa6de3f174075e7fd74 100644
--- a/react-native-reanimated.d.ts
+++ b/react-native-reanimated.d.ts
@@ -128,6 +128,7 @@ declare module 'react-native-reanimated' {
 
     export type TransformStyleTypes = TransformsStyle['transform'] extends
       | readonly (infer T)[]
+      | string
       | undefined
       ? T
       : never;
@@ -138,7 +139,7 @@ declare module 'react-native-reanimated' {
 
     export type AnimateStyle<S> = {
       [K in keyof S]: K extends 'transform'
-        ? AnimatedTransform
+        ? AnimatedTransform | string
         : S[K] extends ReadonlyArray<any>
         ? ReadonlyArray<AnimateStyle<S[K][0]>>
         : S[K] extends object
diff --git a/src/.DS_Store b/src/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..69dd848d071ed83200e14facfc2f65705e9b5e67```