transition-all doesn't work with group-active: on iOS

[mtbaqer]

What happened?

Hey I have the following code

export default function GameButton({ label, variant, disabled, onPress }: GameButtonProps) {
  return (
    <Pressable
      disabled={disabled}
      onPress={onPress}
      className="group box-content h-[60px] min-h-[60px] justify-end transition-all duration-100"
    >
      <View
        className={cn(
          "h-[60px] overflow-hidden rounded-[8px] border-2 bg-blue-400",
          "shadow-[0px_3px_0px_0px_rgba(0,0,0,0.20)] transition-all duration-100 group-active:h-[50px]",
        )}
      >
        <View
          className={cn(
            "h-[48px] items-center justify-center rounded-[6px] bg-linear-to-b",
            "shadow-[inset_0px_2px_0px_0px_rgba(255,255,255,0.40),inset_0px_-2px_0px_0px_rgba(0,0,0,0.20)]",
          )}
        >
          <Text className={cn("select-none", disabled && "opacity-30")}>{label}</Text>
        </View>
      </View>
    </Pressable>
  );
}

The animation of transition-all duration-100 group-active:h-[50px] on the first <View> seems to be working on web but not on iOS. The height does change, but without the animation.

I realize that this code rewritten without the need of group-active but the point still stands that the animation is not working on iOS.

Steps to Reproduce

Using the code provided above ^

Snack or Repository Link (Optional)

No response

Uniwind version

npm:uniwind-pro@latest

React Native Version

0.85.3

Platforms

iOS

Expo

Yes

Additional information

• I've searched for similar issues in this repository and found none
• I am a Uniwind Pro user

[jpudysz]

Hey, thanks for report. Unfortunately this won't work and isn't something we plan to support.

Reason: group-* variants delegate descendant style updates to Uniwind's C++ engine. Descendants get mutated via direct shadow tree commits, not React re-renders. Transitions on the other hand live entirely on the Reanimated side, and there's no way to communicate with Reanimated from C++.

To make transitions fire on a group-active: descendant, the descendant would need to re-render so JS can hand the new style to Reanimated's C++ side. That re-render never happens with Uniwind Pro - the whole point of the C++ engine is to skip JS re-renders for these state changes.

The only path to support this would be dropping Reanimated and building our own animation engine on top of the Uniwind C++ core. Not on the roadmap.

Workaround: as you noted, rewrite without group-active - put the active variant directly on the Pressable (or use a state-driven Reanimated value) so the transition lives on a component that actually re-renders.