Tailwind CSS

Legend-Motion includes a special set of Motion components that support TailwindCSS className by using NativeWind.

<Motion.View
    className="items-center justify-center p-4"
    animate={{ x: value * 50 }}
>
    <Motion.Text className="font-bold text-white">
        RN View
    </Motion.Text>
</Motion.View>
<Motion.View
    className="items-center justify-center p-4 mt-8"
    whileHover={{ scale: 1.1 }}
    whileTap={{ x: 30 }}
>
    <Motion.Text className="font-bold text-white">
        Press me
    </Motion.Text>
</Motion.View>

RN View

Press me

value:

Installation

This depends on NativeWind so first follow its installation steps.
Then pass styled into configureMotion

import { styled } from 'nativewind';
import { configureMotion } from '@legendapp/motion';

configureMotion({ styled });

Then just change the Motion import to /styled

import { Motion } from "@legendapp/motion/styled"