React-native-reanimated: Error when use useAnimatedStyle with interpolateColor

[hoangtrucit]

Description

I use useAnimatedStyle with interpolateColor, it's make exception

Screenshots

Snack or minimal code example

const Dot: React.FC<{
  index: number;
  currentIndex: Animated.SharedValue<number>;
}> = ({ index, currentIndex }) => {

  const style = useAnimatedStyle(() => {
    return {
      backgroundColor: interpolateColor(
        currentIndex.value,
        [index - 1, index, index + 1],
        ["#DDE2E9", "#ABB5C4", "#DDE2E9"],
      ),
    };
  });

  return (
    <Animated.View
      style={[
        {
          width: 10,
          height: 10,
          borderRadius: 10,
        },
        style,
      ]}
    />
  );
};

Package versions

• React: 16.13.1
• React Native: 0.63.3
• React Native Reanimated: 2.0.0-alpha.8
• NodeJS: 12.13.1

[kyle-ssg]

This is either a new regression or we have to start processing colours differently, this does not happen in alpha 7 but does in 8.

[vamshi9666]

try this with processColor function exported from 'react-native'.

example: https://github.com/software-mansion/react-native-reanimated/issues/1053#issue-669587466

[kyle-ssg]

Hey @vamshi9666 I'll have a check but pretty sure I have been, had a few animated colour components in alpha 7 that used processColor from react-native that now throw this error in 8.

[karol-bisztyga]

Hi!
This worked for me without any problems.
Have you tried yarn start --reset-cache after upgrading reanimated version?

@vamshi9666 processColor in reanimated is more or less a workletized version of RN's processColor so if you work on UI thread(like in useAnimatedStyle) you should go for reanimated's version.

[hoangtrucit]

Hi @karol-bisztyga

I just reinstall with the latest build and it's still like that. I use console but this line always get an empty object

https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Colors.js#L300

[piaskowyk]

Hi @hoangtrucit
I tried to reproduce your issue but I wasn’t able to do this because it worked for me also. I think that the problem may be in other related components.

Could you give me more example code or a link to a repository?
Could you also show me the rest of errors? - because on screenshots there is more than one error.

just for sure you can run: npm cache clean --force

[kyle-ssg]

Hey I'll try to free up some time and help out here with replication, side project wise interpolating colours is a priority of mine.

[hoangtrucit]

this issue is resolved with version 2.0.9

[a-eid]

@hoangtrucit is there a 2.0.9 version ?

[piaskowyk]

I think that it mean 2.0.0-alpha.9 but today we released new version 2.0.0-rc.1 and I recommend use newer version.

[mhjey]

I still get this error and I am using 2.0.0-rc.0

if I do the following:
```
const colors = useAnimatedProps(() => {
const color1 = interpolateColor(
graphHeiht.value,
[0, 1, 2, 3, 4, 5],
['#A1D2CE', '#78CAD2', '#62A8AC', '#5497A7', '#50858B', '#BBB09B']
);

const color2 = interpolateColor(
  graphHeiht.value,
  [0, 1, 2, 3, 4, 5],
  ['#A1D2CE', '#78CAD2', '#62A8AC', '#5497A7', '#50858B', '#BBB09B']
);

return [color1, color2];

});
```

[piaskowyk]

@mhjey Try to use 2.0.0-rc.1 because I fixed this in PR: #1504