Style transitions
Changes to style animate from the value on screen, so toggling mid-way never jumps.
<Strx.View animate="transition-all duration-300"
style={{ width: on ? 200 : 120 }} />fade-inReact Native · Reanimated 4
Motion for React Native,
written as tokens.
Describe entrances, exits, style transitions and layout motion right on the component, the way Tailwind describes style. STRX turns the string into Reanimated animations on the UI thread.
fade-in
from:translate-y-12
layout-spring
duration-400
ease-out
exit:opacity-0
Try it
Type tokens, watch the result.
The preview uses the library's own token data, easing curves and spring parameters. Typos are flagged with the same suggestions you get in development.
Preset · one per group
Keyframes · override the preset per channel
Duration
Delay
Easing
<Strx.View
animate=""
/>Welcome back
Continue
Get started
Three steps to your first animation.
STRX sits on top of Reanimated, so setup is the Reanimated setup plus one provider.
-
01
Install with Reanimated 4
npm i react-native-strx@beta react-native-reanimated react-native-workletsExpo apps: use
npx expo installfor the Reanimated packages. Bare apps addreact-native-worklets/pluginlast in Babel. -
02
Wrap your app
1import { Strx } from "react-native-strx";23<Strx.Provider motionPreset={{ duration: 300 }}>4 <App />5</Strx.Provider>Sets default timing, follows the OS Reduce Motion setting, and connects event timelines.
-
03
Add animate
<Strx.View animate="fade-in from:translate-y-12 layout-spring"> <Strx.Text>Hello STRX</Strx.Text> </Strx.View>Every STRX component accepts the same
animateprop: View, Text, Pressable, Image, ScrollView, TextInput, and your own viacreateStrxComponent.
The grammar
Read it like a sentence.
Each token does one thing. Order inside a group doesn't matter, and a comma starts a new group with its own timing.
fade-inPreset
from:translate-y-12Keyframe
exit:opacity-0Exit
transition-colorsStyle transition
layout-springLayout
duration-400Timing
ease-outEasing
fade-in, slide-up duration-500
Two groups play together. duration-500 applies to slide-up only.
bounce spring damping-12
Switch to the spring driver and tune it inline with damping, stiffness and mass.
from:opacity-0 to:opacity-100 play-infinite
Write keyframes directly when no preset fits, and loop them with play-*.
Beyond entrances
Every kind of motion, same prop.
Layout
Size and position changes spring into place. Children inherit it; components without a token pay nothing.
<Strx.View animate="layout-spring" layoutClip>Timelines
Choreograph targets in parallel, serial or stagger. stop() freezes in place, reverse() continues from there.
<Strx.Timeline playback="stagger" interval={100}>Documentation
Everything STRX can do.
Each page explains one feature with live previews and copy-ready code.
Presets
Eleven entrance presets and definePreset for your own.
Keyframes
from: and to: utilities, or style objects, for any animatable channel.
Timing & easing
Duration, delay, easing and repeat tokens, with a clear precedence order.
Timing →Springs
spring, damping-*, stiffness-*, mass-* for physical motion.
Exit animations
exit: tokens animate a component out when it unmounts.
LayoutGroup
Share one layout transition across a region, like a list.
LayoutGroup →Array playback
Run several animations on one component in parallel, serial or stagger.
Playback →useTimeline
Event-driven animations with play, reverse, stop and reset.
Custom components
Give any component the animate prop with createStrxComponent.
Reduce Motion
Respects the OS setting automatically, or force it per subtree.
Accessibility →Debugging
Dev warnings with suggestions and an optional on-device overlay.
Debugging →Token reference
Every token, generated from the same data the parser uses.
Reference →Editor support
Autocomplete for every token.
The VS Code extension suggests tokens as you type, explains them on hover, and flags typos with a one-click fix. It reads the token list from the version you installed.
<Strx.View
animate="fade-in layout-sprng dur"
/>
duration-{number}timing
duration-300timing
duration-500timing
Duration in milliseconds. Token → preset default → Provider → 300ms.
Unknown animate token "layout-sprng". Did you mean "layout-spring"?
Reference
Presets to start from.
| Token | Starts from | Animates to | Default motion |
|---|---|---|---|
opacity: 0 | opacity: 1 | timing, 300ms | |
fade-out | opacity: 1 | opacity: 0 | timing, 250ms |
slide-up | translateY: 24 | translateY: 0 | timing, 320ms |
slide-down | translateY: -24 | translateY: 0 | timing, 320ms |
slide-left | translateX: 24 | translateX: 0 | timing, 320ms |
slide-right | translateX: -24 | translateX: 0 | timing, 320ms |
scale-up | scale: 0.92 | scale: 1 | timing, 260ms |
scale-in | scale: 0.92 | scale: 1 | timing, 260ms |
scale-down | scale: 1.08 | scale: 1 | timing, 260ms |
scale-out | scale: 1 | scale: 0.92 | timing, 220ms |
bounce | translateY: -16, scale: 0.96 | translateY: 0, scale: 1 | spring, damping 8, stiffness 180, mass 0.9 |
Start animating in a minute.
Upgrading from 0.1? The migration guide lists every renamed API and behavior change.