nativewind
nativewind copied to clipboard
v4 - animations either not working, or complete immediately
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.
~~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!
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.