React-native-reanimated: How can I use it inside a class component?

[WeTruck]

Hi,

Thanks for the library.

This code is working perfectly:

import React, {Component} from 'react';
import {View, Button} from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';

export default function Box() {
  const offset = useSharedValue(0);

  const animatedStyles = useAnimatedStyle(() => {
    return {
      transform: [{translateX: withSpring(offset.value * 255)}],
    };
  });

  return (
    <View>
      <Animated.View
        style={[
          {height: 100, width: 100, backgroundColor: 'green'},
          animatedStyles,
        ]}
      />
      <Button onPress={() => (offset.value = Math.random())} title="Move" />
    </View>
  );
}

But I want to use it inside a class component.

Like this,

export default class Index extends Component {
 render() {
  return (<View>{this.myFunction() or myFunction...}</View>);
 }
}

Please help.
Thanks in advance.

[Eduardo-Balistieri]

You need to import the Box function and use it like that

export default class Index extends Component {
    render() {
        return (
            <View>
                <Box />
            </View>
        )
    }
}

[WeTruck]

@Eduardo-Balistieri it works! Thank you so much.