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
- 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',
},
});
- 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.
- Remove the animation prop and notice that the button element is rendered properly.
- 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:
animationprop breaks customizingtagprop- Animation doesn’t work if
animateOnlyis 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)
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
focusVisibleStylestyle: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