withUniwind + Reanimated

[Alvi24]

What happened?

withUniwind wraps the style prop into a plain array, breaking Reanimated 4 AnimatedStyleHandle propagation

In withUniwind.native.tsx, withManualUniwind merges the className-generated styles with the incoming style prop by creating a plain JS array:

// withUniwind.native.tsx — withManualUniwind, lines 121-127
const existingStyle = props[propName] // AnimatedStyleHandle from useAnimatedStyle

if (existingStyle) {
acc.generatedProps[propName] = [styles, existingStyle] // ← plain array wrapping
return acc
}
This plain array is then spread onto the wrapped component:

<Component {...props} {...generatedProps} />
// Component receives: style={[{ color: '...' }, AnimatedStyleHandle]}
Reanimated 4 does not scan plain arrays recursively for AnimatedStyleHandle instances. It only recognises an AnimatedStyleHandle when it is the direct value of the style prop, not when it is nested inside a plain array. As a result:

The animated handle is effectively dead — Reanimated cannot attach the UI-thread animation to the underlying native view.
The style updates only happen when React reconciles (e.g., at the moment the animation is triggered, not per-frame), producing an instantaneous snap instead of a smooth transition.

Steps to Reproduce

1. Minimal reproduction

import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
import { Svg } from 'react-native-svg';
import { withUniwind } from 'uniwind';

const AnimatedSvg = Animated.createAnimatedComponent(Svg);
const StyledSvg = withUniwind(AnimatedSvg, {
style: { fromClassName: 'className' },
});

function Example() {
const progress = useSharedValue(0);
const animatedStyle = useAnimatedStyle(() => ({
opacity: progress.value,
}));

// animatedStyle is an AnimatedStyleHandle.
// withUniwind wraps it into [generatedStyles, AnimatedStyleHandle].
// Reanimated doesn't recognise the handle inside the array → no smooth animation.
return ;

Snack or Repository Link

https://stackblitz.com/edit/vitejs-vite-qg3b19nm?file=reproduction.ts

Uniwind version

1.6.4

React Native Version

0.83.6

Platforms

iOS

Expo

Yes

Additional information

• I've searched for similar issues in this repository and found none

[github-actions]

This issue has been automatically closed because it lacks a clear, minimal reproduction that we can use to verify the reported bug.

[Brentlok]

We can’t verify this as-is. The reproduction currently does not appear to include a complete, runnable example - it is missing the actual JSX/rendered usage needed to reproduce the behavior.

Also, this appears to be the same issue opened multiple times with essentially the same description. Please avoid creating duplicate issues, as this adds noise for maintainers and makes it harder to track the actual problem. If you have more details, a corrected reproduction, or new findings, please edit or comment on the existing issue instead of opening another one.