PresenceTransition | NativeBase | Universal Components for React and React Native

Show Code
Playground
 {\n const [isOpen, setIsOpen] = React.useState(false);\n return \n  setIsOpen(!isOpen)}>\n {isOpen ? \"Hide\" : \"Show\"}\n \n \n \n Fade\n \n \n ;\n};\n\n export default () => {\n return (\n \n \n \n \n \n );\n };\n "}}&dependencies=react-is,expo-font,native-base@3_4_19,styled-system,expo-constants,react-native-web,react-native-safe-area-context,react-native-svg,styled-components,@expo/vector-icons,expo-linear-gradient,formik,yup,@react-navigation/drawer,@react-navigation/native,react-native-vector-icons,react-native-gesture-handler,react-native-linear-gradient,@react-native-community/masked-view,react-native-screens,react-native-reanimated" role="link" class="css-4rbku5 css-18t94o4 css-1dbjc4n r-18u37iz r-16l9doz r-iyfy8q">
const Example = () => {
 const [isOpen, setIsOpen] = React.useState(false);
 return <Center>
 <Button shadow={2} 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"
 }} shadow={2}>
 Fade
 </Center>
 </PresenceTransition>
 </Center>;
};

Playground
const Example = () => {
 const [isOpen, setIsOpen] = React.useState(false);
 return <Center>
 <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>
 </Center>;
};

Playground
const Example = () => {
 const [isOpen, setIsOpen] = React.useState(false);
 return <Center>
 <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>
 </Center>;
};

Copy
interface ISupportedTransitions {
 opacity?: number;
 translateY?: number;
 translateX?: number;
 scale?: number;
 scaleX?: number;
 scaleY?: number;
 rotate?: string;
}

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,
 };
}