Getting started

Introduction

Tailwind-style animation tokens for React Native, powered by Reanimated 4.

react-native-strx (STRX) lets you write animation intent directly on React Native components, as a short string of tokens:

import { Strx } from "react-native-strx";

<Strx.View animate="fade-in from:translate-y-12 layout-spring duration-400" />

That one prop fades the view in, slides it up from 12 points below, springs its size and position changes, and sets the entrance duration to 400ms. STRX parses the string once, caches it, and drives the animation with Reanimated on the UI thread.

What you can animate

STRX covers the motion most apps need, all through the same animate prop:

On top of that, there are components for choreography (Strx.Timeline, Strx.useTimeline), shared layout regions (Strx.LayoutGroup), app-wide defaults and Reduce Motion (Strx.Provider), and a way to add animate to any component (createStrxComponent).

Why tokens

• Readable. fade-in slide-up reads like what it does. Reviewers see the motion without opening another file.
• Consistent. Teams share a small vocabulary of presets and durations instead of hand-tuned withTiming calls.
• Fast. Strings are parsed once and cached. Animations run on the UI thread through Reanimated, and components without a layout token carry no layout-animation cost.
• Checked. Unknown tokens produce a development warning with a suggestion (fade-inn → fade-in), and the VS Code extension autocompletes every token.

Requirements

Apps still on Reanimated 3 should stay on react-native-strx@0.1.x. Upgrading from 0.1? See the migration guide.

Next steps

• Install STRX and set up Babel.
• Follow the quick start to build an animated screen.
• Read the animate prop to learn how token strings are parsed.

Edit this page on GitHub