PresenceTransition | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
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).
PresenceTransition
PresenceTransition provides a declarative API to add entry and exit transitions.
Show Code
Playground
Fade
Playground
ScaleFade
Playground
Props
PresenceTransition implements
onTransitionComplete
Callback invoked when the transition is completed.
Type: (s: "entered" | "exited") => any
initial
Styles before the transition starts.
animate
Entry animation styles.
exit
Exit animation styles.
visible
Determines whether to start the animation.
Type: boolean
Default: false
as
Accepts a Component to be rendered as Wrapper. Defaults to `View`.
Type: ReactNode
ISupportedTransitions
Copy
interface ISupportedTransitions {
opacity?: number;
translateY?: number;
translateX?: number;
scale?: number;
scaleX?: number;
scaleY?: number;
rotate?: string;
}
ITransitionStyleProps
Copy
interface ITransitionStyleProps extends ISupportedTransitions {
transition?: {
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