Usage

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>

Installation

  1. This depends on NativeWind so first follow its installation steps.

  2. Then pass styled into configureMotion

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

configureMotion({ styled });

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

Configuration

Previous Page

Animate Presence

Next Page

On this page

Installation