Pass functional component to Animated.createAnimatedComponent

Question

If you try to pass functional (non react class) component to Animated.createAnimatedComponent it throws an error that says

Stateless functional components are invalid as children of createAnimatedComponent

Coming from an app that uses react hooks, basically all of my component are functional.

Is there a way / helper that can allow to pass these to createAnimatedComponent without wrapping them in Animated.View or even just View?

Here is an example of component that I want to make animatable

function MyComponent({ someProp }) {
  const [counter, setCounter] = useState(0);

  return (
    <View>
      <Text>{counter}</Text>
    </View>
  );

}

Answer 1

How about this HOC

export function withAnimated(
  WrappedComponent: React.ComponentType<any>,
): ComponentType {
  const displayName =
    WrappedComponent.displayName || WrappedComponent.name || 'Component';

  class WithAnimated extends React.Component {
    static displayName = `WithAnimated(${displayName})`;

    render(): React.ReactNode {
      return <WrappedComponent {...this.props} />;
    }
  }

  return Animated.createAnimatedComponent(WithAnimated);
}

Usage

export const AnimatedGradientButton = withAnimated(GradientButton);

Answer 2

As far as I can tell, your options are:

1) Change to class component

2) Wrap your component in a View which you then animate

3) Use react-native-animatable (or a solution similar as this offers): check here for a combination of the library and refs

4) Maybe a solution similar to this one would suit you better. Combination of useRef and useEffect.