TypeScript - Issue with transform (and other) props (1.8.0)

Hello.

I’ve just upgraded from 1.4.0 and I keep getting lots of TypeScript compilation errors. So for example following code:

export type AnimatedNumber = Animated.Adaptable<number>; // or Animated.Value<number>

export type AnimatedPosition = {
  x: AnimatedNumber;
  y: AnimatedNumber;
};

type Props = {
  initialPosition: AnimatedPosition;
};

const GameInteractableFlag = ({initialPosition}: Props) => {
  return (
    <Animated.View
      style={[
        styles.imageFlag,
        {
          transform: [ // these lines
            {translateX: initialPosition.x}, // and this
            {translateY: initialPosition.y}, // and this
          ], // and this
        },
      ]}>
      <FastImage source={images.flag} imageStyle={styles.imageFlag} />
    </Animated.View>
  );
};

is showing following error:

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<AnimateProps<ViewStyle, ViewProps>>): View', gave the following error.
    Type '{ transform: ({ translateX: Animated.Adaptable<number>; } | { translateY: Animated.Adaptable<number>; })[]; }' is not assignable to type 'false | AnimateStyle<ViewStyle> | RegisteredStyle<AnimateStyle<ViewStyle>> | RecursiveArray<false | AnimateStyle<ViewStyle> | RegisteredStyle<...> | null | undefined> | readonly (false | ... 3 more ... | undefined)[] | null | undefined'.
      Types of property 'transform' are incompatible.
        Type '({ translateX: Adaptable<number>; } | { translateY: Adaptable<number>; })[]' is not assignable to type 'AnimatedTransform'.
          Type '{ translateX: Adaptable<number>; } | { translateY: Adaptable<number>; }' is not assignable to type 'never'.
            Type '{ translateX: Animated.Adaptable<number>; }' is not assignable to type 'never'.
  Overload 2 of 2, '(props: AnimateProps<ViewStyle, ViewProps>, context?: any): View', gave the following error.
    Type '{ transform: ({ translateX: Animated.Adaptable<number>; } | { translateY: Animated.Adaptable<number>; })[]; }' is not assignable to type 'false | AnimateStyle<ViewStyle> | RegisteredStyle<AnimateStyle<ViewStyle>> | RecursiveArray<false | AnimateStyle<ViewStyle> | RegisteredStyle<...> | null | undefined> | readonly (false | ... 3 more ... | undefined)[] | null | undefined'.
      Types of property 'transform' are incompatible.
        Type '({ translateX: Adaptable<number>; } | { translateY: Adaptable<number>; })[]' is not assignable to type 'AnimatedTransform'.
          Type '{ translateX: Adaptable<number>; } | { translateY: Adaptable<number>; }' is not assignable to type 'never'.
            Type '{ translateX: Animated.Adaptable<number>; }' is not assignable to type 'never'.ts(2769)

and also for example animated SVG path:

import {Path} from 'react-native-svg';
const AnimatedPath = Animated.createAnimatedComponent<typeof Path>(Path);

...

<AnimatedPath
      d={d}
      strokeDasharray={length}
      strokeDashoffset={interpolate(runner, { // these lines below
        inputRange: [0, 1],
        outputRange: [length, 1],
        extrapolate: Extrapolate.CLAMP,
      })}
      opacity={interpolate(runner, {.  // and these lines below
        inputRange: [0, 0.25, 1],
        outputRange: [0, 0.8, 1],
        extrapolate: Extrapolate.CLAMP,
      })}
      fill={fill}
      stroke={stroke}
      strokeWidth={strokeWidth}
    />

are showing following error message:

Type 'AnimatedNode<number>' is not assignable to type 'string | number | undefined'.
  Type 'AnimatedNode<number>' is not assignable to type 'number'.ts(2322)
index.d.ts(136, 3): The expected type comes from property 'strokeDashoffset' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<PathProps, any, any>> & Readonly<PathProps> & Readonly<...>'

Can anyone help me to make this work? Thank you so much!

[hastom]

Able to reproduce, issue appears in strict mode

[alexichristakis]

the patches do not seem to fix all of the errors in my project:

src/components/ColorPicker/Wheel.tsx:101:39 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(props: Readonly<AnimateProps<ViewStyle, ViewProps>>): View', gave the following error.
    Type '{ opacity: Animated.Node<number>; transform: { rotate: Animated.Node<number>; }[]; }' is not assignable to type 'false | AnimateStyle<ViewStyle> | RegisteredStyle<AnimateStyle<ViewStyle>> | RecursiveArray<false | AnimateStyle<ViewStyle> | RegisteredStyle<...> | null | undefined> | readonly (false | ... 3 more ... | undefined)[] | null | undefined'.
      Type '{ opacity: Animated.Node<number>; transform: { rotate: Animated.Node<number>; }[]; }' is not assignable to type 'AnimateStyle<ViewStyle>'.
        Types of property 'transform' are incompatible.
          Type '{ rotate: AnimatedNode<number>; }[]' is not assignable to type 'AnimatedTransform'.
            Type '{ rotate: Animated.Node<number>; }' is not assignable to type 'AdaptTransforms<PerpectiveTransform> | AdaptTransforms<RotateTransform> | AdaptTransforms<RotateXTransform> | ... 8 more ... | AdaptTransforms<...>'.
              Type '{ rotate: Animated.Node<number>; }' is not assignable to type 'AdaptTransforms<RotateTransform>'.
                Types of property 'rotate' are incompatible.
                  Type 'AnimatedNode<number>' is not assignable to type 'Adaptable<string>'.
                    Type 'AnimatedNode<number>' is not assignable to type 'AnimatedNode<string>'.
  Overload 2 of 2, '(props: AnimateProps<ViewStyle, ViewProps>, context?: any): View', gave the following error.
    Type '{ opacity: Animated.Node<number>; transform: { rotate: Animated.Node<number>; }[]; }' is not assignable to type 'false | AnimateStyle<ViewStyle> | RegisteredStyle<AnimateStyle<ViewStyle>> | RecursiveArray<false | AnimateStyle<ViewStyle> | RegisteredStyle<...> | null | undefined> | readonly (false | ... 3 more ... | undefined)[] | null | undefined'.
      Type '{ opacity: Animated.Node<number>; transform: { rotate: Animated.Node<number>; }[]; }' is not assignable to type 'AnimateStyle<ViewStyle>'.

101             style={[styles.container, animatedStyle]}

all remaining errors are related to rotation transforms