Broken types with react-native@0.71.9+ and reanimated 3.2.0

[efstathiosntonas]

Description

react-native 0.71.9 and 0.71.10 were published today and the typings are now broken probably because of this PR. Downgrading react-native@0.71.8 eliminates the issue.

diffs: 0.71.8..0.71.9 and 0.71.9..0.71.10

TS2344: Type 'ViewStyle' does not satisfy the constraint 'AnimatedStyleProp<ViewStyle | TextStyle | ImageStyle>'.   Type 'ViewStyle' is not assignable to type 'AnimateStyle<TextStyle>'.     Types of property 'transform' are incompatible.       Type 'string | (PerpectiveTransform | RotateTransform | RotateXTransform | RotateYTransform | RotateZTransform | ... 7 more ... | MatrixTransform)[] | undefined' is not assignable to type 'AnimatedTransform | undefined'.

TS2345: Argument of type '() => { transform: { translateY: number; }[]; opacity: number; zIndex: number; }' is not assignable to parameter of type '() => AnimatedStyleProp<ViewStyle | TextStyle | ImageStyle>'.   Type '{ transform: { translateY: number; }[]; opacity: number; zIndex: number; }' is not assignable to type 'AnimatedStyleProp<ViewStyle | TextStyle | ImageStyle>'.     Type '{ transform: { translateY: number; }[]; opacity: number; zIndex: number; }' is not assignable to type 'AnimateStyle<ImageStyle>'.       Types of property 'transform' are incompatible.         Type '{ translateY: number; }[]' is not assignable to type 'never[]'.           Type '{ translateY: number; }' is not assignable to type 'never'.

const input = useRef<TextInput>(null); produces this on const AnimatedTextInput = Animated.createAnimatedComponent(TextInput); while using "@types/react": "18.2.7":

TS2769: No overload matches this call.   Overload 1 of 2, '(props: { value?: string | SharedValue<string | undefined> | undefined; id?: string | SharedValue<string | undefined> | undefined; children?: ReactNode | SharedValue<...>; ... 148 more ...; sharedTransitionStyle?: ILayoutAnimationBuilder | 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>>'.         Type 'TextInput' is not assignable to type 'Component<AnimateProps<TextInputProps>, any, any>'.           The types of 'props.style' are incompatible between these types.             Type 'StyleProp<TextStyle>' is not assignable to type 'StyleProp<AnimateStyle<StyleProp<TextStyle>>>'.               Type 'TextStyle' is not assignable to type 'StyleProp<AnimateStyle<StyleProp<TextStyle>>>'.                 Type 'TextStyle' is not assignable to type 'AnimateStyle<TextStyle>'.   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'.  index.d.ts(146, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & { value?: string | SharedValue<string | undefined> | undefined; id?: string | SharedValue<string | undefined> | undefined; ... 149 more ...; sharedTransitionStyle?: ILayoutAnimationBuilder | undefined; } & { ...; } & { ...; }' index.d.ts(146, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & { value?: string | SharedValue<string | undefined> | undefined; id?: string | SharedValue<string | undefined> | undefined; ... 149 more ...; sharedTransitionStyle?: ILayoutAnimationBuilder | undefined; } & { ...; } & { ...; }'

Steps to reproduce

1. update react-native@0.71.9+

Snack or a link to a repository

none needed

Reanimated version

3.2.0

React Native version

0.71.9+

Platforms

Android, iOS, Web

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

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?

[efstathiosntonas]

possible fix for useAnimatedStyle:

    export type TransformStyleTypes = TransformsStyle['transform'] extends
      | readonly (infer T)[]
      | undefined | string <---- added | string
      ? T
      : never;

at:

react-native-reanimated/react-native-reanimated.d.ts

Lines 69 to 74 in 2426f32

	export type TransformStyleTypes = TransformsStyle['transform'] extends
	| readonly (infer T)[]
	| undefined
	? T
	: never;
	export type AdaptTransforms<T> = {

for several other places:

    export type AnimateStyle<S> = {
      [K in keyof S]: K extends 'transform'
        ? AnimatedTransform | string <-------- added | string
        : 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>;
    };

at:

react-native-reanimated/react-native-reanimated.d.ts

Lines 79 to 89 in 2426f32

	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>;
	};

react-native-reanimated+3.2.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 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
@@ -68,7 +68,7 @@ declare module 'react-native-reanimated' {
 
     export type TransformStyleTypes = TransformsStyle['transform'] extends
       | readonly (infer T)[]
-      | undefined
+      | undefined | string
       ? T
       : never;
     export type AdaptTransforms<T> = {
@@ -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

let me know if you want me to open a PR if these changes look good.

[levibuzolic]

For context here's where the change introduced to React Native: facebook/react-native#37569

[Pnlvfx]

Same error when using useAnimatedStyle and transform:
const rStyle = useAnimatedStyle(() => ({
transform: [{translateX: translateX.value}],
}));

Type '{ translateX: number; }' is not assignable to type 'never'.

[efstathiosntonas]

@Pnlvfx hey, did you used the patch from this comment #4548 (comment)?

[Pnlvfx]

I cannot use 3.2.0 because of
#4554.
I’m using 3.1.0

[stianjensen]

Are you still doing releases on the 2.x branch? I'm seeing the same issue there and wondered if a fix will be published there as well, or if I should just keep a patch on my end for now before I'm able to upgrade to 3.x

[devethan]

Yeah, it was surely broken type declaration.
Use patch-package until release 3.3.0

[PaperbagWriter]

Currently on "react-native-reanimated": "3.4.0" and "react-native": "0.72.5". And getting the same issue, seems the fix was not ported to 3.x.
Had to apply the same patch for node_modules/react-native-reanimated/lib/typescript/reanimated2/helperTypes.d.ts

edit: took a look at 3.5 and seems these are fixed
edit2: upgraded to 3.5 and everything is working as expect with rn 72.5