:initial doesn't animate when placed in sx

[artfb]

Description

Animation doesn't fire when used in sx prop

CodeSandbox/Snack link

No response

Steps to reproduce

Initial animation doesn't fire when used in sx prop, component just shows up. It animates properly when used in styled(). Exit animation works fine in both cases.

It broke somewhere between versions 1.0.45 (works fine) and 1.0.54 (doesn't). Edit: 1.0.53 is OK.

Additional question: is it possible to pass prop do styled function?

<AnimatePresence>
  {isOpen && (
    <Component
      sx={{
        ':initial': { x: 0 - width },
        ':animate': { x: 0 },
        ':exit': {
          x: 0 - width,
        },
       ':transition': {
          // @ts-expect-error types
          type: 'timing',
          duration: ANIMATION_DURATION_MS,
        },
    }} />
  )}
</AnimatePresence>

export const ComponentStyled = styled(AnimatedView, {
  (...other styling props)

  ':initial': { x: -400 },
  ':animate': { x: 0 },
  ':exit': {
    x: -400,
  },
  ':transition': {
    // @ts-expect-error types
    type: 'timing',
    duration: ANIMATION_DURATION_MS,
  },
});

gluestack-ui Version

1.0.54

Platform

• [X] Expo
• [ ] React Native CLI
• [ ] Next
• [X] Web
• [ ] Android
• [X] iOS

Other Platform

No response

Additional Information

No response

[DaminiPandey]

@artfb Thanks for reporting the issue, we'll have a look.