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

[benvp]

🐛 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

[aleclarson]

Already fixed in v9

npm install react-spring@next

[aleclarson]

This actually isn't fixed in the latest beta, but it will in the next beta.

[JackCA]

I'm running into this as well.

I'm noticing https://github.com/react-spring/react-spring/issues/642 is open and am assuming that the next beta refers the beta after 34.

Would it be possible to push the fixes independent of the other changes that have accumulated over the past 5 months?

[hieunguyendut]

@benvp Hi there, Can you able to wrap text with View component in React? As far as I know it can't be.
change:

const HelloWorld = () => {
  const AnimatedView = animated(View);

  // error occurs here
  return <AnimatedView>Hello World</AnimatedView>
}

to

const HelloWorld = () => {
  const AnimatedText = animated(Text);

  // error occurs here
  return <AnimatedText>Hello World</AnimatedText>
}

[benvp]

I'm not sure if I understand what you mean. Can you try to describe this a bit more? The error also occurs if I wrap any react-native component inside animated

[gchumillas]

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.

[aleclarson]

Please try with the latest canary. 👍

[aleclarson]

Fixed in 9.0.0-rc.2 (#985)

[viniaxt]

I'm still having the same error. Tried to use 9.0.0-rc.2 and had some strange errors in react native:

1. react spring dependency asked for react-dom, wich that doesn't make sense in react native

2. Property children does not exist...

Even adding react-dom dependency to our project, we still have error numbe 2.

[aleclarson]

@viniaxt TypeScript version plz

The react-spring package contains every supported platform. You can use @react-spring/native to avoid the peer dependency complaints.

[viniaxt]

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

[CyrusZei]

it is a little bit sad that there is not much documentation on the react-native part 😞 As soon as I understand how this works with React-native I will make a PR to the documentation and add each step.