Skip to content

reanimated-drawer-layout.mdx

Latest commit

 

History

History
385 lines (282 loc) · 11.1 KB

reanimated-drawer-layout.mdx

File metadata and controls

385 lines (282 loc) · 11.1 KB
id reanimated-drawer-layout
title Reanimated Drawer Layout
sidebar_label Reanimated Drawer Layout

import useBaseUrl from '@docusaurus/useBaseUrl';

import MouseButtonProp from '../gestures/_shared/mouse-button.mdx';

:::info This component acts as a cross-platform replacement for React Native's DrawerLayoutAndroid component, written using Reanimated. For detailed information on standard parameters, please refer to the React Native documentation. :::

To use ReanimatedDrawerLayout, first ensure that Reanimated is installed and that your app is wrapped in GestureHandlerRootView. You can then import it as follows:

import ReanimatedDrawerLayout from 'react-native-gesture-handler/ReanimatedDrawerLayout';

Properties

drawerType

drawerType?: DrawerType;

Specifies the way the drawer will be displayed. Accepts values of the DrawerType enum. Defaults to FRONT.

  • FRONT The drawer will be displayed above the content view.
  • BACK The drawer will be displayed below the content view, revealed by sliding away the content view.
  • SLIDE The drawer will appear attached to the content view, opening it slides both the drawer and the content view.
FRONT BACK SLIDE
<img src={useBaseUrl('gifs/new-drawer-front.gif')} /> <img src={useBaseUrl('gifs/new-drawer-back.gif')} /> <img src={useBaseUrl('gifs/new-drawer-slide.gif')} />

drawerBackgroundColor

drawerBackgroundColor?: string;

Color of the drawer's background.

drawerWidth

drawerWidth?: number;

Width of the drawer. Defaults to 200.

drawerLockMode

<CollapsibleCode label="Show composed types definitions" expandedLabel="Hide composed types definitions" lineBounds={[0, 1]} src={` drawerLockMode?: DrawerLockMode;

export enum DrawerLockMode { UNLOCKED, LOCKED_CLOSED, LOCKED_OPEN, } `}/>

Specifies the lock mode of the drawer.

  • UNLOCKED The drawer is unlocked and can be opened or closed by gestures.
  • LOCKED_CLOSED The drawer will move freely until it settles in a closed position, then the gestures will be disabled.
  • LOCKED_OPEN The drawer will move freely until it settles in an opened position, then the gestures will be disabled.

keyboardDismissMode

<CollapsibleCode label="Show composed types definitions" expandedLabel="Hide composed types definitions" lineBounds={[0, 1]} src={` keyboardDismissMode?: DrawerKeyboardDismissMode;

export enum DrawerKeyboardDismissMode { NONE, ON_DRAG, } `}/>

Determines if system keyboard should be closed upon dragging the drawer.

animationSpeed

animationSpeed?: number;

Speed of animation that will play when letting go, or dismissing the drawer.

minSwipeDistance

minSwipeDistance?: number;

Minimal distance to swipe before the drawer starts moving.

contentContainerStyle

contentContainerStyle?: StyleProp<ViewStyle>;

Style of the content view container.

drawerContainerStyle

drawerContainerStyle?: StyleProp<ViewStyle>;

Style wrapping the drawer.

edgeWidth

edgeWidth?: number;

Width of the invisible, draggable area on the edge of the content view, which can be dragged to open the drawer.

hideStatusBar

hideStatusBar?: boolean;

When set to true, drawer component will use StatusBar API to hide the OS status bar when the drawer is dragged or idle in the open position.

statusBarAnimation

<CollapsibleCode label="Show composed types definitions" expandedLabel="Hide composed types definitions" lineBounds={[0, 1]} collapsed={false} src={` statusBarAnimation?: StatusBarAnimation;

export type StatusBarAnimation = 'none' | 'fade' | 'slide'; `}/>

May be used in combination with hideStatusBar to select the animation used for hiding the status bar. See StatusBar API docs. Defaults to slide.

overlayColor

overlayColor?: string;

Color of the background overlay on top of the content window when the drawer is open.
This color's opacity animates from 0% to 100% as the drawer transitions from closed to open. Defaults to rgba(0, 0, 0, 0.7).

renderNavigationView

renderNavigationView: (
  progressAnimatedValue: SharedValue<number>
) => ReactNode;

