Conditionally use one navigator or one other

[zoontek]

Hello,

I would like to use a StackNavigation if the user is not connected, and a DrawerNavigation if it's the case. I'm not really sure how can I do it properly.

class Root extends Component {
  static defaultProps = {
    isConnected: false,
  }

  constructor(props) {
    super(props)
  }

  render() {
    if (!this.props.isConnected) {
      return <StackNavigation initialRoute={router.getRoute('stack-based-route')} />
    }

    return (
      <DrawerNavigation id="main" initialItem="first-item">
        <DrawerNavigationItem id="first-item">
          <StackNavigation initialRoute={router.getRoute('stack-in-drawer-based-route')} />
        </DrawerNavigationItem>
      </DrawerNavigation>
    )
  }
}

const mapStateToProps = state => ({
  isConnected: state.token !== '',
})

export default connect(mapStateToProps)(Root)

When isConnected value changes, the navigator is replaced correctly but I also get a warning:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the FocusableComponent component.

Did someone already successed at doing something similar?

[sibelius]

u could disable drawernavigation instead

[zoontek]

But I wonder how too (see #384)

[markspolakovs]

I'm running into the same problem. My login flow uses a basic StackNavigation, and once the user is logged in, the app's main screens are in a TabNavigation. I'm stuck on how to transition between them. push("tabNavigationUID", Router.getRoute("appMainScreen")) doesn't work.

[tiaaaa123]

Why is this close? Did @zoontek found the solution? I'm having the same issue when using this.props.navigator.replace(Router.getRoute('home))?