Show content above in a bottom sliding drawer.
Animation and dragging on native and web.
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',],},},],}
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>)}
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). |