CODEWITHSUNDEEP
javascriptandroidreactjsreact-native
Musthafa
Musthafa

Reputation: 632

How to create a seperate navigation Drawer for different users : React Native

I have an application in which I have 3 drawer items in a custom drawer function. I have a login page as the main component. What I'm trying to do is to display a specific drawer for admin users and a specific drawer for normal users. I have searched In a number of blogs and documentation and couldn't find anything very useful. 

AdminDrawer: Account, Dashboard etc

UserDrawer: Profile, Contact etc

I have tried to achieve this using many methods. I have firebase login and I'm checking user based on TextInput and sending them to corresponding pages. I'm trying to hide some items for normal users.

Here is my 

DrawerNavigator.js


const DrawerContent = (props) => (

    <Container>
        <Header style={styles.header}>
            <Body>
                <Image
                    style={styles.head_image}
                    source={require('../assets/logo.png')}
                />
            </Body>
        </Header>
        <Content>
            <DrawerItems {...props} />
        </Content>
    </Container>
)

const DrawerNavigator = createDrawerNavigator(

    {
    Admin: {
        screen: Admin,
        navigationOptions: {
            drawerLabel: "Account",
            drawerIcon: () => (
                <Ionicons name="md-home" style={styles.icon} size={20} />
            )
        }
    },
    Register: {
        screen: Register,
        navigationOptions: {
            drawerLabel: "Register a user",
            drawerIcon: ({ tintColor }) => (
                <Ionicons name="md-person-add" style={styles.icon} size={20} />
            )
        }
    },
    UserPage: {
        screen: User,
        navigationOptions: {
            drawerLabel: "User",
            drawerIcon: ({ tintColor }) => (
                <Ionicons name="md-person-add" style={styles.icon} size={20} />
            )
        }
    }
},
    {
        initialRouteName: 'Admin',
        drawerPosition: 'left',
        contentComponent: DrawerContent,
        drawerOpenRoute: 'DrawerOpen',
    }
);

And here is my 

AppNavigator.js


export default createAppContainer(
    createSwitchNavigator({
        Auth: Login,
        Main:DrawerNavigator,
    })
);

And in the 

Login.js

I'm doing the login authentication something like,

handleLogin = () => {
      const { email , password } = this.state;
      firebase.auth()
          .signInWithEmailAndPassword(email, password)
          .then(() => {

          })
          .catch(error => alert(error))
    }

I would like to hide some drawer items from the normal user or show separate drawer for admin and normal user

Upvotes: 0

Views: 622

Answers (1)

Daniel Zheng
Daniel Zheng

Reputation: 312

You can use switch navigation for this case.

const mainSwitchNavigator = createSwitchNavigator({
  Admin: {
    screen: AdminDrawer,
  },
  User: {
    screen: UserDrawer,
  }
});

And update handleLogin to this:

handleLogin = () => {
  const { email , password } = this.state;
  firebase.auth()
    .signInWithEmailAndPassword(email, password)
    .then(() => {
      if(email == "[email protected]"){
        this.setState({role:"admin"})
        this.props.navigation.navigate('Admin')
      } else if(email == "[email protected]") {
        this.setState({role:"admin"})
        this.props.navigation.navigate('User')
      }
    })
    .catch(error => alert(error))
}

Upvotes: 1

Related Questions