tamagui: `animation` prop breaks some behaviours

Current Behavior

I have encountered some issues with rendering HTML elements and their styles when the animation prop is provided.

Expected Behavior

No response

Tamagui Version

"tamagui": "1.89.20"

Platform (Web, iOS, Android)

Web

Reproduction

  1. Create a styled component with the following configuration:
const Test = styled(View, {
  tag: 'button',
  animation: 'fast',
  backgroundColor: 'red',
  width: 50,
  height: 50,
  hoverStyle: {
    backgroundColor: 'blue',
  },
});
  1. Note that the Test component was rendered as a div element instead of a button, and the animation of the backgroundColor doesn’t work at all.
  2. Remove the animation prop and notice that the button element is rendered properly.
  3. Restore the animation prop and additionally provide animateOnly: [‘backgroundColor’], and notice the animation works fine now
const Test = styled(View, {
  tag: 'button',
  animateOnly: ['backgroundColor'],
  animation: 'fast',
  backgroundColor: 'red',
  width: 50,
  height: 50,
  hoverStyle: {
    backgroundColor: 'blue',
  },
});

So there are 2 issues:

  • animation prop breaks customizing tag prop
  • Animation doesn’t work if animateOnly is not explicitly provided


### System Info

_No response_

About this issue

  • Original URL
  • State: open
  • Created 4 months ago
  • Reactions: 1
  • Comments: 15 (11 by maintainers)

Most upvoted comments

I have a fix I think for the tag one at least coming soon.

@arekkubaczkowski there is a PR for that

It seems like this issue also impacts on the recently added pseudo focusVisibleStyle style:

https://github.com/tamagui/tamagui/pull/2278#issuecomment-1976386101

cc @natew @TheEhsanSarshar

We should document the tag issue - it’s a limitation of the animation drivers using React Native Web.

Im facing a similar problem.

When i remove the animation, XStack works perfectly in the horizontal direction, but if I put it back on, the direction is wrong.

https://github.com/tamagui/tamagui/assets/7414393/98a9f38e-c8cf-4ddb-8b6a-981aaf3cd1b7