User role wise drawer navigation in react-native

Question

I have added react-navigation-drawer for implementing drawer navigation in my app. I have created a file named PrimaryNav.js and added all navigation code in it.

import Login from './components/Login';
import Employee from './pages/Employee';
import { createAppContainer,SafeAreaView, } from 'react-navigation'
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';
import React from 'react';

const Primary_Nav = createDrawerNavigator({
    Login: {
      screen: Login,
      navigationOptions: {
        drawerLabel: () => null
      }
    },
    Home_kitchen: {
      screen: Home_kitchen,
      navigationOptions: {
        drawerLabel: "Home"
      }
    },
    Employee: {
      screen: Employee,
      navigationOptions:{
        drawerLabel:"Employee",
      }
    },
  },{
    initialRouteName:'Login',
    drawerPosition: 'left',
    drawerType: "slide",
    }
});

const PrimaryNav = createAppContainer(Primary_Nav);
export default PrimaryNav;

Something like above. I have called this file in the App.js, the issue I am facing is I need to set a drawer item based on the role which the user has. So if the user role is cashier he should not be able to see all the menu.

All the pages are coming properly in the drawer menu but the question is how should I want to manage menu role wise in my app and changed the menu based on the roles of the user?

Check this: https://stackoverflow.com/questions/54587064/is-there-a-way-to-hide-a-tab-item-when-using-createbottomtabnavigator-and-create — Karthik, Dec 27 '19 at 06:48
Which section should I refer to in the above link? I am bit confused, I want to send a drawer menu based on the user role. — Maq, Dec 27 '19 at 07:00

shammi · Answer 1 · 2019-12-29T04:44:25.630

hi I saw your issue and I am trying to helping you. I have make a custom design for drawer components . -firstly you can create a extra file for drawer Design like DrawerComponent.js and import in your code where you are create a drawer navigator

import DrawerComponent from "./DrawerComponent";

const Primary_Nav = createDrawerNavigator(
{
 Login: {
  screen: Login,
  navigationOptions: {
    drawerLabel: () => null
  }
},
Home_kitchen: {
  screen: Home_kitchen,
  navigationOptions: {
    drawerLabel: "Home"
  }
},
Employee: {
  screen: Employee,
  navigationOptions: {
    drawerLabel: "Employee"
  }
}
},
{
  initialRouteName: "Login",
  drawerPosition: "left",
  drawerType: "slide",
  contentComponent: DrawerComponent // i added this DrawerComponent
}
);

const PrimaryNav = createAppContainer(Primary_Nav);
export default PrimaryNav;

now in the DrawerComponent.js

import React, { Component } from "react";
import { Text, View, TouchableOpacity } from "react-native";

export default class DrawerComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      role: 1 // i used 1 for cashier and 0 for chef
    };
  }

  render() {
    const { role } = this.state;
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1, paddingVertical: 40, paddingHorizontal: 20 }}>
        <TouchableOpacity
          style={{ margin: 20 }}
          onPress={() => navigation.navigate("Home_kitchen")}
        >
          <Text>Home</Text>
        </TouchableOpacity>
        {role ? (
          <TouchableOpacity
            style={{ margin: 20 }}
            onPress={() => navigation.navigate("Employee")}
          >
            <Text>Employee</Text>
          </TouchableOpacity>
        ) : null}
      </View>
    );
  }
}

if you are change the role to 0 then the Employee tab is disable in Drawer Navigator I have user the ternary operator for conditions. you can modify is as you can want. hope it will helpful for you.

Hi, Thank you for your reply. The role will be coming dynamically from the api call. So when I try to login, I get the role of the user and based on that role menu should come. So For the first time login your code will not work but after first login I will store data in async and than get data in drawer page where I can give condition based on role, than your code will work properly. — Maq, Dec 30 '19 at 08:49

User role wise drawer navigation in react-native

1 Answers1