Skip to content

reanimated-drawer-layout.mdx

Latest commit

 

History

History
302 lines (228 loc) · 9.52 KB

reanimated-drawer-layout.mdx

File metadata and controls

302 lines (228 loc) · 9.52 KB
id reanimated-drawer-layout
title Reanimated Drawer Layout
sidebar_label Reanimated Drawer Layout

import useBaseUrl from '@docusaurus/useBaseUrl';

import HeaderWithBadge from '@site/src/components/HeaderWithBadge';

:::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.

drawerType Description
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')} />

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.

<HeaderWithBadge 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.

<HeaderWithBadge platforms={['android', 'web']}>

mouseButton

<CollapsibleCode label="Show composed types definitions" expandedLabel="Hide composed types definitions" lineBounds={[0, 1]} src={` mouseButton: MouseButton | SharedValue;

enum MouseButton { LEFT, RIGHT, MIDDLE, BUTTON_4, BUTTON_5, ALL, } `}/>

Allows users to choose which mouse button should handler respond to. Arguments can be combined using | operator, e.g. mouseButton(MouseButton.LEFT | MouseButton.RIGHT). Default value is set to MouseButton.LEFT.

<HeaderWithBadge 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.

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', }, }); `}/>