PresenceTransition provides a declarative API to add entry and exit transitions.
const Example = () => {
const [isOpen, setIsOpen] = React.useState(false);
return <>
<Button onPress={() => setIsOpen(!isOpen)}>
{isOpen ? "Hide" : "Show"}
</Button>
<PresenceTransition visible={isOpen} initial={{
opacity: 0
}} animate={{
opacity: 1,
transition: {
duration: 250
}
}}>
<Center mt="7" bg="teal.500" rounded="md" w="200" h="100" _text={{
color: "white"
}}>
Fade
</Center>
</PresenceTransition>
</>;
};
const Example = () => {
const [isOpen, setIsOpen] = React.useState(false);
return <>
<Button onPress={() => setIsOpen(!isOpen)}>
{isOpen ? "Hide" : "Show"}
</Button>
<PresenceTransition visible={isOpen} initial={{
opacity: 0,
scale: 0
}} animate={{
opacity: 1,
scale: 1,
transition: {
duration: 250
}
}}>
<Center w="200" h="100" mt="7" bg="teal.500" rounded="md">
ScaleFade
</Center>
</PresenceTransition>
</>;
};
interface ISupportedTransitions {
opacity?: number;
translateY?: number;
translateX?: number;
scale?: number;
scaleX?: number;
scaleY?: number;
rotate?: string;
}
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,
};
}