Animated in react-native with expo-linear-gradient cause "createAnimatedComponent does not support stateless functional components"

🐛 Bug Report

Summary of Issue

Invariant Violation: createAnimatedComponent does not support stateless functional components; use a class component instead.

Reproducible Demo

import React, { Component } from 'react'
import { LinearGradient } from "expo-linear-gradient";
import { Animated } from "react-native";

class Project extends Component {
  render() {
    return (
       <AnimatedLinearGradient
          colors={["rgba(255,255,255, 0)", "rgba(255,255,255, 1)"]}
          style={{ ... }}
       />
    )
  }
}

export default Project

const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient); // This line will cause an error.

Version

"expo-linear-gradient": "~8.3.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz",

Expected Behavior vs Actual Behavior

I want to use Animated with LinearGradient, but it not work.

[brentvatne]

in https://github.com/expo/expo/commit/257e88788838257c4983e001fd3b31c8577f293b#diff-3e93ce91136d0e7afb9dc92f5d0c1fe6 we rewrote it to be a function component. it looks like we need to use React.forwardRef and pass the ref through to the native component

[cristian-milea]

found a temporary fix using this HOC for this if anyone else is looking

import React, { ComponentType } from "react";
import Animated from "react-native-reanimated";

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);
}

const AnimatedLinearGradient = withAnimated(LinearGradient);