Animating colors is very glitchy

[matewka]

Description

Animating color transitions with Animated API causes issues. Depending on what type of component is used, the issue is different:

1. When using native components, e.g. Animated.View the color is flickering instead of smoothly animating (see square box in the code example).
2. When using a custom component wrapped with Animated.createAnimatedComponent() the issue is related to state persistence (see pin icons in the code example). It seems like the color change is applied after another state change occurs in the parent component.

See screen recording for details. The recording comes from an Android simulator but I can confirm the issue also appears on an iOS simulator and a real Android device. I can also confirm that the problem cannot be related to the Expo Go app itself as I discovered the problem originally in my own app which runs on Expo v54 and react-native v0.81.5, run on both iOS/Android emulators/devices from development builds.

Link to the reproducible Snack: https://snack.expo.dev/@matewka/animated-api-test

In the provided example I've added two pin icons from two separate packages (one from @expo/vector-icons, one from react-native-svg) to eliminate the possibility of a 3rd party library causing the issue.
It doesn't matter to me which library I would use by the end of the day, I just need a pin icon that can have an animated color.

Steps to reproduce

1. Install the app from the provided link: https://snack.expo.dev/@matewka/animated-api-test
2. Click on the square box to see the flickering color transition. The expected behaviour is a smooth transition from black to red color
3. Click on one of the pin icons. You will see no difference in color. The status next to the icon will change from "off" to "on".
4. Click on something else, for example the square box. This causes the state change and the entire App component to rerender. This time the pin icon is updated with the correct color.

React Native Version

0.81.5

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

The code was run in snack.expo.dev. Unable to run the command there.

Stacktrace or Logs

There are no logs.

MANDATORY Reproducer

https://snack.expo.dev/@matewka/animated-api-test

Screenshots and Videos

Screen recording:

Screen.Recording.2026-01-30.at.16.15.10.mov

[react-native-bot]

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

[react-native-bot]

Warning

Could not parse version: We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.76.2.

[matewka]

@react-native-bot the version of react-native is 0.81.5

[badalsaibo]

No idea if native color interpolation through native driver is supported or not. The JS side seems to be working fine when we turn off useNativeDriver