Drawer

Beta

Sliding panel from screen edges for contextual content.

Installation

npm install @xaui/native

Import

import { Drawer } from '@xaui/native/drawer'

Basic Usage

Minimal example showing the component with its default configuration.

import { Drawer } from '@xaui/native/drawer'

export function Example() {
  return <Drawer />
}

Basic Left Drawer

Toggle a left-side navigation drawer with a button.

import { useState } from 'react'
import { View } from 'react-native'
import { Drawer } from '@xaui/native/drawer'
import { Button } from '@xaui/native/button'
import { Typography } from '@xaui/native/typography'

export function BasicDrawerExample() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <View>
      <Button onPress={() => setIsOpen(true)}>Open Drawer</Button>
      <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <Typography variant="subtitleLarge">Navigation</Typography>
        <Typography>Home</Typography>
        <Typography>Profile</Typography>
        <Typography>Settings</Typography>
      </Drawer>
    </View>
  )
}

Positions

Drawer can slide in from any edge using the position prop.

import { useState } from 'react'
import { View } from 'react-native'
import { Drawer } from '@xaui/native/drawer'
import { Button } from '@xaui/native/button'
import { Typography } from '@xaui/native/typography'

type Position = 'left' | 'right' | 'top' | 'bottom'

export function DrawerPositionsExample() {
  const [position, setPosition] = useState<Position>('left')
  const [isOpen, setIsOpen] = useState(false)

  const open = (pos: Position) => {
    setPosition(pos)
    setIsOpen(true)
  }

  return (
    <View style={{ gap: 12 }}>
      <Button onPress={() => open('left')}>Left</Button>
      <Button onPress={() => open('right')}>Right</Button>
      <Button onPress={() => open('top')}>Top</Button>
      <Button onPress={() => open('bottom')}>Bottom</Button>
      <Drawer isOpen={isOpen} position={position} onClose={() => setIsOpen(false)}>
        <Typography variant="subtitleMedium">{position} drawer</Typography>
      </Drawer>
    </View>
  )
}

Custom Size & No Overlay

Set a custom width and hide the backdrop.

import { useState } from 'react'
import { View } from 'react-native'
import { Drawer } from '@xaui/native/drawer'
import { Button } from '@xaui/native/button'
import { Typography } from '@xaui/native/typography'

export function DrawerCustomSizeExample() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <View>
      <Button onPress={() => setIsOpen(true)}>Open Wide Drawer</Button>
      <Drawer
        isOpen={isOpen}
        width={360}
        showOverlay={false}
        onClose={() => setIsOpen(false)}
      >
        <Typography variant="subtitleLarge">Wide Drawer</Typography>
        <Typography>No overlay backdrop is shown.</Typography>
        <Button onPress={() => setIsOpen(false)}>Close</Button>
      </Drawer>
    </View>
  )
}