plus1tv / react-anime

✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

Home Page:https://codepen.io/collection/nrkjgo/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TypeScript errors in 2.5.3 [Help Wanted]

stephenwil opened this issue · comments

Hi,
Using create-react-app-ts, even a very basic

or
<Anime delay={(e, i) => i * 100}
scale={[.1, .9]}>



Fails on typescript errors:
ren?: ReactNode; }> & Rea...'.
Type '{ value: any; translateX: any; translateY: any; rotate: any; scale: any; opacity: any; color: any...' is not assignable to type 'Readonly'.
Types of property 'children' are incompatible.
Type 'Element' is not assignable to type 'any[]'.
Property 'find' is missing in type 'Element'.

Thanks for reporting this @stephenwil, weird to see this, maybe somethings changed with TypeScript 2.2.1 vs 2.5.3, I'll look into it. ;)

any update on that issue?

@stephenwil did you ever get to the bottom of this?

This worked for me to fix all type errors. Just import relevant type and manually cast. I assume this would work for entire prop obj as well.

import Anime, { AnimeValue } from 'react-anime';
...

const wiggleFrames = [
    { value: xAmp * -1 },
    { value: xAmp },
    { value: xAmp / -2 },
    { value: xAmp / 2 },
    { value: 0 }
  ] as AnimeValue[];
...

<Anime duration={325} easing="easeInOutSine" translateX={inputError ? wiggleFrames : [0, 0]}>
    {amount}
</Anime>