PresenceTransition | 3.0.x | NativeBase | Universal Components for React and React Native

Click Me to 
show
Fade
Playground
const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  return <>
      <Button onPress={() => setIsOpen(!isOpen)}>
        Click Me to {isOpen ? "hide" : "show"}
      </Button>
      <PresenceTransition visible={isOpen} initial={{
      opacity: 0
    }} animate={{
      opacity: 1,
      transition: {
        duration: 250
      }
    }}>
        <Box p="40px" mt="4" bg="teal.500" rounded="md" _text={{
        color: "white"
      }}>
          Fade
        </Box>
      </PresenceTransition>
    </>;
};
const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  return <>
      <Button onPress={() => setIsOpen(!isOpen)}>
        Click Me to {isOpen ? "hide" : "show"}
      </Button>
      <PresenceTransition visible={isOpen} initial={{
      opacity: 0
    }} animate={{
      opacity: 1,
      transition: {
        duration: 250
      }
    }}>
        <Box p="40px" mt="4" bg="teal.500" rounded="md" _text={{
        color: "white"
      }}>
          Fade
        </Box>
      </PresenceTransition>
    </>;
};

Click Me to 
show
ScaleFade
Playground
const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  return <>
      <Button onPress={() => setIsOpen(!isOpen)}>
        Click Me to {isOpen ? "hide" : "show"}
      </Button>
      <PresenceTransition visible={isOpen} initial={{
      opacity: 0,
      scale: 0
    }} animate={{
      opacity: 1,
      scale: 1,
      transition: {
        duration: 250
      }
    }}>
        <Box p="40px" mt="4" bg="teal.500" rounded="md">
          ScaleFade
        </Box>
      </PresenceTransition>
    </>;
};
const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  return <>
      <Button onPress={() => setIsOpen(!isOpen)}>
        Click Me to {isOpen ? "hide" : "show"}
      </Button>
      <PresenceTransition visible={isOpen} initial={{
      opacity: 0,
      scale: 0
    }} animate={{
      opacity: 1,
      scale: 1,
      transition: {
        duration: 250
      }
    }}>
        <Box p="40px" mt="4" bg="teal.500" rounded="md">
          ScaleFade
        </Box>
      </PresenceTransition>
    </>;
};

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