"Animated styles don't follow the order in which they are specified in the style array."

[TheBlueFriend]

The docs clearly states that animated styles don't follow the order in which they are specified in the style array. However this wasn't true in version 3.10.1 and before (or as it seemed so). But somewhere between versions 3.10.1 and 3.16.0, there was a breaking change and I remember keeping the reanimated version fixed to 3.10.1 till now.

The question is if it is possible to replace the previous styles in the style array with the newer ones because that helps in maintaining the styles a lot. My core elements are built with animations and since it is a library, the elements are frequently extended with other reactive styles. This becomes an issue because the extended styles never gets applied as the core styles are always the last updated animated style which takes effect, according to the docs.

[MatiPl01]

But somewhere between versions 3.10.1 and 3.16.0, there was a breaking change and I remember keeping the reanimated version fixed to 3.10.1 till now.

Isn't that related to the migration from the Old Architecture to the New Architecture? Have you been maybe using the Old Architecture before and switched to the New Architecture on Reanimated 3.16.0? As far as I know, this is only a difference between react native architectures and approaches that Reanimated use and this shouldn't be related to specific Reanimated version.

The question is if it is possible to replace the previous styles in the style array with the newer ones because that helps in maintaining the styles a lot.

Unfortunately, it is not possible. This is how Reanimated on the New Architecture currently works. It always takes the latest changes and applies them on top of all previous changes. I know that it is cumbersome and should be improved.

[TheBlueFriend]

Isn't that related to the migration from the Old Architecture to the New Architecture? Have you been maybe using the Old Architecture before and switched to the New Architecture on Reanimated 3.16.0? As far as I know, this is only a difference between react native architectures and approaches that Reanimated use and this shouldn't be related to specific Reanimated version.

Yes, I looked back at the package.json file and that exactly was the cause. My react native version was 0.74.5 before and I had changed it to 0.76.5, which likely caused the issue.

Unfortunately, it is not possible. This is how Reanimated on the New Architecture currently works. It always takes the latest changes and applies them on top of all previous changes. I know that it is cumbersome and should be improved.

I see, thanks for the reply. I would appreaciate if you can fix this problem within the next year. You're doing a great job, the animations are super smooth even on low end devices. I can't wait to use Reanimated 4 with these new features!

[MatiPl01]

I would appreaciate if you can fix this problem within the next year

I will talk with other teammates about this. I personally would also like to have it working in a different way than it currently works but it might be too complex to get it working right.

[MatiPl01]

Hey. I just want to tell you that we had too many different topic to cover this one. I will try to raise the topic next week and see what we decide to do. I don't think we would be able to quickly fix this issue but rather we will plan it for the future.

[TheBlueFriend]

That's absolutely fine! I appreciate your importance to the issue. Don't worry and take your time. My animations are not urgent.

[MatiPl01]

Hey. I raised this topic but, unfortunately, there is much other ongoing work and we have no capacity to work on this now. Some people also think that this is an expected behavior and we don't want to follow the react-native's styles order, so I think we won't reach the agreement and change this behavior soon. For now, just keep in mind that the last updated animated style is the last applied and animated styles don't follow the order in which they are specified in the style array.

[TheBlueFriend]

Thanks for the update. So then I'm modifying my core elements as a work around solution. For now, I'm accepting the styles I want to animate as SharedValue props and using useDerivedValue() to keep the styles reactive to one variable. I'm usually just animating the colours according to user defined themes, so there are not many props to animate other than backgroundColor, color and borderColor. This is working pretty well and if Reanimated doesn't change their mind, I'm planning to create a specific wrapper component for this task. I will probably accept the style props as SharedValue props and create animated styles in the component, which I will then pass on to the direct child component. This can streamline the process and make the code maintainable. Making a component for this purpose also doesn't break the rules of React hooks and the component can simply update itself.