React-native-reanimated: Invariant violation: `createAnimatedComponent` does not support stateless functional components

[dinhmai74]

I got this error when use createAnimatedComponent function.

steps:

create new expo typescript project
install react-native-reanimated then use

code:

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import Animated, { Easing } from "react-native-reanimated";

function Button() {
  return <View />;
}

const AnimButton = Animated.createAnimatedComponent(Button);

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

deps:

"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-reanimated": "^1.7.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-web": "~0.11.7"

[jakub-gonet]

Hey @dinhmai74,
the problem lies in const AnimButton = Animated.createAnimatedComponent(Button); line, Button is a function and you're trying to use it in createAnimatedComponent, which, as the error says, doesn't allow function component.

Try changing the button to a class component.

[shamoons]

How would one change it to a class component?

[joeyfigaro]

@shamoons

class Button extends React.Component {
  render() {
    return <View />
  }
}