Reanimated CSS transitions break color updates

[believer]

What happened?

When using Unistyles together with one of Reanimated's CSS transitions color changes don't update as expected. I've updated my repro repo from #980 with the bug.

Note: It does work if we bring in the colors using useUnistyles inside the component, but we would like to avoid that if possible to get all of Unistyles no-re-rendering sweetness 😄

<Animated.View
  style={[
    styles.checkbox(checked),
    {
      transitionProperty: ['backgroundColor'],
      transitionDuration: 1000,
    },
  ]}
/>
<Animated.View style={styles.checkbox(checked)} />

On load	Check boxes	Change theme

https://github.com/user-attachments/assets/a35810d3-024f-43b5-b556-076e61fc9af8

Steps to Reproduce

1. Click “Check box”. The bottom box changes color instantly (not using CSS transitions), the top one changes color over one second.
2. Click “Change theme”. Only the bottom check box changes color, and the top one still has light mode color.
3. Clicking “Check box” again makes the colors correct.

Snack or Repository Link (Optional)

https://github.com/believer/unistyles-repro

Unistyles Version

3.0.15

React Native Version

0.81.4

Platforms

Android, iOS

Expo

No

Additional information

• [x] I use recommended version of react-native-nitro-modules compatibility table
• [x] I've searched for similar issues in this repository and found none
• [x] I double-checked that my issue was not covered in documentation

[jpudysz]

Two things to mention from my investigation:

1. ~Reanimated spreads the style property, which is causing ownership issues (I need to create an issue/fix in their repo)~
2. It seems that Reanimated forces its own updates for CSS transitions, even though Unistyles is pushing the correct values to ShadowTree

So, there is nothing I can do on my side. Screenshot below shows that Unistyles reports same color (int) to your checkboxes:

[believer]

Interesting, thanks for digging into it!

I would happily create an issue in Reanimated, but I think you have way more knowledge about the underlying issue 😅

[jpudysz]

Hey @believer, I opened an issue in the Reanimated repo and they confirmed that transition colors are fixed to the Reanimated state and can’t be modified right now. Unless they expose this API in the future, we’ll need a workaround. I’ve figured out one:

const { rt } = useUnistyles()

<Animated.View
	key={rt.themeName} // <-- change key based on rt.themeName
	style={[
		styles.checkbox(checked),
		{
			transitionProperty: ["backgroundColor"],
			transitionDuration: 1000,
		},
	]}
/>

[believer]

Thanks for fighting for a good API! This is a smart workaround in the meantime.