React-spring: [v9.0.0-rc.3] TypeScript types not compatible with latest @types/react (16.9.44)

[bengry]

🐛 Bug Report

A new version of @types/react recently came out which depends on [email protected], which in turn has better type definitions for CSS properties.
The latest [email protected] is incompatible with these types when trying to use the style prop on animated components, throwing this example error (I used the opacity property, but the same holds true for most other properties):

  Types of property 'opacity' are incompatible.
    Type 'SpringValue<number>' is not assignable to type '"initial" | "inherit" | "-moz-initial" | "revert" | "unset" | FluidValue<Globals, any> | undefined'.
      Type 'SpringValue<number>' is not assignable to type 'FluidValue<Globals, any>'.
        The types returned by 'get()' are incompatible between these types.
          Type 'number' is not assignable to type 'Globals'.ts(2322)

To Reproduce

Try to use the useTransition hook with it's returned callback, and render an <animated.div /> with the styles given by the callback (see repro link).

Expected behavior

There should not be a compile-time error for the style prop.

Link to repro (highly encouraged)

https://codesandbox.io/s/elegant-mclaren-39xuy?file=/src/App.tsx

Environment

• react-spring v9.0.0-rc.3
• react v16.13.1

[tbntdima]

Experiencing the same, what can be a temporary workaround until it's fixed?

[henrycity]

useSpring has the same error for me.

[iam4x]

@tbntdima

• you stick with @types/react ^16.9.43
• or you cast any to opacity in your components opacity: animationProps.opacity as any,

[mechanicMo]

having this issue as well. @iam4x can you (or anyone else) go into more detail on the work around please?

I see that a fix was released, but even though I'm on the latest version of react-spring I'm still having this issue

these are the bits of code I think are relevant

type AccordionContextValue = { accordionStyles: { maxHeight: SpringValue<string>; opacity: SpringValue<number>; transform: SpringValue<string>; }; clickHandler: () => void; titleRef: React.MutableRefObject<null>; };

const [accordionStyles, setAccordionStyles] = useSpring(() => ({ maxHeight: '0vh', opacity: 0, transform: 'scale(0)', }));

setAccordionStyles({ maxHeight: open ? '100vh' : '0vh', opacity: open ? 1 : 0, transform: open ? 'scale(1)' : 'scale(0)', });

<a.div style={accordionStyles} {...props}> {children} </a.div>

[GitSquared]

you stick with @types/react ^16.9.43

Does not seem to work here.

Example error, with useSpring and style={props}

components/button.tsx:287:6 - error TS2322: Type '{ x: SpringValue
; y: SpringValue; scale3d: SpringValue;
borderRadius: SpringValue; opacity: SpringValue<...>; }' i
s not assignable to type '{ alignContent?: "initial" | "end" | "ba
seline" | "inherit" | "start" | "center" | "-moz-initial" | "rever
t" | "unset" | "normal" | "space-around" | "space-between" | "spac
e-evenly" | ... 4 more ... | undefined; ... 786 more ...; matrix3d
?: readonly [...] | ... 1 more ... | undefined; }'.
  Types of property 'opacity' are incompatible.
    Type 'SpringValue' is not assignable to type '"initial
" | "inherit" | "-moz-initial" | "revert" | "unset" | FluidValue | undefined'.
      Type 'SpringValue' is not assignable to type 'FluidV
alue'.
        The types returned by 'get()' are incompatible between the
se types.
          Type 'number' is not assignable to type 'Globals'.

287                             style={cursorSpringProps}
                                ~~~~~

  node_modules/@types/react/index.d.ts:1766:9
    1766         style?: CSSProperties;
                 ~~~~~
    The expected type comes from property 'style' which is declare
d here on type 'IntrinsicAttributes & AnimatedProps<{ onChange?: (
(event: FormEvent) => void) | undefined; children?
: ReactNode; ... 253 more ...; ref?: RefObject<...> | ... 2 more .
.. | undefined; }> & { ...; }'

[aleclarson]

Fixed by fc286ea3b429d84cf20805c7ac7da4000cb00e8d (will be part of v9-rc.4)

[ElForastero]

Did someone try to pin the @types/react version?
Seems like resolutions with "/" in their names don't work with yarn.

    "resolutions": {
        "**/@types/react": "16.9.43"
    },

Would be nice to release these changes because it's impossible right now to work with RC3 without messing the codebase with any types.

[MeloncholyShiro]

How to fix this stuff of 9.0.0-rc-3?