PresenceTransition | NativeBase | Universal Components for React and React Native

Show Code
Playground
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>;
};
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>;
};
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>;
};
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,
  };
}