How Can I Access To Redux Store With React Navigation?

I have App 'Music App' for tow users type 'Guest, a user registered' I have a bottom navigator for those, When Guest opens my app I want to render just 4 bottom tabs 'Home, browse,

Solution 1:

You need to create dynamic routes, and one component that renders tabs based on whether the user is logged in or not. in Tabs.js do the following.

const loginRoutes = {
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
    },
  },
  Browse: {
    screen: Browse,
    navigationOptions: {
      title: 'Browse',
    },
  },
  Search: {
    screen: Search,
    navigationOptions: {
      title: 'Search',
    },
  },
  Radio: {
    screen: Radio,
    navigationOptions: {
      title: 'Radio',
    },
  },
  Library: {
    screen: Library,
    navigationOptions: {
      title: 'Library',
    },
  },
}

const noLoginRoutes = {
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
    },
  },
  Browse: {
    screen: Browse,
    navigationOptions: {
      title: 'Browse',
    },
  },
  Search: {
    screen: Search,
    navigationOptions: {
      title: 'Search',
    },
  },
  Radio: {
    screen: Radio,
    navigationOptions: {
      title: 'Radio',
    },
  }
}

const mapStateToProps = state => {
  return {
    isLogin: state.user.isLogin,
 };
};


 const AppNav = ({ isLogin }) => {
  const Container = createAppContainer(
    createDrawerNavigator(
      {
        ...drawerRoutes,
        App: createStackNavigator(
          {
            ...routes,
            Tabs: createBottomTabNavigator(
              isLogin ? loginRoutes : noLoginRoutes
            ),
          },
          routesConfig
        ),
      },
      drawerConfig
    )
  );

  return <Container />;
};

export default connect(mapStateToProps)(AppNav);

DEMO

Solution 2:

I think you meant to make App a component. In this case it'd be a functional component, so no this, and you also need to return valid JSX.

const App = props => props.isLogin ? (
    <LoginTabs {...props} />
  ) : (
    <NotLoginTabs {...props} />
  );

Notice I've PascalCased the notLoginTabs component to be react compliant, and returning them as JSX with props spread in.

If the child components don't care about isLogin then destructure it out before passing props. This cleans up the code and doesn't pass unnecessary props on to children.

const App = ({ isLogin, ...props }) => isLogin ? (
    <LoginTabs {...props} />
  ) : (
    <NotLoginTabs {...props} />
  );

EDIT

Create a tabs component which houses your authenticated and unauthenticated tabs.

const LoginTabs = createBottomTabNavigator( ... );
const NotLoginTabs = createBottomTabNavigator( ... );

const Tabs = ({ isLogin, ...props }) => isLogin ? (
    <LoginTabs {...props} />
  ) : (
    <NotLoginTabs {...props} />
  );

const mapStateToProps = state => ({
  isLogin: state.user.isLogin,
});

export default AuthTabs = connect(mapStateToProps)(Tabs)

In AppTest

...
const AppNavigator = createStackNavigator(
  {
    TabHome: {
      screen: AuthTabs,
...