DrawerDrawer Component

UX Guidelines

Dev

APIThis is the list of additional props for the component

bounciness

number

The drawer animation bounciness

customValue

any

Custom value of any type to pass on to the component and receive back in the action callbacks

disableHaptic

boolean

Whether to disable the haptic

fullLeftThreshold

number

Threshold for a left full swipe (0-1)

fullRightThreshold

number

Threshold for a right full swipe (0-1)

fullSwipeLeft

boolean

Whether to allow a full left swipe

fullSwipeRight

boolean

Whether to allow a full right swipe

itemsIconSize

number

The items' icon size. Default is 24

itemsMinWidth

number

Set a different minimum width

itemsTextStyle

TextStyle

The items' text style

itemsTintColor

string

The color for the text and icon tint of the items. Default is Colors.white

leftItem

ItemProps

The bottom layer's item to appear when opened from the left (a single item)

onDragStart

() => any

Called when drag gesture starts

onFullSwipeLeft

() => void

Callback for left item full swipe

onFullSwipeRight

() => void

Callback for right item full swipe

onSwipeableWillClose

() => void

Callback for close action

onSwipeableWillOpen

() => void

Callback for open action

onToggleSwipeLeft

() => {rowWidth, leftWidth, dragX, resetItemPosition}

Callback for left item toggle swipe

onWillFullSwipeLeft

() => void

Callback for just before left item full swipe

onWillFullSwipeRight

() => void

Callback for just before right item full swipe

rightItems

ItemProps[]

The bottom layer's items to appear when opened from the right

style

ViewStyle

Component's style

testID

string

The test id for e2e tests

useNativeAnimations

boolean

Perform the animation in natively