import React from 'react';
import { Slide, Button, Box, Center, Heading } from '@native-base/v3';
export default function () {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <Box width="90%" height="50%" alignItems="center" justifyContent="center">
        <Heading fontSize="xs">
          This is an example to show how slider can be used.
        </Heading>
        <Button my={2} onPress={() => setIsOpen(!isOpen)}>
          Click Me to {isOpen ? 'hide' : 'show'}
        </Button>
        <Center>
          The Force is strong with this one. I have you now. Look, I ain't in
          this for your revolution, and I'm not in it for you, Princess. I
          expect to be well paid. I'm in it for the money. What!? Hey, Luke! May
          the Force be with you. Remember, a Jedi can feel the Force flowing
          through him. All right. Well, take care of yourself, Han. I guess
          that's what you're best at, ain't it? In my experience, there is no
          such thing as luck. Kid, I've flown from one side of this galaxy to
          the other. I've seen a lot of strange stuff, but I've never seen
          anything to make me believe there's one all-powerful Force controlling
          everything. There's no mystical energy field that controls my destiny.
          It's all a lot of simple tricks and nonsense.
        </Center>
      </Box>
      <Slide in={isOpen}>
        <Box p="40px" color="white" mt="4" bg="teal.5" rounded="md">
          Slide
        </Box>
      </Slide>
    </>
  );
}