'React Native interpolate background color not working with rgba alpha transparency
I want to interpolate the backgroundColor of a View.
This is my animation:
const [myAnimation] = useState(new Animated.Value(0));
const setInteraction = (focused) => {
if (focused) {
Animated.timing(myAnimation, {
toValue: 1,
duration: 160,
useNativeDriver: false,
}).start();
}
if (!focused) {
Animated.timing(myAnimation, {
toValue: 0,
duration: 160,
useNativeDriver: false,
}).start();
}
return;
};
And here is how I use it to interpolate the backgroundColor:
<Animated.View
style={{
backgroundColor: myAnimation.interpolate({
inputRange: [0, 1],
outputRange: [
'rgba(27,43,89,0.06)',
'rgba(255,255,255,1)',
],
}),
}}
>
{...}
</Animated.View>
The problem is that since the initial color has a 6% opacity it doesn't work 100% as I expected. It goes from the initial color to an intermediate one and finally ends up in the target color (white):
https://recordit.co/czrVd5Q38I
If the color was 100% opaque it will work, for example:
<Animated.View
style={{
backgroundColor: myAnimation.interpolate({
inputRange: [0, 1],
outputRange: [
'rgba(27,43,89,1)',
'rgba(255,255,255,1)',
],
}),
}}
>
{...}
</Animated.View>
https://recordit.co/HSvJNV4ldg
Any ideas? I've tried playing with the inputRange property but still doesn't work.
UPDATE:
I've realised that the problem is the white color as a target. If I try playing with the alpha value of the same initial / target color it works:
outputRange: [
'rgba(27,43,89,0.06)',
'rgba(27,43,89,0.1)',
],
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
