Skip to content

Instantly share code, notes, and snippets.

@benvium
Created Feb 12, 2018
Embed
What would you like to do?
react-navigation: selection of different routes based on whether the user is logged in or out, via redux
import {rootNavigatorSelector} from './navigation/router';
import Store from './redux/store';
// Connect `rootNavigatorSelector` to redux.
const ConnectedMain = connect(state => ({
Layout: rootNavigatorSelector(state),
}))(Main);
// App root component
class Root extends PureComponent {
render() {
return (
<Provider store={Store}>
<ConnectedMain />
</Provider>
);
}
}
import {createSelector} from 'reselect';
import {selectorIsUserLoggedIn} from '../redux/module/user';
export const rootNavigatorSelector = createSelector(
selectorIsUserLoggedIn, // reselect selector that returns true if user is logged in
signedIn => {
return StackNavigator(
{
SignedIn: { // initial route IF signed in (see below)
screen: Home, // home is a screen with no navigation header - when user selects an option from home, we go to a sub-route of MainNavigator (which has a header), below.
navigationOptions: {
gesturesEnabled: false,
},
},
SignedOut: { // initial route if signed out
screen: Login,
navigationOptions: {
gesturesEnabled: false,
},
},
MainNavigator: {
screen: MainNavigator,
},
},
{
headerMode: 'none',
mode: 'modal',
initialRouteName: signedIn ? 'SignedIn' : 'SignedOut',
}
);
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment