Rerender router based on boolean auth flag

[thedc89]

I would like to switch between Scenes on authentication. I used the approach shown in this issue:
#913
but it does not rerender when I sign in/ sign out
I'd like to rerender my Router when I pass props to change the screen, not sure though whether it is possible this way

My router:

class RouterComponent extends Component {
  componentWillReceiveProps(nextProps) {
    this.forceUpdate();
  }
  render() {
    return (
      <Router navigationBarStyle={styles.navBar} navBarButtonColor='#fff'>
        <Scene key='root' hideNavBar modal>
          <Scene key='auth' initial={!this.props.isUserSignedIn}>
.
.
.

My App.js

class App extends Component {

  constructor() {
    super();
    this.state = {
      loading: true,
    };
  }

  componentWillMount() {
    this.authSubscription = firebase.auth().onAuthStateChanged((user) => {
      this.setState({
        loading: false,
        user
      });
    });
  }


  render() {
    if (this.state.loading) return null;
    return (
      <Provider store={store}>
      <Router isUserSignedIn={this.state.user !== null} />
      </Provider>
    );
  }
}

export default App;

Although it works well once app is launched, it does not change the scene when the flag changed down the road, etc when user signs in/ signs out.

It looks like, despite the fact that render() function is being called with the correct props, the router remains the same, is it some intrinsic feature of Router that its root is rendered only once on launch?

[aksonov]

You may check https://github.com/aksonov/react-native-starter-app for some authentication ideas. v4 supports on, success, failure props that allows to act like the state machine.