Stagger | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Stagger
Stagger component provides a declarative API to add Staggered Transitions.
Example
Playground
Props
initial
Initial styles before the transition starts
animate
The styles to which each child should animate to while entering.
exit
The styles to which each child should animate to while exiting.
visible
Determines whether to start the animation
Type: boolean
IStaggerStyleProps
Copy
interface IStaggerStyleProps extends ISupportedTransition {
transition?: {
stagger?: {
/**
* Delay to add to each child
*/
offset: number,
/**
* When true, delay is added from the last child
*/
reverse?: boolean,
},
type?: 'timing' | 'spring',
easing?: (value: number) => number,
overshootClamping?: boolean,
restDisplacementThreshold?: number,
restSpeedThreshold?: number,
velocity?: number | { x: number, y: number },
bounciness?: number,
speed?: number,
tension?: number,
friction?: number,
stiffness?: number,
mass?: number,
damping?: number,
delay?: number,
duration?: number,
useNativeDriver?: boolean,
};
}
Nativebase logo
MadeWithNativeBase