Element type is invalid: Check the render method of 'StyledComponent'. Problem with animation.

[steve-rodri]

To Reproduce:

Create a new project with:

npm create gluestack

choose "Mobile App" - Expo

you could name it "animation-test"

cd animation-test

Make sure to have the animation plugin installed:

npm i @gluestack-style/animation-plugin

Remove App.tsx and replace with the following:

import { AnimationResolver } from "@gluestack-style/animation-plugin";
import { createStyled } from "@gluestack-style/react";
import { GluestackUIProvider } from "@gluestack-ui/themed";
import { Motion } from "@legendapp/motion";

const styled = createStyled([new AnimationResolver()]);

export const StyledMotionView = styled(Motion.View, {});

export default function App() {
  return (
    <GluestackUIProvider>
      <StyledMotionView />
    </GluestackUIProvider>
  );
}

Start the app and observe the error:

nom start

[ankit-tailor]

Hey @steve-rodri, We have changed the API for animations. You can check out here.