nativewind icon indicating copy to clipboard operation
nativewind copied to clipboard

v4 - animations either not working, or complete immediately

Open tconroy opened this issue 1 year ago • 1 comments

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.

tconroy avatar May 16 '24 01:05 tconroy

~~Using NativeWind v4, Our animations do not work as well. Instead, the animations complete immediately as if duration is zero. Here is an example component with the animation rules (eg, ease-in-out transition-all duration-500):~~

~~Our animation worked as expected when we were using NativeWind v2.~~

Edit: My bad, I incorrectly reported that animations do not work. If we run into an actual animation issue, I'll update this post.

@danstepanov, @marklawlor, Our application is currently using NativeWind v4.0.36. We are available to test any new NativeWind v4 features/fixes. Please let us know what the next steps are. Thank you!

recordsdna avatar Jul 25 '24 22:07 recordsdna

We are closing all pre-v4.1 issues now that v4.1 is released. If the problem is still happening with the latest v4.1, please open a new issue and reference this one in the description.

danstepanov avatar Sep 02 '24 23:09 danstepanov