/**
* Drawer — a panel that comes in from an edge of the screen and covers the app
* until it is dismissed.
*
* ```tsx
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* ## Why the sides are `start` and `end`
*
* A drawer is the one overlay whose whole identity is the edge it belongs to,
* and in a right-to-left app "the navigation edge" is the right one. Naming the
* sides `left` and `right` would bake a reading direction into the API and
* force every caller in an RTL app to invert it themselves, so the sides are
* logical: `start` is the edge text begins at, `end` the edge it runs toward.
* Both follow the enclosing ``, and `top` and `bottom` mean what
* they say because the vertical axis does not mirror.
*
* Yoga mirrors the panel's own position, because that is laid out from `start-0`
* / `end-0`. It does not mirror the drag, which is measured in raw pixels — so
* the gesture consults the direction and negates itself, which is what keeps a
* swipe *outward* dismissing in both directions rather than only one.
*
* ## Why it is not a BottomSheet with a different edge
*
* A sheet is sized by its content and dragged along the axis its scroller runs
* on, which is why so much of it is about sharing one drag between the two. A
* side drawer is sized by the screen and dragged across its scroller's axis, so
* the two gestures never compete: the cross-axis drag simply fails and the list
* keeps it. That difference is the reason this is a separate component and not
* a prop on the sheet.
*/
import { type ReactElement, type ReactNode } from 'react';
import { type ScrollViewProps, type ViewProps } from 'react-native';
export type DrawerSide = 'start' | 'end' | 'top' | 'bottom';
export type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
export type DrawerCloseSide = 'start' | 'end';
export interface DrawerProps {
children: ReactNode;
/** Open state, when you want to own it. Pair with `onOpenChange`. */
open?: boolean;
/** Called with the next open state, whether the drawer or you caused it. */
onOpenChange?: (open: boolean) => void;
/** Open state to start at when you are not controlling it. */
defaultOpen?: boolean;
}
declare function DrawerRoot({ children, open: controlledOpen, onOpenChange, defaultOpen, }: DrawerProps): import("react").JSX.Element;
export interface DrawerTriggerProps {
/** A single pressable element. Its own `onPress` still runs. */
children: ReactElement<{
onPress?: (...args: unknown[]) => void;
}>;
}
declare function DrawerTrigger({ children }: DrawerTriggerProps): ReactElement<{
onPress?: (...args: unknown[]) => void;
}, string | import("react").JSXElementConstructor>;
export interface DrawerCloseProps {
/** A single pressable element. Its own `onPress` still runs. */
children: ReactElement<{
onPress?: (...args: unknown[]) => void;
}>;
}
declare function DrawerClose({ children }: DrawerCloseProps): ReactElement<{
onPress?: (...args: unknown[]) => void;
}, string | import("react").JSXElementConstructor>;
export interface DrawerContentProps extends ViewProps {
className?: string;
/**
* Which edge the drawer is docked to. `start` and `end` are the edges text
* begins and ends at, so both follow the enclosing `` rather than
* pinning the drawer to a physical side.
*/
side?: DrawerSide;
/**
* How much of the screen the drawer takes — its width on `start` / `end`, its
* height on `top` / `bottom`. A horizontal drawer is also capped in points,
* so `md` is a 320-point navigation panel on a tablet rather than 78% of it.
*/
size?: DrawerSize;
/** Tap on the backdrop closes the drawer. Default true. */
dismissible?: boolean;
/**
* Drag the drawer back toward its edge to dismiss it. Default true. Turn it
* off for a drawer whose content wants the same axis — a horizontal
* scroller in a side drawer.
*/
swipeToDismiss?: boolean;
/** Show a close button in the drawer's inner top corner. Default true. */
showClose?: boolean;
/**
* Which top corner the close button takes. Logical, like `side`: `end` is the
* corner text runs toward, so it is the right one in a left-to-right app and
* the left one in a right-to-left one.
*
* Defaults to the corner *away* from the docked edge, so an `end` drawer's
* button does not sit against the screen edge the panel came out of. Set it
* when the drawer reads better with the button on the outer corner instead —
* a panel people close by reaching for the same corner every time.
*/
closeSide?: DrawerCloseSide;
/**
* Frost the screen behind the drawer instead of dimming it. Needs the
* optional `expo-blur`; without it this dims, rather than failing.
*
* Someone who has Reduce Transparency switched on gets an opaque
* backdrop instead, which is the whole point of the setting.
*/
blur?: boolean;
children?: ReactNode;
}
declare function DrawerContent({ className, side, size, dismissible, swipeToDismiss, showClose, closeSide, blur, children, ...props }: DrawerContentProps): import("react").JSX.Element | null;
export interface DrawerHeaderProps extends ViewProps {
className?: string;
/** Heading for the drawer. Strings are wrapped; anything else is drawn as given. */
title?: ReactNode;
/** A line under the title, for what the drawer is for. */
description?: ReactNode;
children?: ReactNode;
}
declare function DrawerHeader({ className, title, description, children, ...props }: DrawerHeaderProps): import("react").JSX.Element;
export interface DrawerBodyProps extends ScrollViewProps {
className?: string;
/**
* Scroll the body when it overflows. Pass `false` to lay the content out
* plainly instead — for a drawer whose content is known to fit, and for one
* that brings its own list, since a scroller nested inside this one leaves
* neither of them scrolling properly.
*/
scrollable?: boolean;
children?: ReactNode;
}
declare function DrawerBody({ className, scrollable, children, contentContainerStyle, ...props }: DrawerBodyProps): import("react").JSX.Element;
export interface DrawerFooterProps extends ViewProps {
className?: string;
children?: ReactNode;
}
declare function DrawerFooter({ className, children, ...props }: DrawerFooterProps): import("react").JSX.Element;
export declare const Drawer: typeof DrawerRoot & {
Trigger: typeof DrawerTrigger;
Content: typeof DrawerContent;
Header: typeof DrawerHeader;
Body: typeof DrawerBody;
Footer: typeof DrawerFooter;
Close: typeof DrawerClose;
};
export {};
//# sourceMappingURL=index.d.ts.map