error if i used typescript

[RoniJackVituli]

No overload matches this call. Overload 1 of 2, '(props: AnimatedProps | Readonly<AnimatedProps>): Animated', gave the following error. Type '{ children: Element; animationIn: "bounceInLeft"; animationOut: "fadeOut"; isVisible: true; Read: true; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Animated> & Readonly<AnimatedProps>'. Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Animated> & Readonly<AnimatedProps>'. Overload 2 of 2, '(props: AnimatedProps, context: any): Animated', gave the following error. Type '{ children: Element; animationIn: "bounceInLeft"; animationOut: "fadeOut"; isVisible: true; Read: true; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Animated> & Readonly<AnimatedProps>'. Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Animated> & Readonly<AnimatedProps>'.

[lkwr]

Should be fixed if #47 get merged.

But you can temporary create the type your own:

Create a types.d.ts file in your source folder and put in the following:

// types.d.ts
import { ReactNode } from "react";

declare module "react-animated-css" {
  export interface AnimatedProps {
    children: ReactNode;
  }
}

And it should works!

[RoniJackVituli]

Thank you! It's work. Maybe to add this solution to the readme? Because a lot of people work with typescript. 😀

[gre-dev]

Should be fixed if #47 get merged.

But you can temporary create the type your own:

Create a types.d.ts file in your source folder and put in the following:

// types.d.ts
import { ReactNode } from "react";

declare module "react-animated-css" {
  export interface AnimatedProps {
    children: ReactNode;
  }
}

And it should works!

If doesn't work..

After creating the types.d.ts file in your root directory and putting the code mentioned by @lkwr, just make sure that your tsconfig.json contains the created file in the files property:

Sample 👇🏻:

{
  "files": [
    "./types.d.ts"
  ],
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src",
    "product.json"
  ]
}

[Drakenwolf]

I have the same problem, i have a workaround but the Animated component must be able to receive childrens.