createAnimatedComponent should support stateless functional components [React Hooks]

[xzilja]

For Discussion

I am starting to play with hooks in react native following guide posted by hramos
#21967 (comment)

Off the bat I got an error

createAnimatedComponent does not support stateless functional components; use a class instead.

This was as a result of me converting my simplest components (that don't rely on anything related to hooks) to functions and I assume will be an issue further down the road since vision of react for the future is to use less classes and more function components.

[hramos]

I don't think this requires a new issue, you can comment on the original issue itself.

[MrLoh]

@hramos this is still an issue in 0.59.1, can this be reopened?

[adkenyon]

@MrLoh It looks as though createAnimatedComponent requires a ref (which functional components don't provide). You can get around the issue by using React.forwardRef with your function component.

[MrLoh]

yeah, that was an obvious solution. Should have thought of that myself

[shubhamdeol]

@MrLoh Can you please explain how to did this, using forwardRef ?

[MrLoh]

@shubhamdeol

const MyFunctionalComponent = React.forwardRef((props, ref) => <View ref={ref}> ... );

then you can do

createAnimatedComponent(MyFunctionalComponent);

[shubhamdeol]

Actually. The component which is stateless is inside library. Can I pass ref to that without forking the library code?

[MrLoh]

Does the library component accept a ref prop? Not sure wether things work if Animated doesn't have a ref, you might have to ask the library maintainers to add a ref prop.

[shubhamdeol]

Okay, Thanks
I will do this.

[tberman]

I just tried this w/ a forwardRef and received the same error, and looking at the code of how forwardRef works, it is unclear it would pass this check. Does the forwardRef trick still work for people running on 16.8?