Can createAnimatedComponent accept functional components?

[wcandillon]

Currently, there is a check if the component passed is functional or not. However, I couldn't detect any code that relies on the component being a class component. Is it because of the ref? Then could the check be refined maybe?

[jakub-gonet]

The biggest blocker with using functional components is that they don't have this.forceUpdate(); method, that we use in createAnimatedComponent. I'm not aware of any replacement for this (is changing key prop equivalent to forcing update?) for this method.

\cc @Szymon20000

EDIT: changing keys removes entire subtrees in the RN and calling forceUpdate runs a diffing algorithm as usual, so they're not interchangeable.

[terrysahaidak]

I used to have something like that

const useForceUpdate = () => {
  const [,setState] = useState(false);

  return useCallback(() => {
    setState(value => !value);
  }, []);
}

Works perfectly.

Improved version would use integer incremention for each call.

[wcandillon]

Thanks for that @jakub-gonet I did notice it afterward. Let's say that I want to animate a prop myself (just as an educational exercise, for instance, I would like to explore the idea of animating opengl shaders). How would I go about it?

[jakub-gonet]

I want to animate a prop myself

I don't quite follow, do you want to make prop animated it on the UI thread without re-rendering the component? E.g. basically what useAnimatedProps does?

[goleary]

Here's a workaround I came up with to get createAnimatedComponent to work with a functional component (from another library that I didn't have control over the definition of):

class BlurhashComponent extends React.Component<BlurhashProps> {
  constructor(props: BlurhashProps) {
    super(props);
  }
  render() {
    return <Blurhash {...this.props} />;
  }
}
const ReanimatedBlurhash = Reanimated.createAnimatedComponent(BlurhashComponent);

In this example Blurhash is a functional component.

If this does indeed work as well as it seems to then perhaps this could be rolled into react-native-reanimated to enable accepting functional components.

[mrousavy]

hey that's my library!

[mrousavy]

Blurhash is a class component though. Fixed that in an update a while ago ;)

[ashuvssut]

ooh so we should create animated blur hash like this? Or is it fixed as you said (i.e animated by default?)

[helixbass]

Per the above, here's a generic createAnimatedFunctionComponent() helper for wrapping functional components in createAnimatedComponent():

import {FC, ComponentClass} from 'react'
import Animated from 'react-native-reanimated'

const wrapFunctionComponent = <TProps,>(
  Component: FC<TProps>
): ComponentClass<TProps> =>
  class extends React.Component<TProps> {
    constructor(props: TProps) {
      super(props)
    }

    render() {
      return <Component {...this.props} />
    }
  }

export const createAnimatedFunctionComponent = <TProps,>(
  Component: FC<TProps>
) => Animated.createAnimatedComponent(wrapFunctionComponent(Component))

[mrousavy]

The problem with this is that you don't have a ref to the native view (if it's a native view). Not sure if REA needs this, haven't looked at the code yet

[ashuvssut]

This solution works for animated styling... but it does not work when I was passing animated props (in animatedProps prop). I created the animated props using useAnimatedProps

Also the TS errors are confusing. I could not figure out how to fix it

So, I am using your solution with the following modifications:-

import Animated from "react-native-reanimated";
import { Text } from "react-native-paper";

const DummyReText = Animated.createAnimatedComponent(Text);
type TReText = typeof DummyReText; // << I AM USING THIS TO GET THE TYPE FOR ReText
export const ReText = withAnimated(Text) as unknown as TReText; // << EXPORT Animated Component WITH TYPE ASSERTION🥲

function withAnimated(Compo: any) {
  const displayName = Compo.displayName || Compo.name || "Component";

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

    override render() {
      return <Compo {...this.props} />;
    }
  }

  return Animated.createAnimatedComponent(WithAnimated) as unknown;
}

[franco-marini]

I improved this solution by fixing the type error of the WrappedComponent not receiving the props as expected.

import React from 'react';
import Animated from 'react-native-reanimated';

export function withAnimated<Props extends object>(WrappedComponent: React.FC<Props>) {
  const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';

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

    constructor(props: Props) {
      super(props);
    }

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

  return Animated.createAnimatedComponent<Props>(WithAnimated);
}

[AbdurakhmonZiyodov]

Hello everyone I am getting this error can anyone help me?

ERROR Invariant Violation: createAnimatedComponent does not support stateless functional components; use a class component instead., js engine: hermes
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

[hchor]

Hello everyone I am getting this error can anyone help me?

ERROR Invariant Violation: createAnimatedComponent does not support stateless functional components; use a class component instead., js engine: hermes ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

Did you try using a class component or one of the wrappers? Do you have code sample?

[tomekzaw]

Hey, if you want to animate functional components, you can always wrap them with React.forwardRef, as suggested in the updated version of the error message.

[MatiPl01]

Here is the example usage in docs.