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.

constloginRoutes= {
  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',
    },
  },
}

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

constmapStateToProps=state=> {
  return {
    isLogin:state.user.isLogin,
 };
};constAppNav=({isLogin})=> {
  constContainer=createAppContainer(createDrawerNavigator(
      {
        ...drawerRoutes,
        App:createStackNavigator(
          {
            ...routes,
            Tabs:createBottomTabNavigator(isLogin?loginRoutes :noLoginRoutes),
          },
          routesConfig),
      },
      drawerConfig));return<Container/>;
};exportdefaultconnect(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.

constApp = 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.

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

EDIT

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

constLoginTabs = createBottomTabNavigator( ... );
constNotLoginTabs = createBottomTabNavigator( ... );

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

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

exportdefaultAuthTabs = connect(mapStateToProps)(Tabs)

In AppTest

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