import { Dropdown, Button } from "react-native-magnus";


const dropdownRef = React.createRef();

<Button
  block
  bg="pink500"
  mt="sm"
  p="md"
  color="white"
  onPress={() => dropdownRef.current.open()}>
  Open Dropdown
</Button>

 <Dropdown
  ref={dropdownRef}
  title={
    <Text mx="xl" color="gray500" pb="md">
      This is your title
    </Text>
  }
  mt="md"
  pb="2xl"
  showSwipeIndicator={true}
  roundedTop="xl">
  <Dropdown.Option py="md" px="xl" block>
    First Option
  </Dropdown.Option>
  <Dropdown.Option py="md" px="xl" block>
    Second Option
  </Dropdown.Option>
  <Dropdown.Option py="md" px="xl" block>
    Third Option
  </Dropdown.Option>
</Dropdown>

import { Dropdown, Button } from "react-native-magnus";

const dropdownRef = React.createRef();

<Button
  block
  bg="pink500"
  mt="sm"
  p="md"
  color="white"
  onPress={() => dropdownRef.current.open()}>
  Open Dropdown
</Button>

 <Dropdown.Container
  ref={dropdownRef}
  m="md"
  pb="md"
  bg="transparent"
  showSwipeIndicator={false}
  roundedTop="xl">
  <Dropdown.Option
    block
    bg="gray100"
    color="blue600"
    py="lg"
    px="xl"
    borderBottomWidth={1}
    borderBottomColor="gray200"
    justifyContent="center"
    roundedTop="lg">
    First Option
  </Dropdown.Option>
  <Dropdown.Option
    block
    borderBottomWidth={1}
    borderBottomColor="gray200"
    bg="gray100"
    color="blue600"
    py="lg"
    px="xl"
    justifyContent="center">
    Second Option
  </Dropdown.Option>
  <Dropdown.Option
    block
    color="red500"
    underlayColor="gray100"
    py="lg"
    mt="xl"
    px="xl"
    fontWeight="bold"
    justifyContent="center"
    rounded="lg">
    Cancel
  </Dropdown.Option>
</Dropdown.Container>

import { Dropdown, Button } from "react-native-magnus";

const dropdownRef = React.createRef();

<Button
  block
  bg="pink500"
  mt="sm"
  p="md"
  color="white"
  onPress={() => dropdownRef.current.open()}>
  Open Dropdown
</Button>

<Dropdown.Container
  ref={dropdownRef}
  title={
    <Div row mx="xl" alignItems="center" p="md" pb="lg">
      <Button
        bg="transparent"
        color="gray400"
        position="absolute"
        left={0}
        top={3}
        fontSize="xl"
        zIndex={1}
        onPress={() => dropdownRef.current.close()}>
        Cancel
      </Button>
      <Text
        color="gray900"
        textAlign="center"
        flex={1}
        fontSize="xl"
        fontWeight="bold">
        Add Item
      </Text>
    </Div>
  }
  mt="md"
  pb="xl"
  showSwipeIndicator={false}
  roundedTop="xl">
  <Dropdown.Option
    py="lg"
    mx="xl"
    px="md"
    block
    prefix={
      <Icon name="picture" mr="lg" color="red500" fontSize="3xl" />
    }>
    Photos
  </Dropdown.Option>
  <Dropdown.Option
    py="lg"
    mx="xl"
    px="md"
    block
    prefix={
      <Icon name="camerao" mr="lg" color="blue500" fontSize="3xl" />
    }>
    Camera
  </Dropdown.Option>
  <Dropdown.Option
    py="lg"
    mx="xl"
    px="md"
    block
    prefix={
      <Icon
        name="filetext1"
        mr="lg"
        color="green700"
        fontSize="3xl"
      />
    }>
    Notes
  </Dropdown.Option>
  <Dropdown.Option
    py="lg"
    mx="xl"
    px="md"
    block
    prefix={
      <Icon name="file1" mr="lg" color="pink500" fontSize="3xl" />
    }>
    Documents
  </Dropdown.Option>
</Dropdown.Container>