Skip to content
react-native-strx v1.0.0-beta.1

Getting started

Quick start

Build an animated card in five steps and meet each kind of STRX motion along the way.

This walkthrough builds a small profile card. Each step adds one kind of motion.

1. Add the provider

Wrap your app (or a screen) in Strx.Provider. It sets default timing, follows the system Reduce Motion setting, and connects event timelines.

App.tsxtsx
1import { Strx } from "react-native-strx";23export default function App() {4  return (5    <Strx.Provider motionPreset={{ duration: 280, easing: "ease-out" }}>6      <ProfileScreen />7    </Strx.Provider>8  );9}

The provider is optional for plain animate props, but you need it (or Strx.TimelineRoot) for Strx.useTimeline.

2. Animate the entrance

Swap View and Text for their STRX versions and add animate. STRX components accept every prop of the React Native component they wrap.

<Strx.View animate="fade-in slide-up" style={styles.card}>
  <Strx.Text style={styles.name}>Ada Lovelace</Strx.Text>
</Strx.View>

fade-in and slide-up are both presets, so this plays only fade-in and warns in development: a comma group holds one preset. To combine presets, separate them with commas, or combine one preset with keyframes:

<Strx.View animate="fade-in, slide-up" />
<Strx.View animate="fade-in from:translate-y-24" />

3. Tune the timing

Add duration-*, delay-* and an easing token. Timing applies to its own comma group:

<Strx.View animate="fade-in, slide-up duration-500 delay-100 ease-in-out" />

Here fade-in uses the provider's 280ms, and slide-up runs 500ms after a 100ms delay. See Timing & easing for the full precedence rules.

4. Animate state changes

A transition-* token animates later changes to style. Here the card's border color follows a selected flag:

1<Strx.Pressable2  onPress={() => setSelected(value => !value)}3  animate="fade-in transition-colors duration-200"4  style={{ borderColor: selected ? "#3552f0" : "#e7e9ef", borderWidth: 2 }}5>6  <Strx.Text>Ada Lovelace</Strx.Text>7</Strx.Pressable>

fade-in still plays once on mount; the style change never replays it. See Style transitions.

5. Animate layout and exit

Add layout-spring so the card springs to its new size when details appear, and exit: tokens on the details so they fade out when removed:

1<Strx.View animate="fade-in, slide-up layout-spring" layoutClip>2  <Strx.Text>Ada Lovelace</Strx.Text>3  {expanded && (4    <Strx.Text animate="fade-in exit:opacity-0 exit:translate-y-8">5      Wrote the first published algorithm.6    </Strx.Text>7  )}8</Strx.View>

Children inherit the card's layout transition, so the text block moves smoothly too. See Layout transitions and Exit animations.

What's next

Edit this page on GitHub

Esc