react-spring: Property 'children' does not exist ... on animated(View) react-native components.

🐛 Bug Report

I guess this is a typescript issue. When wrapping a react-native component like View with animated, then typescript complains about that children is not a valid property for the component. The app works anyway, so this should be only a typescript thing.

Probably somehow related to https://github.com/react-spring/react-spring/issues/508 but the merge did not fix the issue using RN.

To Reproduce

const HelloWorld = () => {
  const AnimatedView = animated(View);
  
  // error occurs here
  return <AnimatedView>Hello World</AnimatedView>
}

Expected behavior

The wrapped view should copy the original components properties.

Environment

react-spring v8.0.27
react-native v0.59.8

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 15 (6 by maintainers)

Most upvoted comments

There’s a weird solution to this issue. Simply write:

const AnimatedText = animated<React.ElementType<React.PropsWithChildren<TextProps>>>(Text)

But this is an insane workaround. I better move to JavaScript.

UPDATE:

It’s not necessary to use React.PropsWithChildren. You can simply write:

const AnimatedText = animated<React.ElementType<TextProps>>(Text)

and that’s a reasonable approach.

gchumillas on Mar 7, 2020

Same issue on TypeScript 4.1.3 with @react-spring/native.

kennethnym on Dec 30, 2020

TypeScript 3.8.3

Being honest with you, i didn’t know that react-spring had a specific package for react-native. I think it would be better if it’s been specified in documentation.Will try now with @react-spring/native

viniaxt on Jul 2, 2020