@react-navigation/drawer/lib/typescript/src/types.d.ts

Integration for the drawer component from react-native-drawer-layout

import type { HeaderOptions } from '@react-navigation/elements';
import type { DefaultNavigatorOptions, Descriptor, DrawerActionHelpers, DrawerNavigationState, DrawerRouterOptions, NavigationHelpers, NavigationProp, ParamListBase, Route, RouteProp, Theme } from '@react-navigation/native';
import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
import type { PanGesture } from 'react-native-gesture-handler';
export type Scene = {
    route: Route<string>;
    focused: boolean;
    color?: string;
};
export type Layout = {
    width: number;
    height: number;
};
export type DrawerNavigationConfig = {
    /**
     * Function that returns React element to render as the content of the drawer, for example, navigation items.
     * Defaults to `DrawerContent`.
     */
    drawerContent?: (props: DrawerContentComponentProps) => React.ReactNode;
    /**
     * Whether inactive screens should be detached from the view hierarchy to save memory.
     * Make sure to call `enableScreens` from `react-native-screens` to make it work.
     * Defaults to `true`.
     */
    detachInactiveScreens?: boolean;
};
export type DrawerNavigationOptions = HeaderOptions & {
    /**
     * Title text for the screen.
     */
    title?: string;
    /**
     * Whether this screens should render the first time it's accessed. Defaults to `true`.
     * Set it to `false` if you want to render the screen on initial render.
     */
    lazy?: boolean;
    /**
     * Function that returns a React Element to display as a header.
     */
    header?: (props: DrawerHeaderProps) => React.ReactNode;
    /**
     * Whether to show the header. Setting this to `false` hides the header.
     * Defaults to `true`.
     */
    headerShown?: boolean;
    /**
     * Title string of a screen displayed in the drawer
     * or a function that given { focused: boolean, color: string } returns a React.Node
     * When undefined, scene title is used.
     */
    drawerLabel?: string | ((props: {
        color: string;
        focused: boolean;
    }) => React.ReactNode);
    /**
     * A function that given { focused: boolean, color: string } returns a React.Node to display an icon the drawer.
     */
    drawerIcon?: (props: {
        color: string;
        size: number;
        focused: boolean;
    }) => React.ReactNode;
    /**
     * Color for the icon and label in the active item in the drawer.
     */
    drawerActiveTintColor?: string;
    /**
     * Background color for the active item in the drawer.
     */
    drawerActiveBackgroundColor?: string;
    /**
     * Color for the icon and label in the inactive items in the drawer.
     */
    drawerInactiveTintColor?: string;
    /**
     * Background color for the inactive items in the drawer.
     */
    drawerInactiveBackgroundColor?: string;
    /**
     * Whether label font should scale to respect Text Size accessibility settings.
     */
    drawerAllowFontScaling?: boolean;
    /**
     * Style object for the single item, which can contain an icon and/or a label.
     */
    drawerItemStyle?: StyleProp<ViewStyle>;
    /**
     * Style object to apply to the `Text` inside content section which renders a label.
     */
    drawerLabelStyle?: StyleProp<TextStyle>;
    /**
     * Style object for the content section.
     */
    drawerContentContainerStyle?: StyleProp<ViewStyle>;
    /**
     * Style object for the wrapper view.
     */
    drawerContentStyle?: StyleProp<ViewStyle>;
    /**
     * Style object for the drawer component.
     * You can pass a custom background color for a drawer or a custom width here.
     */
    drawerStyle?: StyleProp<ViewStyle>;
    /**
     * Position of the drawer on the screen. Defaults to `left`.
     */
    drawerPosition?: 'left' | 'right';
    /**
     * Type of the drawer. It determines how the drawer looks and animates.
     * - `front`: Traditional drawer which covers the screen with a overlay behind it.
     * - `back`: The drawer is revealed behind the screen on swipe.
     * - `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
     * - `permanent`: A permanent drawer is shown as a sidebar.
     *
     * Defaults to `slide` on iOS and `front` on other platforms.
     */
    drawerType?: 'front' | 'back' | 'slide' | 'permanent';
    /**
     * Whether the statusbar should be hidden when the drawer is pulled or opens,
     */
    drawerHideStatusBarOnOpen?: boolean;
    /**
     * Animation of the statusbar when hiding it. use in combination with `drawerHideStatusBarOnOpen`.
     */
    drawerStatusBarAnimation?: 'slide' | 'none' | 'fade';
    /**
     * Color of the overlay to be displayed on top of the content view when drawer gets open.
     * The opacity is animated from `0` to `1` when the drawer opens.
     */
    overlayColor?: string;
    /**
     * Accessibility label for the overlay. This is read by the screen reader when the user taps the overlay.
     * Defaults to "Close drawer".
     */
    overlayAccessibilityLabel?: string;
    /**
     * Style object for the component wrapping the screen content.
     */
    sceneStyle?: StyleProp<ViewStyle>;
    /**
     * Function to modify the pan gesture handler via RNGH properties API.
     */
    configureGestureHandler?: (gesture: PanGesture) => PanGesture;
    /**
     * Whether you can use swipe gestures to open or close the drawer.
     * Defaults to `true`.
     * Not supported on Web.
     */
    swipeEnabled?: boolean;
    /**
     * How far from the edge of the screen the swipe gesture should activate.
     * Not supported on Web.
     */
    swipeEdgeWidth?: number;
    /**
     * Minimum swipe distance threshold that should activate opening the drawer.
     */
    swipeMinDistance?: number;
    /**
     * Whether the keyboard should be dismissed when the swipe gesture begins.
     * Defaults to `'on-drag'`. Set to `'none'` to disable keyboard handling.
     */
    keyboardDismissMode?: 'on-drag' | 'none';
    /**
     * Whether any nested stack should be popped to top when navigating away from the tab.
     * Defaults to `false`.
     */
    popToTopOnBlur?: boolean;
    /**
     * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
     * Defaults to `true` when `enableFreeze()` is run at the top of the application.
     * Requires `react-native-screens` version >=3.16.0.
     *
     * Only supported on iOS and Android.
     */
    freezeOnBlur?: boolean;
};
export type DrawerContentComponentProps = {
    state: DrawerNavigationState<ParamListBase>;
    navigation: DrawerNavigationHelpers;
    descriptors: DrawerDescriptorMap;
};
export type DrawerHeaderProps = {
    /**
     * Layout of the screen.
     */
    layout: Layout;
    /**
     * Options for the current screen.
     */
    options: DrawerNavigationOptions;
    /**
     * Route object for the current screen.
     */
    route: RouteProp<ParamListBase>;
    /**
     * Navigation prop for the header.
     */
    navigation: DrawerNavigationProp<ParamListBase>;
};
export type DrawerNavigationEventMap = {
    /**
     * Event which fires on tapping on the item in the drawer menu.
     */
    drawerItemPress: {
        data: undefined;
        canPreventDefault: true;
    };
    /**
     * Event which fires when a transition animation starts.
     */
    transitionStart: {
        data: {
            closing: boolean;
        };
    };
    /**
     * Event which fires when a transition animation ends.
     */
    transitionEnd: {
        data: {
            closing: boolean;
        };
    };
    /**
     * Event which fires when navigation gesture starts.
     */
    gestureStart: {
        data: undefined;
    };
    /**
     * Event which fires when navigation gesture is completed.
     */
    gestureEnd: {
        data: undefined;
    };
    /**
     * Event which fires when navigation gesture is canceled.
     */
    gestureCancel: {
        data: undefined;
    };
};
export type DrawerNavigationHelpers = NavigationHelpers<ParamListBase, DrawerNavigationEventMap> & DrawerActionHelpers<ParamListBase>;
export type DrawerNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = NavigationProp<ParamList, RouteName, NavigatorID, DrawerNavigationState<ParamList>, DrawerNavigationOptions, DrawerNavigationEventMap> & DrawerActionHelpers<ParamList>;
export type DrawerScreenProps<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = {
    navigation: DrawerNavigationProp<ParamList, RouteName, NavigatorID>;
    route: RouteProp<ParamList, RouteName>;
};
export type DrawerOptionsArgs<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = DrawerScreenProps<ParamList, RouteName, NavigatorID> & {
    theme: Theme;
};
export type DrawerDescriptor = Descriptor<DrawerNavigationOptions, DrawerNavigationProp<ParamListBase>, RouteProp<ParamListBase>>;
export type DrawerDescriptorMap = Record<string, DrawerDescriptor>;
export type DrawerProps = {
    dimensions: {
        width: number;
        height: number;
    };
    drawerPosition: 'left' | 'right';
    drawerStyle?: StyleProp<ViewStyle>;
    drawerType: 'front' | 'back' | 'slide' | 'permanent';
    configureGestureHandler?: (gesture: PanGesture) => PanGesture;
    hideStatusBarOnOpen: boolean;
    keyboardDismissMode: 'none' | 'on-drag';
    onClose: () => void;
    onOpen: () => void;
    open: boolean;
    overlayStyle?: StyleProp<ViewStyle>;
    renderDrawerContent: () => React.ReactNode;
    renderSceneContent: () => React.ReactNode;
    statusBarAnimation: 'slide' | 'none' | 'fade';
    swipeDistanceThreshold: number;
    swipeEdgeWidth: number;
    swipeEnabled: boolean;
    swipeVelocityThreshold: number;
    overlayAccessibilityLabel?: string;
};
export type DrawerNavigatorProps = DefaultNavigatorOptions<ParamListBase, string | undefined, DrawerNavigationState<ParamListBase>, DrawerNavigationOptions, DrawerNavigationEventMap, DrawerNavigationProp<ParamListBase>> & DrawerRouterOptions & DrawerNavigationConfig;
//# sourceMappingURL=types.d.ts.map