A renderer function for the drawer component is provided with a progress parameter called progressAnimatedValue, which is a SharedValue indicating the progress of the drawer's opening or closing animation. This value is 0 when the drawer is fully closed and 1 when it is fully opened. The drawer component can use this value to animate its children during the opening or closing process. This function must return a ReactNode.

onDrawerClose

onDrawerClose?: () => void;

A function which is called when the drawer has been closed.

onDrawerOpen

onDrawerOpen?: () => void;

A function which is called when the drawer has been opened.

onDrawerSlide

onDrawerSlide?: (position: number) => void;

A function is called when the drawer is moving or animating, provided with a position parameter. This position value indicates the progress of the drawer's opening or closing animation. It equals 0 when the drawer is closed and 1 when the drawer is fully opened. This value can be utilized by the drawer component to animate its children as the drawer opens or closes.

onDrawerStateChanged

<CollapsibleCode label="Show composed types definitions" expandedLabel="Hide composed types definitions" lineBounds={[0, 4]} src={` onDrawerStateChanged?: ( newState: DrawerState, drawerWillShow: boolean ) => void;

export enum DrawerState { IDLE, DRAGGING, SETTLING, } `}/>

A function is called when the status of the drawer changes, taking newState to represent the drawer's interaction state and drawerWillShow, which is true when the drawer starts animating towards the open position and false otherwise.

<Badges platforms={['ios']}>

enableTrackpadTwoFingerGesture

enableTrackpadTwoFingerGesture?: boolean;

Enables two-finger gestures on supported devices, for example iPads with trackpads. If not enabled the gesture will require click + drag, with enableTrackpadTwoFingerGesture swiping with two fingers will also trigger the gesture.

children

children?: ReactNode | ((openValue?: SharedValue<number>) => ReactNode);

Either a component rendered in the content view or a function. If children is a function, it receives an openValue parameter - SharedValue that indicates the progress of the drawer's opening or closing animation. This value equals 0 when the drawer is closed and 1 when it is fully opened. The drawer component can use this value to animate its children during the opening or closing process. This function must return a ReactNode.

<Badges platforms={['web']}>

enableContextMenu

enableContextMenu: boolean;

Specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Default value is set to false if MouseButton.RIGHT is specified.

<Badges platforms={['web']}>

userSelect

userSelect: 'none' | 'auto' | 'text';

This parameter allows to specify which userSelect property should be applied to underlying view. Default value is set to "none".

<Badges platforms={['web']}>

activeCursor

activeCursor: ActiveCursor;

This parameter allows to specify which cursor should be used when gesture activates. Supports all CSS cursor values (e.g. "grab", "zoom-in"). Default value is set to "auto".

Drawer ref methods

Using a reference to ReanimatedDrawerLayout allows you to manually trigger the opening and closing of the component.

const drawerRef = useRef<DrawerLayoutMethods>(null);

Both methods accept an optional options parameter, which allows you to customize the animation of the drawer movement.

export type DrawerMovementOption = {
  initialVelocity?: number;
  animationSpeed?: number;
};

openDrawer

openDrawer: (options?: DrawerMovementOption) => void;

Allows to manually open the drawer.

closeDrawer

closeDrawer: (options?: DrawerMovementOption) => void;

Allows to manually close the drawer.

Example

Example of a ReanimatedDrawerLayout component can be found in Gesture Handler repository.

<CollapsibleCode label="Show full example" expandedLabel="Hide full example" lineBounds={[14, 49]} src={` import React, { useRef } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { GestureDetector, GestureHandlerRootView, useTapGesture, } from 'react-native-gesture-handler';

import ReanimatedDrawerLayout, { DrawerType, DrawerPosition, DrawerLayoutMethods, } from 'react-native-gesture-handler/ReanimatedDrawerLayout';

const DrawerPage = () => { return ( Lorem ipsum ); };

export default function ReanimatedDrawerExample() { const drawerRef = useRef(null); const tapGesture = useTapGesture({ onDeactivate: () => { drawerRef.current?.openDrawer(); }, runOnJS: true, });

return ( <ReanimatedDrawerLayout ref={drawerRef} renderNavigationView={() => } drawerPosition={DrawerPosition.LEFT} drawerType={DrawerType.FRONT}> Open drawer ); }

const styles = StyleSheet.create({ drawerContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'pink', }, innerContainer: { flex: 1, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center', gap: 20, }, box: { padding: 20, backgroundColor: 'pink', }, }); `}/>