React-native-paper: drawer sample code?

[littlehome-eugene]

There's a Drawer.Item and Drawer.Section .

But I don't get how to show or hide drawer itself.. There's no sample for drawer in the example directory either.

https://github.com/callstack/react-native-paper/issues/358 mentions removing Drawer component,
so how do we show the drawer?

[Pushplaybang]

Also curious about this, surprised to not see a drawer component, is there an well supported alternative?

[ferrannp]

This is how we do it in the example: https://github.com/callstack/react-native-paper/blob/dec191f5c714a223fca43fd4fd3cd064971d9db5/example/App.js#L24-L43 and https://github.com/callstack/react-native-paper/blob/dec191f5c714a223fca43fd4fd3cd064971d9db5/example/DrawerItems.js.

[hotgeart]

The doc is unclear on how to put a Drawer.

[Trancever]

@hotgeart Our library supports Drawer.Item and Drawer.Section components which are just building blocks that you can put inside drawer to make it look like material component. If you need drawer component take a look at react-navigation which is a navigation library for react-native and it provides Drawer component (we also use it in our example app).

[hotgeart]

Since this issue is in the first google results, here a sample code for the beginners:

App.js:

import React from "react";
import { Text, View, ScrollView } from "react-native";
import { createAppContainer, createDrawerNavigator } from "react-navigation";
import { DrawerActions } from "react-navigation";
import { Appbar, Drawer } from "react-native-paper";
import { SafeAreaView } from "react-navigation"; // ⚠ you need the package 'react-navigation'

class First extends React.Component {
  render() {
    return (
      <View>
        <Appbar.Header>
          <Appbar.Action
            icon="menu"
            onPress={() =>
              this.props.navigation.dispatch(DrawerActions.toggleDrawer())
            }
          />
          <Appbar.Content title="First Page" />
        </Appbar.Header>
        <Text>First Page</Text>
      </View>
    );
  }
}

class Second extends React.Component {
  render() {
    return (
      <View>
        <Appbar.Header>
          <Appbar.Action
            icon="menu"
            onPress={() =>
              this.props.navigation.dispatch(DrawerActions.toggleDrawer())
            }
          />
          <Appbar.Content title="Second Page" />
        </Appbar.Header>
        <Text>Second Page</Text>
      </View>
    );
  }
}

const Menu = createDrawerNavigator(
  {
    First: { screen: First },
    Second: { screen: Second }
  },
  {
    contentComponent: props => (
      <ScrollView>
        <SafeAreaView forceInset={{ top: "always", horizontal: "never" }}>
          <Drawer.Item
            label="First Page"
            active="true"
            onPress={() => props.navigation.navigate("First")}
          />
          <Drawer.Item
            label="Second Page"
            active="true"
            onPress={() => props.navigation.navigate("Second")}
          />
        </SafeAreaView>
      </ScrollView>
    )
  }
);

const AppNav = createAppContainer(Menu);

export default class App extends React.Component {
  render() {
    return <AppNav />;
  }
}

[natelowry]

snack of @hotgeart's example code if you want to see it in action:

https://snack.expo.io/@natelowry/react-native-paper-drawer-sample

[Leafgard]

Would it be possible to see an implementation example of a Drawer Item with a Badge ? Tried everything and wasn't able to add one :/

[zachariahtimothy]

Am curious if there is any examples out there without relying on react-navigation? React Navigation is a GREAT library but would love to know if there is a reasonable way to implement material style navigation without it.

[xXFracXx]

I've gotten the drawer implemented, but the only way currently to dismiss it is by clicking the android back button, would it be possible to click on the screen area next to the drawer to dismiss, by screen area i mean the area that is darkened, though which you can see the base screen, as the drawer only takes up 75% of the screen. Any insight would be appreciated.

[zachariahtimothy]

@xXFracXx I ended up setting things up with React Gesture Handler Drawer Layout. I am facing the same issue and my approach will be to use the Tap Gesture Handler, similar to Material UI's click away listener: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ClickAwayListener/ClickAwayListener.js

[wholenews]

Same. I'm using react-router-native. I ended up using react-native-side-menu-updated.