1

From the API server, I receive the role information after logging in.

If it is a user with management rights, it should load a different screen after logging in.

App.js

This must be loaded for the regular user

AppTabNavigator = createBottomTabNavigator({
  Settings: {screen: SettingsScreen},
  Home: {screen: HomeScreen},
  Board: {screen: BoardScreen},
})

And that's for the managing person

AppTabNavigator = createBottomTabNavigator({
  Settings: {screen: SettingsScreen},
  Home: {screen: HomeScreen},
  Board: {screen: BoardScreen},
  Configuration: {screen: ConfigurationScreen},
})
5
  • 1
    What's the question? Sep 28, 2018 at 8:36
  • What did you mean by "When logging in to Json" ? What did you tried ?
    – Anis D
    Sep 28, 2018 at 8:37
  • @estus Setting the Navigation structure is in the App.js file. How can this depend on the login status as this file will be loaded first in the application?
    – ImpoUserC
    Sep 28, 2018 at 8:41
  • I'm not sure what you mean. But the question should contain clear problem statement and stackoverflow.com/help/mcve Sep 28, 2018 at 8:52
  • @estus Depending on who logs in I want to load another TabNavigator which is in the App.js file. Briefly
    – ImpoUserC
    Sep 28, 2018 at 8:55

1 Answer 1

1

If it is just two types of users, it can be easily done with a conditional render.

// imports

const RegularUserNavigation = createBottomTabNavigator({
  Settings: {screen: SettingsScreen},
  Home: {screen: HomeScreen},
  Board: {screen: BoardScreen},
});
const ManagementUserNavigation = createBottomTabNavigator({
  Settings: {screen: SettingsScreen},
  Home: {screen: HomeScreen},
  Board: {screen: BoardScreen},
  Configuration: {screen: ConfigurationScreen},
});

export default class YourScreen extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  state = {
    // I'm assuming once you sign in,
    // these state variables are changed inside your login function
    signedIn: false,
    userRole: null,
  }

  renderManagementUserNavigation = () => {
    return (<ManagementUserNavigation />);
  }

  renderRegularUserNavigation = () => {
    return (<RegularUserNavigation />);
  }

  renderSignInContent = () => {
    // render the sign in contents here
  }

  render() {
    const {signedIn, userRole} = this.state;
    let result = null;

    if (signedIn) {
      result = userRole === 'regular' ?
        this.renderRegularUserNavigation() :
        this.renderManagementUserNavigation();
    } else {
      result = this.renderSignInContent();
    }

    return result;
  }
}

NOTE - Explicitly rendering more than one Navigation is not recommended. See here. But we have to use something like this to conditionally render the navigations.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.