Use Functional component as Animated Component

links: React Native MOC

---

In React Native at this moment Animated.createAnimatedComponent can be used only with class based components but not with functional components. In order to use a functional component with Animated, you can write an HOC something like this

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

const AnimatedGradientButton = withAnimated(GradientButton);

where GradientButton is a functional component

---

tags: react-native