Typescript type error when using interpolateColors

Description

Typescript displays the following error message when using interpolateColors on the color property of an Animated.Text Component:

No overload matches this call.
  Overload 1 of 2, '(props: AnimateProps<TextStyle, TextProps> | Readonly<AnimateProps<TextStyle, TextProps>>): Text', gave the following error.
    Type '{ color: Animated.Node<number>; }' is not assignable to type 'StyleProp<AnimateStyle<TextStyle>>'.
      Types of property 'color' are incompatible.
        Type 'AnimatedNode<number>' is not assignable to type 'string | unique symbol | AnimatedNode<string | unique symbol | undefined> | undefined'.
          Type 'AnimatedNode<number>' is not assignable to type 'AnimatedNode<string | unique symbol | undefined>'.
  Overload 2 of 2, '(props: AnimateProps<TextStyle, TextProps>, context: any): Text', gave the following error.
    Type '{ color: Animated.Node<number>; }' is not assignable to type 'StyleProp<AnimateStyle<TextStyle>>'.
      Types of property 'color' are incompatible.
        Type 'AnimatedNode<number>' is not assignable to type 'string | unique symbol | AnimatedNode<string | unique symbol | undefined> | undefined'.
          Type 'AnimatedNode<number>' is not assignable to type 'AnimatedNode<string | unique symbol | undefined>'

Steps To Reproduce

1. Create a new react component with typescript
2. Add an animation
3. Use interpolateColors to change the (background) color of an animated component

Snack or minimal code example

import React from 'react';
import Animated, { interpolateColors, Value } from 'react-native-reanimated';

export default class ReanimatedTest extends React.Component {
  state: { x: any };

  constructor(props: any) {
    super(props);
    this.state = {
      x: new Value(0),
    };
  }

  render() {
    return (
      <Animated.Text
        style={{
          color: interpolateColors(this.state.x, {
            inputRange: [0, 1],
            outputColorRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)'],
          }),
        }}
      >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos,
        similique?
      </Animated.Text>
    );
  }
}

Package versions

• React: 16.13.1
• React Native: 39.0.3
• React Native Reanimated: 1.13.0

[wilq32-pwitkowski]

For anyone having problem with this, temporary solution might be to interpolateColors(this.state.x, { inputRange: [0, 1], outputColorRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)'], })

go with

interpolateColors(this.state.x, { inputRange: [0, 1], outputColorRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)'], }) as any

Not perfect, but until it’s fixed it just makes TS ignore this error.

[chj-damon]

https://github.com/software-mansion/react-native-reanimated/pull/1467