Stagger
Children that arrive one after another.
Import
import {Stagger} from '@hzblj/kara-ui'Examples
Your own timing
<Stagger entering="scale" from="end" interval="micro">{sizes}</Stagger>Making room when one leaves
<Stagger exiting="fade" layout>{cartItems}</Stagger>Props
A Box whose children arrive one after another: each takes entering a step later than the one before. Children that arrive together are staggered among themselves, the first ones as much as a later batch (the next page of a list), while a single child added later arrives at once. A Box, RnText or Pressable child takes the motion itself; any other child is wrapped in a Box that does. With motion reduced every child fades, still one after another. The React Native tier: it needs no host.
Also takes the React Native `sx` props.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | What arrives. A child with an | |
| entering | StaggerMotion | 'fadeUp' | How each child arrives. |
| exiting | StaggerMotion | How a child leaves when it is removed. They leave together, not one after another; none by default. | |
| from | 'end' | 'start' | 'start' | Which end arrives first. |
| interval | DurationSize | 'stagger' | The step between one child and the next, a duration token. |
| layout | boolean | SpringName | Moves the other children into place when one arrives or leaves, and the stagger itself to its new size: | |
| testID | string | Test identifier, forwarded to the view. |
What arrives. A child with an entering preset of its own keeps it and only takes the delay.
How each child arrives. fadeUp by default.
How a child leaves when it is removed. They leave together, not one after another; none by default.
Which end arrives first. start by default.
The step between one child and the next, a duration token. stagger (40 ms) by default, micro for a slower one.
Moves the other children into place when one arrives or leaves, and the stagger itself to its new size: true on the smooth spring, or a spring token. Off by default. Give what sits after it layout too, so it follows.
Test identifier, forwarded to the view.
Platform notes
- Each child takes
enteringa step (interval, 40 ms by default) after the one before it. - Only the children that arrive together take turns: the first ones, or the next page of a list. A single item added later arrives at once instead of after everything above it.
- A
Box,RnTextorPressablechild takes the motion itself, so no view is added around it; any other child is wrapped in aBox. - With Reduce Motion on, every child fades, still one after another.