keyframes don't animate color

[jbrodriguez]

Description

keyframes should animate colors, but they currently won't

they do animated the transform, but not the color

import React from 'react';
import {StyleSheet} from 'react-native';
import Animated, {
  Keyframe,
  interpolateColor,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

const viewKeyframes = new Keyframe({
  0: {
    color: '#FF0000',
    transform: [{scaleX: 1}, {scaleY: 1}],
  },
  50: {
    color: 'white',
    transform: [{scaleX: 0.85}, {scaleY: 0.85}],
  },
  75: {
    color: '#FFFF00',
    transform: [{scaleX: 1.15}, {scaleY: 1.15}],
  },
  100: {
    color: 'red',
    transform: [{scaleX: 1}, {scaleY: 1}],
  },
});

export const Test = () => {
  return (
    <Animated.View style={styles.container}>
      <Animated.Text
        entering={viewKeyframes.duration(5000)}
        style={styles.text}>
        TEST
      </Animated.Text>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    // flex: 1,
  },
  text: {
    fontSize: 100,
    color: '#FF0000', // Initial color
  },
});

Steps to reproduce

1. copy snippet
2. run snippt

Snack or a link to a repository

https://snack.expo.dev/uhT9qHSEruNJJBCc2w_j6

Reanimated version

3.15.4

React Native version

0.76.0-rc.2

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Fabric (New Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

No response

Acknowledgements

Yes