React-Navigation and Conditional Rendering for Authentication? (IR-Boilerplate)

[alfonsosn]

Hey everyone! Just wanted to say that I love this boilerplate (I'm using IR). New to React-Native and this boilerplate has allowed me to go from zero to hero in a few weeks. I'm really impressed by how much thought was put into every single component, library, and framework added to this boilerplate.

Now, I have a question regarding react-navigation... If this doesn't seem like the appropriate channel, I'd be happy to be redirected to a better source.

So, in my app, I'm implementing an auth-flow. I have implemented three separate StackNavigators. They look like below.

const AuthStack = StackNavigator({
  Login: { screen: LoginScreen }
})

const LoadingStack = StackNavigator({
  Welcome: { screen: WelcomeScreen },
})

const AppStack = StackNavigator({
  Main: { screen: DrawerScreen }, //<== tab navigator
  Other: { screen: OtherScreen },
  Another: { screen: AnotherScreen },
})

The main reason that I've created three separate stacks is so the user cannot go back with gestures to login or loading screens. So I've implemented the code below that successfully renders the screens with my authentication flow. Basically, what I've done is hook up the ReduxNavigation component to Redux, and created a conditional rendering hack that renders the appropriate screens based on the state of redux.

class ReduxNavigation extends React.Component {
  render() {
    if (this.props.complete) {
      return (
        <AppStack/>
      );
    } else if (this.props.loading) {
      return(
        <LoadingStack/>
      )
    } else {
      return (
        <AuthStack />
      )
    }
  }
}

const mapStateToProps = (state) => {
  return {
    loading: state.login.requesting,
    complete: state.login.complete,
  }
}

export default connect(mapStateToProps)(ReduxNavigation);

Are there flaws with using conditional rendering to manage an authentication flow? Ideally, I would want to navigate through these stacks, when one of my Action creators dispatches a certain action type, or better yet, when a certain property in the store is changed (like I'm doing above).

Thank you!