NestedTab navigation when logged-in
ahetawal-p opened this issue · comments
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.
-
In this scenario the user should directly land on to the
feed
tab underTabNavigator
I tried fixing it by giving the loggedIn state the screen name asscreen2
orfeed
none of them works. Any ideas here ? -
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
}
});
@ahetawal-p did you try this:
-
try changing this line to
const ActionForLoggedIn = AppNavigator.router.getActionForPathAndParams( "screen2" );
-
For screen2 you can disable gestures and back button.
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
- For back button we would also need some logic for Android back button to not go to login screens ?
@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.
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
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.
@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 .
@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.
@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.
@Singha2 Can you share your navigationReducer's code and more specifically the navigation state before you press log out button.