'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