Reanimated V2, interpolating colors

[sa8ab]

I used this branch to interpolate colors for reanimted2,

But I get the error of ReferenceError: Property '_hsv2rgb doesn't exist` .

Do you have any examples interpolating colors in v2? I mean like from #000222 to #ffffff

[kyle-ssg]

I ended up using the interpolateColours that's built into reanimated2 it seems to work well @sa8ab. I also had trouble with Redash's

import Animated, { interpolateColors } from "react-native-reanimated";
...
const backgroundColor= interpolateColors(animatedValue,{
  inputRange:[0,1],
  outputColorRange:["red","blue"]
})

[nandorojo]

Not sure if this question is too far from the original one or not, but does anyone know how to transition from one color to another using withSpring?

Such as:

import { useSharedValue, processColor, withSpring } from 'react-native-reanimated'

const color = useSharedValue('#000000')

const onPress = () => {
  color.value = withSpring(processColor('#ffffff'))
}

It seems like this causes flickering and doesn't actually transition between the colors.

[wcandillon]

@nandorojo this won't work, you probably want to spring on each color component and also use overshootClamping: true as an option of the spring.

[nandorojo]

Thanks for getting back to me!

you probably want to spring on each color component

Could you elaborate on what you mean by "each color component"? I'm hoping to spring a backgroundColor for one component.

[wcandillon]

if you interpolate in rgb space you need to interpolate the red the green the blue separatly

On Tue 8 Dec 2020 at 08:15, Fernando Rojo notifications@github.com wrote:

Thanks for getting back to me!

you probably want to spring on each color component

Could you elaborate on what you mean by "each color component"? I'm hoping to spring a backgroundColor for one component.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/wcandillon/react-native-redash/issues/303#issuecomment-740431467, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACKXVQCNOCL4RE5XFEUPXTSTXG7TANCNFSM4OYIJ7TQ .

[kyle-ssg]

Probably best to just spring using a number shared value and just interpolateColors on that value.

[nandorojo]

Okay got it, thanks for the insight.

I'm working on a framer-motion-like package based on Reanimated 2, and was hoping to just transition from one color value to the next whenever it changes. It seems like that isn't possible for Reanimated at the moment, so I'll have to leave it out for now.

[kyle-ssg]

Awesome! Would be keen on checking that out.