v4 - animations either not working, or complete immediately

[tconroy]

Describe the bug tailwind-style animations such as active:translate-x-0 or active:translate-y-0 don't seem to be working. Others, like active:opacity-75 work, but do not respect any animation duration.

To Reproduce Example component:

const Button = React.forwardRef<typeof Pressable, ButtonProps>(
  ({ label, ...props }, ref) => {
    return (
      <Pressable
        className={cn(
          "inline-flex items-center justify-center whitespace-nowrap rounded-base text-sm font-base text-black transition-all  disabled:pointer-events-none disabled:opacity-50",
          "translate-x-boxShadowX translate-y-boxShadowY border-2 border-black bg-main shadow-base active:translate-x-0 active:translate-y-0 active:opacity-75 active:shadow-none",
          "h-10 px-4 py-2",
          "duration-500",
        )}
        ref={ref}
        {...props}
      >
        {label && <Text>{label}</Text>}
      </Pressable>
    );
  },
);

Video:

https://github.com/marklawlor/nativewind/assets/1609336/471bd495-3920-4c4a-812d-c27ab19fe2f4

Expected behavior I expect the active:translate-x-0 active:translate-y-0 to apply, and the button to smoothly animate back.

Instead, the opacity changes, and the shadow is removed, but no duration is being applied.