Core concepts
Exit animations
Animate a component out when it unmounts with exit: tokens.
exit: tokens describe where a component animates to when React removes it. Reanimated keeps the view on screen until the exit animation finishes.
1{visible && (2 <Strx.View animate="fade-in exit:opacity-0 exit:translate-y-12">3 <Strx.Text>Toast message</Strx.Text>4 </Strx.View>5)}Exit channels
Exit animations run as a Reanimated exiting animation on four channels:
| Token | Exits to |
|---|---|
exit:opacity-0 | Fully transparent (any opacity-* value works) |
exit:translate-x-24, exit:-translate-x-24 | 24pt right or left |
exit:translate-y-24, exit:-translate-y-24 | 24pt down or up |
exit:scale-90 | Smaller (or larger, with exit:scale-110) |
The exit starts from the neutral values (opacity: 1, no translation, scale: 1) and animates the channels you list; channels you don't list stay neutral. Other utilities such as exit:rotate-* or exit:w-* are valid tokens but are not animated on exit.
Exit timing
Exits use the timing tokens of their own comma group. Without them, an exit runs 300ms with ease; the preset's default duration and the provider's duration don't apply to exits.
// the whole group: entrance and exit both run 180ms, ease-in
<Strx.View animate="fade-in exit:opacity-0 exit:scale-95 duration-180 ease-in" />To time the entrance and the exit separately, put the exit in its own group:
<Strx.View animate="fade-in from:translate-y-12 duration-400, exit:opacity-0 duration-150 ease-in" />delay-* delays the exit. Springs don't apply to exits; spring falls back to ease.
Lists
Combine exit: with a layout transition so the remaining items move into the gap:
1<Strx.LayoutGroup transition="spring">2 {items.map(item => (3 <Strx.View key={item.id} animate="fade-in from:translate-y-12 exit:opacity-0 exit:translate-x-24">4 <Row item={item} />5 </Strx.View>6 ))}7</Strx.LayoutGroup>Supported components
Every STRX component supports exit:: Strx.View, Strx.Text, Strx.Pressable, Strx.Image, Strx.ScrollView, Strx.TextInput, and components made with createStrxComponent.
Things to know
- An exit runs when the component itself unmounts. When a parent unmounts, the whole subtree goes with it, as with any Reanimated exiting animation; put
exit:on the outermost element that is removed. - Remove the item from your state right away. Don't wait for the animation in JS; Reanimated keeps the view on screen while it exits.
- Under Reduce Motion, exits are skipped and the component is removed immediately. See Accessibility.
exit:values are never part of a timeline animation.