How to toggle Drawer via Toolbar menu?

[Kison]

Hi and thanks for great components. Could someone please explain on how to toggle Drawer state via Toolbar menu?

[mezod]

I also need this. Would be great if the demo or the docs explained this :)

[sunaryohadi]

I think your problem is about navigation, not react-native-material-ui.

A week ago, I just submitted my RN Starter on github

https://github.com/sunaryohadi/react-native-material-ui-starter

Not a fully react-native-material-ui demo though, but I hope this will help you.

[mezod]

the problem for me is that I include directly into my component and nothing gets rendered, so the problem isn't even how I toggle it or in which route I put it, it simply doesn't render on iOS

[sunaryohadi]

I am not so sure with @mezod problem. It just work fine for me. (just added Drawer tag example to my starter above)

[mezod]

no worries, I checked your example, just to be sure I'm not doing anything wrong, all I do is:

import React from "react";
// import {} from "./styles";
import Icon from "react-native-ionicons";
import { variables } from "everydaycheckmobile/styles/variables";
import { Drawer, Avatar } from "react-native-material-ui";
import { View } from "react-native";

export default class Menu extends React.Component {
  render() {
    return (
      <View>
        <Drawer>
          <Drawer.Header>
            <Drawer.Header.Account
              avatar={<Avatar text="A" />}
              accounts={[
                { avatar: <Avatar text="B" /> },
                { avatar: <Avatar text="C" /> }
              ]}
              footer={{
                dense: true,
                centerElement: {
                  primaryText: "Reservio",
                  secondaryText: "business@email.com"
                },
                rightElement: "arrow-drop-down"
              }}
            />
          </Drawer.Header>
          <Drawer.Section
            divider
            items={[
              { icon: "bookmark-border", value: "Notifications" },
              { icon: "today", value: "Calendar", active: true },
              { icon: "people", value: "Clients" }
            ]}
          />
          <Drawer.Section
            title="Personal"
            items={[
              { icon: "info", value: "Info" },
              { icon: "settings", value: "Settings" }
            ]}
          />
        </Drawer>
      </View>
    );
  }
}

and then add it to the render of my screen:

render() {
    const { habits, habitsDates, user } = this.props;
    return (
      <MainScreen>
        <Menu />
        <MainNav habits={habits} showMenu={this.showMenu} />
        <SubNav user={user} />
      </MainScreen>
    );

(MainNav and SubNav get rendered) Also MainNav includes a MaterialUI Toolbar successfully so the ThemeProvider and the lib itself seem tobe properly imported. It's just the Drawer that doesn't get rendered at all

[mezod]

hmm added style={{ flex: 1 }} to the container view and at least it displays something now :_

[danielptm]

@mezod's advice will get the drawer appear. But it is not clear from docs how to make the drawer toggle in and out. Is it even possible yet?

[mezod]

@sunaryohadi is the swipe (from left side) supposed to work with the Drawer or this is something you also have to implement yourself?

[sunaryohadi]

Not mine for sure. I guess, it's react-navigation default behaviour.

[assetcorp]

I realized the drawer component works with react navigation. My problem is that the drawer renders okay, but does not slide from the side of the screen. It doesn't actually work as a drawer at all except it is just another screen component for react-navigation.

Anybody know how to fix this?

[mezod]

i think you have to do the animation yourself...

[nikoskleidis]

I found this lib https://github.com/react-native-community/react-native-side-menu useful on creating the drawer animation