React-native-reanimated: color rgb opacity bug in reanimated

[nomi9995]

```
const backgroundColor = interpolate(this.translateY, {
        inputRange: [0, position.y],
        outputRange: [Animated.color(0, 0, 0, 1), Animated.color(0, 0, 0, 0)]
    });

```
i am using black color with opacity but it show all the color during interpolate
you can check reporducable bug on my snack
https://snack.expo.io/@nomi9995/reanimatedcolorbugexample

[nomi9995]

@kmagiera can you help me?

[KakarN]

I have worked with it Animated.color() in the past, however, I have implemented it differently than yours.

const backgroundColor = color(1, 1, 1, interpolate(translateY, {
                inputRange: [0, HEIGHT],
                outputRange: [1, 0],
                extrapolate: Extrapolate.CLAMP
            }))

Hope this helps.

[nomi9995]

@KakarN thanks it is working but it should working same as core animated

[CatapultJesse]

Getting the same thing when trying to use multiple colours

[nomi9995]

yeah there is a bug in this library and @kmagiera should fix it

[CatapultJesse]

yeah there is a bug in this library and @kmagiera should fix it

Have a bit of respect for the thousands of lines of free code you are getting.

[nomi9995]

sorry i did not mean this. i just mension. i love @kmagiera for this awesome library <3

[Fantasim]

If like me you meet this non understanding thing on the lib because of the different way of doing compared to the original Animated library, I just found this code which helped me a lot to understand how it works with colors on the lib.

https://github.com/wcandillon/react-native-redash/blob/master/src/Colors.ts#L136

[jeremybarbet]

Any news about that?

It also looks like animating tintColor is an issue, and doesn't work as expecting. I try to look around the documentation and other issues, but didn't find anything related. Is it a known issue?

[kmagiera]

Reanimated does not support string based color interpolation. There are some sample demos under Example folder demonstrating how color interpolation should be done with reanimated. Also this comment by @KakarN should work https://github.com/software-mansion/react-native-reanimated/issues/262#issuecomment-489107824

Have you tried that approach @jeremybarbet ? What does it mean it does not work as expected? What is the expected behavior to you? Would appreciate some more details on what have you tried, what did not work and what is the current behavior vs expected behavior to you. Also providing some code samples or ideally a small reproducable app as a separate repo or expo snack would help a ton.

[jeremybarbet]

I tried to interpolate with a value from 0-1 two different colors, using color function from reanimated [color(0, 0, 0), color(255, 255, 255)]. From what I saw with the types of the color function, it should take (r/g/b/a?). Is that the correct way to do it? https://github.com/software-mansion/react-native-reanimated/issues/262#issuecomment-489107824 works fine if you only want to animate the alpha channel.

https://b.ueno.is/GGuADxnE

[kmagiera]

It is not the corret way. Reanimated does not support this interpolate syntax where you put colors into the output array. Please follow the syntax from https://github.com/software-mansion/react-native-reanimated/issues/262#issuecomment-489107824 – that is, you should use a color node that should use interpolate for each of the color component (RGBA) you want to animate. Also note that RGB components need to be integers so you should round them if you decided to use linear interpolation. @Fantasim posted great example that illustrates this well: https://github.com/wcandillon/react-native-redash/blob/master/src/Colors.ts#L136

[elie222]

Updated link:
https://github.com/wcandillon/react-native-redash/blob/master/packages/core/src/Colors.ts

[jakub-gonet]

I think this issue has been answered, so I'm closing it.

In the 2.0.0 alpha version we have interpolateColors helper, so you can use that to do it as well.