NestedTab navigation when logged-in

[ahetawal-p]

Hey @shubhnik So just tried out the nestedTab branch. While the initial login flow works seamless. I am trying to replicate a scenario when a user is already logged in, and opens the app.

1. In this scenario the user should directly land on to the feed tab under TabNavigator I tried fixing it by giving the loggedIn state the screen name as screen2 or feed none of them works. Any ideas here ?

2. The back button on header when inside Tab navigator should not go back to any of the login StackNavigators.

The structure looks like this:

const Tabs = TabNavigator({
  feed: {
    screen: Feed
  },
  logout: {
    screen: Logout
  }
});

const LoginsFlow = StackNavigator({
    login: {
      screen: Login
    },
    screen1: {
      screen: Screen1
    },
});

const navigator = StackNavigator({
    login: {
      screen: LoginsFlow
    },
  screen2: {
    screen: Tabs
  }
});

[shubhnik]

@ahetawal-p did you try this:

1. try changing this line to const ActionForLoggedIn = AppNavigator.router.getActionForPathAndParams( "screen2" );

2. For screen2 you can disable gestures and back button.

[ahetawal-p]

Yes I did, and it just gives me this error:

Object.getStateForAction
    TabRouter.js:105:46
Object.getStateForAction
    StackRouter.js:156:36
navigationReducer
    navigationReducer.js:68:46
<unknown>
    combineReducers.js:60:15
assertReducerShape
    combineReducers.js:51:24
combineReducers
    combineReducers.js:107:4
<unknown>
    store.js:40:36
loadModuleImplementation
    require.js:178:4
guardedLoadModule
    require.js:130:11

2. For back button we would also need some logic for Android back button to not go to login screens ?

[shubhnik]

@ahetawal-p Ah, sorry since Tabs is a new navigator you can try this in navigationReducer.js of nestedTab branch of this repo: import AppNavigator, {Tabs} from "../Navigation/navigationStack";

const ActionForLoggedIn = Tabs.router.getActionForPathAndParams( "feed" );

const stateForLoggedIn = Tabs.router.getStateForAction( ActionForLoggedIn );

Similarly in navigationStack.js file:

export const Tabs = TabNavigator({
  feed: {
    screen: Feed
  },
  logout: {
    screen: Logout
  }
});

const navigator = StackNavigator({
  login: {
    screen: Login
  },
  screen1: {
    screen: Screen1
  },
  screen2: {
    screen: Tabs,
    navigationOptions : {
      title: "Screen2",
      gesturesEnabled: false,
      headerLeft: null
    }
  }
});

export default navigator;

Also in screen2.js you won't be able to access this.props.navigation.state.params.name since we aren't passing props as we were doing before.

When you get your navigation flow done than do consider submitting a PR, a new branch for your navigation flow. That will be helpful for other too because it's a typical flow in many apps.

[ahetawal-p]

Hey @shubhnik I will create a PR against this branch with the above fix, after testing it. In the meantime, since I have following the different approaches for handling auth vs content flow of an app. Take a look at this gist, this seems to be another way of handling this scenario. https://gist.github.com/ronnyhartenstein/1ef30c90f530f99430969925198d6970 So the splash-screen + onboarding is a separate StackNavigator. And after successful login it'll replaced by a normal DrawerNavigator

[shubhnik]

So the splash-screen + onboarding is a separate StackNavigator. And after successful login it'll replaced by a normal DrawerNavigator

The navigator you pasted in the first comment is somewhat similar to this.

@ahetawal-p although I will recommend you to create a new branch because it will be a different navigation flow than the one in this branch.

[shubhnik]

@ahetawal-p , the gist you shared doesn't integrates react-navigation with redux. We need to store navigation state in redux store.

I have added a new demo for a more real world scenario here https://github.com/shubhnik/redux-react-navigation/tree/nestedNavigators .

[Singha2]

@shubhnik First of all many thanks for such a nice example. It helped me to understand the react-native navigation with redux. I faced one problem, when logging out, it shows error "Invariant Violation : Cannot get config because the route does not have a routename.

[Singha2]

@shubhnik I used

case Logout: nextState = { ...state, stateForLoggedOut: AppNavigator.router.getStateForAction( NavigationActions.reset({ index: 0, actions: [NavigationActions.navigate({ routeName: "login" })] }) ) };

instead of actions: [NavigationActions.init({ routeName: "login" })] and it worked.

[shubhnik]

@Singha2 Can you share your navigationReducer's code and more specifically the navigation state before you press log out button.