CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
khateeb
khateeb

Reputation: 5469

How to dynamically specify screens in React Navigation based on contents of redux store?

My navigator is:

import { connect } from 'react-redux';
import { createDrawerNavigator } from 'react-navigation';

const screens = {
  Home: Homecreen,
};
if (this.props.userStatus !== 'active') {
  screens.Upgrade = UpgradeScreen;
}

const MainDrawer = createDrawerNavigator(screens);

const mapStateToProps = (state) => {
  return { userStatus: state.user.status };
};

export default connect(mapStateToProps)(MainDrawer);

I want to show the UpgradeScreen only if the user status is not active. In the code above, I get the error:

undefined is not an object (evaluating 'this.props.userStatus')

How do I fix this?

Upvotes: 5

Views: 617

Answers (2)

Berk Elmas
Berk Elmas

Reputation: 19

As jordan pointed out, that solution works out. Here is my snippet.

const MyDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen
  },
  Second: {
    screen: SecondScreen
  }
});

const MyApp = createAppContainer(MyDrawerNavigator);

const myCustomComp = props => {
  const username = useSelector(state => state.AuthReducer.username);
  const FirstCase = createAppContainer(MyDrawerNavigator);
  const SecondCase = createAppContainer(
    createDrawerNavigator({
      Home: {
        screen: HomeScreen
      }
    })
  );
  return username === "berkelmass" ? <FirstCase /> : <SecondCase />;
};

const mapStateToProps = state => ({
  username: state.AuthReducer.username
});

export default connect(mapStateToProps)(myCustomComp);

Upvotes: 0

Jordan Enev
Jordan Enev

Reputation: 18674

In order to have access to this.props.userStatus, you should have a component. Here's how you can do it:

import { connect } from 'react-redux';
import { createDrawerNavigator } from 'react-navigation';

const screens = {
  Home: Homecreen,
};

const MainDrawer = ({ userStatus }) => {
  if (userStatus !== 'active') {
    screens.Upgrade = UpgradeScreen;
  }

  const Navigator = createDrawerNavigator(screens);

  return <Navigator />
}

const mapStateToProps = (state) => {
  return { userStatus: state.user.status };
};

export default connect(mapStateToProps)(MainDrawer);

Upvotes: 2

Related Questions