Slide | NativeBase | Universal Components for React and React Native

Playground
const Example = () => {
  const [isOpenBottom, setIsOpenBottom] = React.useState(false);
  const [isOpenTop, setIsOpenTop] = React.useState(false);
  const str1 = `${isOpenTop ? "Hide" : "Show"}`;
  const str2 = `${isOpenBottom ? "Hide" : "Show"}`;
  return <>
      <Slide in={isOpenBottom} placement="bottom">
        <Alert justifyContent="center" mx="4" mt="auto" mb="4" status="success">
          <Alert.Icon />
          <Alert.Description _text={{
          _light: {
            color: "success.600"
          },
          _dark: {
            color: "success.100"
          },
          fontWeight: "medium"
        }}>
            Order placed successfully!
          </Alert.Description>
        </Alert>
      </Slide>
      <Slide in={isOpenTop} placement="top">
        <Alert justifyContent="center" mx="4" mt="4" status="error">
          <Alert.Icon />
          <Alert.Description _text={{
          _light: {
            color: "error.600"
          },
          _dark: {
            color: "error.100"
          },
          fontWeight: "medium"
        }}>
            No Internet Connection
          </Alert.Description>
        </Alert>
      </Slide>

      <VStack space={2.5} w={{
      base: "50%",
      md: "25%"
    }} alignItems="center">
        <Center w="100%">
          <Heading textAlign="center" size="md" mb={4}>
            Top
          </Heading>
          <Button w="100" onPress={() => setIsOpenTop(!isOpenTop)} mb={5}>
            {str1}
          </Button>
          <Divider />
        </Center>
        <Center w="100%">
          <Heading textAlign="center" size="md" mb={4}>
            Bottom
          </Heading>
          <Button w="100" onPress={() => setIsOpenBottom(!isOpenBottom)}>
            {str2}
            {
            /* Click Me to {isOpenBottom ? "hide" : "show"} Bottom Slider */
          }
          </Button>
        </Center>
      </VStack>
    </>;
};
const Example = () => {
  const [isOpenBottom, setIsOpenBottom] = React.useState(false);
  const [isOpenTop, setIsOpenTop] = React.useState(false);
  const str1 = `${isOpenTop ? "Hide" : "Show"}`;
  const str2 = `${isOpenBottom ? "Hide" : "Show"}`;
  return <>
      <Slide in={isOpenBottom} placement="bottom">
        <Alert justifyContent="center" mx="4" mt="auto" mb="4" status="success">
          <Alert.Icon />
          <Alert.Description _text={{
          _light: {
            color: "success.600"
          },
          _dark: {
            color: "success.100"
          },
          fontWeight: "medium"
        }}>
            Order placed successfully!
          </Alert.Description>
        </Alert>
      </Slide>
      <Slide in={isOpenTop} placement="top">
        <Alert justifyContent="center" mx="4" mt="4" status="error">
          <Alert.Icon />
          <Alert.Description _text={{
          _light: {
            color: "error.600"
          },
          _dark: {
            color: "error.100"
          },
          fontWeight: "medium"
        }}>
            No Internet Connection
          </Alert.Description>
        </Alert>
      </Slide>

      <VStack space={2.5} w={{
      base: "50%",
      md: "25%"
    }} alignItems="center">
        <Center w="100%">
          <Heading textAlign="center" size="md" mb={4}>
            Top
          </Heading>
          <Button w="100" onPress={() => setIsOpenTop(!isOpenTop)} mb={5}>
            {str1}
          </Button>
          <Divider />
        </Center>
        <Center w="100%">
          <Heading textAlign="center" size="md" mb={4}>
            Bottom
          </Heading>
          <Button w="100" onPress={() => setIsOpenBottom(!isOpenBottom)}>
            {str2}
            {
            /* Click Me to {isOpenBottom ? "hide" : "show"} Bottom Slider */
          }
          </Button>
        </Center>
      </VStack>
    </>;
};

