Homepage

Getting Started

IntroductionInstallationConfigurationThemesPropsBenchmarksReleases

Core

styled()VariantsAnimationsStack & TextThemeuseMedia()useTheme()

Tamagui

StacksParagraphHeadingsButtonGroupInput, TextareaLabelSliderSwitchImageCardSeparatorPopoverTooltipLinearGradientSpinnerProgressShapesAnchorVisuallyHiddenHTML Elements

Separate Components

Drawer

Extras

Feather Icons

Guides

Design SystemsDevelopingNext.jsExpocreate-tamagui-app

Community

GitHub
Twitter
Discord
Beta
Github

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

Previous

HTML Elements

Next

Feather Icons

Edit this page on GitHub.