Tailwind CSS

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

<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:
0

Installation

  1. This depends on tailwindcss-react-native so first follow its installation steps.

  2. Then pass styled into configureMotion

import { styled } from 'tailwindcss-react-native';
import { configureMotion } from '@legendapp/motion';

configureMotion({ styled });

  1. Then just change the Motion import to /styled
import { Motion } from "@legendapp/motion/styled"