Core concepts
Presets
Named entrance animations, and how to register your own with definePreset.
A preset is a named animation with a start frame, an end frame and default motion. Presets play when the component mounts (and again when the animate string changes).
<Strx.View animate="slide-up" />Built-in presets
| Token | Starts from | Animates to | Default motion |
|---|---|---|---|
fade-in | 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 |
scale-up and scale-in are the same animation; use whichever reads better. fade-out and scale-out animate to an invisible or smaller state on mount. For animating a component out as it unmounts, use exit: tokens instead.
The "default motion" column is the preset's own default, not Reanimated's. bounce uses the spring driver; every other preset uses timing with ease-out unless you add an easing token.
Overriding a preset
Every part of a preset can be overridden in the same group:
1// timing2<Strx.View animate="slide-up duration-600 delay-100 ease-in-out" />34// spring instead of timing5<Strx.View animate="scale-in spring damping-14" />67// a different start position: keyframes override the preset per channel8<Strx.View animate="slide-up from:translate-y-60" />Duration precedence is: duration-* token or object duration → the preset's own default → Strx.Provider duration → 300ms. So with motionPreset={{ duration: 200 }}, slide-up still runs 320ms unless you add a duration-* token.
Combining presets
Use one preset per comma group:
<Strx.View animate="fade-in, slide-up, scale-in duration-400" />Custom presets with definePreset
Register a preset once at module scope, before any component that uses it renders. After that, it works like a built-in token everywhere: in strings, objects ({ type: "pop-in" }), timelines and the dev-time token checker.
1import { definePreset } from "react-native-strx";23definePreset("pop-in", {4 initial: { opacity: 0, scale: 0.8 },5 target: { opacity: 1, scale: 1 },6 options: { driver: "spring", damping: 12, stiffness: 200 },7});89definePreset("drop-in", {10 initial: { opacity: 0, translateY: -40 },11 target: { opacity: 1, translateY: 0 },12 options: { driver: "timing", duration: 450 },13});1import "./motion";23<Strx.View animate="pop-in" />4<Strx.View animate="drop-in delay-150" />The preset shape
| Field | Type | Meaning |
|---|---|---|
initial | Partial<Record<AnimatableChannel, number>> | Start frame |
target | Partial<Record<AnimatableChannel, number>> | End frame |
options.driver | "timing""spring" | Which driver to use |
options.duration | number | Default duration for timing presets |
options.damping, stiffness, mass | number | Default spring parameters |
AnimatableChannel is "opacity" | "translateX" | "translateY" | "scale". For other channels (rotation, colors, size), use keyframes or an object animate.
Rules
- Names must be lowercase letters, digits and dashes, starting with a letter (
/^[a-z][a-z0-9-]*$/). Other names throw. - Calling
definePresetagain with the same name replaces the preset. Built-in names can be replaced too, which changes them app-wide. - Register presets before rendering. Components that already rendered with the old definition pick up the change the next time their animation is recreated.
Reading registered presets
animationPresets is a read-only record of every registered preset, built-in and custom:
import { animationPresets } from "react-native-strx";
Object.keys(animationPresets); // ["fade-in", "fade-out", ..., "pop-in"]If you use TypeScript, the BuiltInAnimationPreset type lists the built-in names, and StrxPreset is the preset shape.