Drawer

Show content above in a bottom sliding drawer.

Features

  • Animation and dragging on native and web.

Installation

For webpack, you'll need to ensure the reanimated babel plugin runs on the @gorhom/bottom-sheet package, something like this in your oneOf rules:

{
test: /(bottom-sheet).*\.[tj]sx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
plugins: [
'react-native-reanimated/plugin',
],
},
},
],
}

Usage

Drawer extends the excellent @gorhom/bottom-sheet . Note this will bring along react-native-reanimated  and will require some extra configuration with webpack .

Put <Drawer.Provider /> once at the top of your app, just below <Tamagui.Provider />.

import { Drawer } from '@tamagui/drawer'
import Tamagui from './tamagui.config'
export function App() {
return (
<Tamagui.Provider>
<Drawer.Provider>
<MyPage />
</Drawer.Provider>
</Tamagui.Provider>
)
}
function MyPage() {
return (
<Drawer open={show} onChangeOpen={setShow}>
<Drawer.Handle />
<Drawer.Backdrop />
<Drawer.Frame>
<Paragraph>Hello.</Paragraph>
</Drawer.Frame>
</Drawer>
)
}

If you want scrolling that plays well with gestures (see BottomSheetScrollView ):

function MyPage() {
return (
<Drawer open={show} onChangeOpen={setShow}>
<Drawer.Frame>
<Drawer.ScrollView></Drawer.ScrollView>
</Drawer.Frame>
</Drawer>
)
}

Or scrollable lists that play well with gestures (see BottomSheetFlatList , BottomSheetSectionList  or BottomSheetVirtualizedList ):

function MyPage() {
const data = useMemo(
() =>
Array(50)
.fill(0)
.map((_, index) => `index-${index}`),
[]
)
return (
<Drawer open={show} onChangeOpen={setShow}>
<Drawer.Frame>
<Drawer.FlatList data={data} keyExtractor={(i) => i} renderItem={ useCallback( ({ item }) => ( <YStack> <Paragraph>{item}</Paragraph> </YView> ), [] )} />
</Drawer.Frame>
</Drawer>
)
}

Drawer props

All the props from react-native-bottom-sheet , plus:

Prop

Type

Default

open
boolean

Show drawer.

onChangeOpen
(showing: boolean) => void

Called on change show (if dismissed).