Playground
const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  return <Box width={{
    base: "75%",
    md: "50%"
  }} h="100%" // alignItems="flex-start"
  justifyContent="center">
      <VStack space={3} w="100%">
        <HStack alignItems="flex-end">
          <Heading>Order</Heading>
        </HStack>
        <HStack alignItems="center" justifyContent="space-between">
          <Text fontWeight="medium">Sub Total</Text>
          <Text color="blueGray.400">$298.77</Text>
        </HStack>
        <HStack alignItems="center" justifyContent="space-between">
          <Text fontWeight="medium">Tax</Text>
          <Text color="blueGray.400">$38.84</Text>
        </HStack>
        <HStack alignItems="center" justifyContent="space-between">
          <Text fontWeight="medium">Total Amount</Text>
          <Text color="emerald.600">$337.61</Text>
        </HStack>
        <VStack space={2} mt="2">
          <Text bold>Promo Code</Text>
          <HStack space={3}>
            <Input flex="1" />
            <Button variant="outline">Apply</Button>
          </HStack>
        </VStack>
        <Button my="2" onPress={() => setIsOpen(!isOpen)}>
          Place Order
        </Button>
      </VStack>
      <Slide in={isOpen} placement="bottom">
        <Box w="100%" position="absolute" bottom="2" p="2" mx={-3} borderRadius="xs" bg="emerald.100" alignItems="center" justifyContent="center" _dark={{
        bg: "emerald.200"
      }}>
          <HStack space={2}>
            <CheckIcon size="4" color="emerald.600" mt="1" _dark={{
            color: "emerald.700"
          }} />
            <Text color="emerald.600" textAlign="center" _dark={{
            color: "emerald.700"
          }} fontWeight="medium">
              Order Placed Successfully.
            </Text>
          </HStack>
        </Box>
      </Slide>
    </Box>;
};
const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  return <Box width={{
    base: "75%",
    md: "50%"
  }} h="100%" // alignItems="flex-start"
  justifyContent="center">
      <VStack space={3} w="100%">
        <HStack alignItems="flex-end">
          <Heading>Order</Heading>
        </HStack>
        <HStack alignItems="center" justifyContent="space-between">
          <Text fontWeight="medium">Sub Total</Text>
          <Text color="blueGray.400">$298.77</Text>
        </HStack>
        <HStack alignItems="center" justifyContent="space-between">
          <Text fontWeight="medium">Tax</Text>
          <Text color="blueGray.400">$38.84</Text>
        </HStack>
        <HStack alignItems="center" justifyContent="space-between">
          <Text fontWeight="medium">Total Amount</Text>
          <Text color="emerald.600">$337.61</Text>
        </HStack>
        <VStack space={2} mt="2">
          <Text bold>Promo Code</Text>
          <HStack space={3}>
            <Input flex="1" />
            <Button variant="outline">Apply</Button>
          </HStack>
        </VStack>
        <Button my="2" onPress={() => setIsOpen(!isOpen)}>
          Place Order
        </Button>
      </VStack>
      <Slide in={isOpen} placement="bottom">
        <Box w="100%" position="absolute" bottom="2" p="2" mx={-3} borderRadius="xs" bg="emerald.100" alignItems="center" justifyContent="center" _dark={{
        bg: "emerald.200"
      }}>
          <HStack space={2}>
            <CheckIcon size="4" color="emerald.600" mt="1" _dark={{
            color: "emerald.700"
          }} />
            <Text color="emerald.600" textAlign="center" _dark={{
            color: "emerald.700"
          }} fontWeight="medium">
              Order Placed Successfully.
            </Text>
          </HStack>
        </Box>
      </Slide>
    </Box>;
};

Playground
const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  return <>
      <Slide in={isOpen} placement="top">
        <Box p="2" _text={{
        color: "orange.600"
      }} bg="orange.200">
          Due to government restrictions around COVID- 19, you may experience a
          delay in your delivery.
        </Box>
      </Slide>
      <Box width="100%" alignItems="flex-start" justifyContent="center">
        <VStack space={3} w="100%">
          <HStack alignItems="flex-end">
            <Heading>Order</Heading>
            <Spacer />
            <WarningIcon color="orange.600" size="xs" mb="1.5" />
          </HStack>
          <HStack alignItems="center" justifyContent="space-between">
            <Text fontWeight="medium">Sub Total</Text>
            <Text color="blueGray.400">$298.77</Text>
          </HStack>
          <HStack alignItems="center" justifyContent="space-between">
            <Text fontWeight="medium">Tax</Text>
            <Text color="blueGray.400">$38.84</Text>
          </HStack>
          <HStack alignItems="center" justifyContent="space-between">
            <Text fontWeight="medium">Total Amount</Text>
            <Text color="green.500">$337.61</Text>
          </HStack>
          <VStack space={2} mt="2">
            <Text bold>Promo Code</Text>
            <HStack space={3}>
              <Input flex="1" />
              <Button variant="outline">Apply</Button>
            </HStack>
          </VStack>
          <Button my="2" onPress={() => setIsOpen(!isOpen)}>
            Place Order
          </Button>
        </VStack>
      </Box>
    </>;
};
const Example = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  return <>
      <Slide in={isOpen} placement="top">
        <Box p="2" _text={{
        color: "orange.600"
      }} bg="orange.200">
          Due to government restrictions around COVID- 19, you may experience a
          delay in your delivery.
        </Box>
      </Slide>
      <Box width="100%" alignItems="flex-start" justifyContent="center">
        <VStack space={3} w="100%">
          <HStack alignItems="flex-end">
            <Heading>Order</Heading>
            <Spacer />
            <WarningIcon color="orange.600" size="xs" mb="1.5" />
          </HStack>
          <HStack alignItems="center" justifyContent="space-between">
            <Text fontWeight="medium">Sub Total</Text>
            <Text color="blueGray.400">$298.77</Text>
          </HStack>
          <HStack alignItems="center" justifyContent="space-between">
            <Text fontWeight="medium">Tax</Text>
            <Text color="blueGray.400">$38.84</Text>
          </HStack>
          <HStack alignItems="center" justifyContent="space-between">
            <Text fontWeight="medium">Total Amount</Text>
            <Text color="green.500">$337.61</Text>
          </HStack>
          <VStack space={2} mt="2">
            <Text bold>Promo Code</Text>
            <HStack space={3}>
              <Input flex="1" />
              <Button variant="outline">Apply</Button>
            </HStack>
          </VStack>
          <Button my="2" onPress={() => setIsOpen(!isOpen)}>
            Place Order
          </Button>
        </VStack>
      </Box>
    </>;
};