Error when changing scenes on login - There is no route defined for key

[TheRealDerek]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.28
• react-native v0.53.0

Expected behaviour

When the user logs into the application it changes the state of my application which should re-render and load a new scene.

Actual behaviour

When the user logs into the application it changes the state of my application however it does not re-render the scene and gives the below error:

There is no route defined for key codeValidation.
Must be one of: 'key0'

Essentially there are 3 scenes that could be rendered -> Auth, Home, Profile. When the user first loads the app we check to see if there is a user, if not we set 'auth' to be true which renders the second else in _showHomeOrAuth(). If there is a user but they have not added a profile it will render profile. This all works with no issues.

When the user then logs in 'firebase.auth().onAuthStateChanged' is called and sets the 'home' state to true. What I am expecting is that this re-renders and the first if statement is called. (I can see it does go here as per the console.log) but then I get the above error.

Is there a reason it is still referencing 'codeValidation' since it doesn't go to that else on the re-render.

If I refresh my emulator everything loads as expected and the Home component is shown. The same issue occurs when I logout:

There is no route defined for key key0.
Must be one of: 'auth','codeValidation','profile'

The reason I have separated it out also is because I don't want the 'auth, profile and home' to be part of the tabs and in my components it references firebase uid so when it renders the component on first load this also gives an error.

Is the structure completely wrong? I would appreciate any help with this as I've been going over it for so much time now.

componentWillMount() {
    console.log("INIT:");
    firebase.initializeApp(firebaseConfig);
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        console.log("INIT: " + JSON.stringify(user))
        console.log("user.displayName: " + user.displayName)
        if (user.displayName != "") {
          this.setState({
            auth: false,
            profile: false,
            home: true,
            loading: false
          });
          console.log("1. ON AUTH CHANGED " + JSON.stringify(this.state));
        } else {
          this.setState({
            auth: false,
            profile: true,
            home: false,
            loading: false
          });
          console.log("2. ON AUTH CHANGED " + JSON.stringify(this.state));
        }
      } else {
        this.setState({
          auth: true,
          profile: false,
          home: false,
          loading: false
        });
        console.log("3. ON AUTH CHANGED " + JSON.stringify(this.state));
      }
    });
 }
render() {
    console.log("**** ON RENDER: " + JSON.stringify(this.state));
    if (this.state.loading) {
      return <Spinner />;
    } else {
      return (
        this._showHomeOrAuth()
      );
    }
 }

_showHomeOrAuth() {
    console.log("*** STATE: " + JSON.stringify(this.state));
    if (this.state.home === true) {
      console.log("***** IN IF");
      return (
        <Root>
          <Router>
            <Scene key='root'>
              <Scene tabs={true} tabBarPosition="bottom" hideNavBar={true} animationEnabled={false} showLabel={false} titleStyle={{ alignSelf: 'center' }}>
                <Scene
                  initial={true}
                  key='Home'
                  title="Home"
                  component={Home}
                  iconName="ios-home"
                  icon={TabIcon}
                  renderLeftButton={this.navBarLeft}
                  renderRightButton={this.navBarRight}
                />
                <Scene
                  key="PhotoGrid"
                  component={PhotoGrid}
                  title="Search"
                  iconName="md-grid"
                  icon={TabIcon}
                  renderLeftButton={this.navBarLeft}
                  renderRightButton={this.navBarRight}
                />
                <Scene
                  key='Add'
                  title="Add"
                  component={Add}
                  iconName="md-add-circle"
                  icon={TabIcon}
                  renderLeftButton={this.navBarLeft}
                  renderRightButton={this.navBarRight}
                />
                <Scene
                  key='Profile'
                  title="Profile"
                  component={Profile}
                  iconName="md-person"
                  icon={TabIcon}
                  renderLeftButton={this.navBarLeft}
                  renderRightButton={this.navBarRight}
                />
                <Scene
                  key='Preferences'
                  title="Preferences"
                  component={Preferences}
                  iconName="md-settings"
                  icon={TabIcon}
                  renderLeftButton={this.navBarLeft}
                  renderRightButton={this.navBarRight}
                />
              </Scene>
            </Scene>
          </Router>
        </Root >
      );
    } else {
      console.log("***** IN ELSE");
      return (
        <Root>
          <Router>
            <Scene key='root'>
              <Scene
                initial={this.state.auth}
                key='auth'
                component={Auth}
              />
              <Scene
                key='codeValidation'
                component={CodeValidation}
              />
              <Scene
                initial={this.state.profile}
                key='profile'
                component={Profile}
              />
            </Scene>
          </Router>
        </Root >
      );
    }
  }

[TheRealDerek]

Just encase anyone else was having the same issue I managed to resolve it by changing the structure of my scenes. This now works perfectly and can navigate between tabs and scenes with no issues.

render() {
    console.log("**** ON RENDER: " + JSON.stringify(this.state));
    if (this.state.loading) {
      return <Spinner />;
    } else {
      return (
       <Root>
          <Router>
            <Stack
              hideNavBar
              key="root"
              titleStyle={{ alignSelf: 'center' }}
            >
              <Scene key="mainScene" hideNavBar panHandlers={null} tabBarPosition="bottom" animationEnabled={false}>
                <Tabs
                  key="tabbar"
                  swipeEnabled
                  showLabel={false}
                  tabBarStyle={styles.tabBarStyle}
                  activeBackgroundColor="white"
                  inactiveBackgroundColor="rgba(255, 0, 0, 0.5)"
                >
                  <Scene
                    initial={this.state.home}
                    key='Home'
                    title="Home"
                    component={Home}
                    iconName="ios-home"
                    icon={TabIcon}
                    renderLeftButton={this.navBarLeft}
                    renderRightButton={this.navBarRight}
                  />
                  <Scene
                    key="PhotoGrid"
                    component={PhotoGrid}
                    title="Search"
                    iconName="md-grid"
                    icon={TabIcon}
                    renderLeftButton={this.navBarLeft}
                    renderRightButton={this.navBarRight}
                  />
                  <Scene
                    key='Add'
                    title="Add"
                    component={Add}
                    iconName="md-add-circle"
                    icon={TabIcon}
                    renderLeftButton={this.navBarLeft}
                    renderRightButton={this.navBarRight}
                  />
                  <Scene
                    key='Profile'
                    title="Profile"
                    component={Profile}
                    iconName="md-person"
                    icon={TabIcon}
                    renderLeftButton={this.navBarLeft}
                    renderRightButton={this.navBarRight}
                  />
                  <Scene
                    key='Preferences'
                    title="Preferences"
                    component={Preferences}
                    iconName="md-settings"
                    icon={TabIcon}
                    renderLeftButton={this.navBarLeft}
                    renderRightButton={this.navBarRight}
                  />

                </Tabs>
                <Scene
                  key="Chat"
                  component={Chat}
                  title="Chat"
                  titleStyle={{ alignSelf: "center" }}
                  hideTabBar={true}
                  tabs={false}
                />
                <Scene
                  initial={this.state.auth}
                  key='auth'
                  component={Auth}
                />
                <Scene
                  key='codeValidation'
                  component={CodeValidation}
                />
                <Scene
                  initial={this.state.profile}
                  key='profile'
                  component={Profile}
                />
              </Scene>
            </Stack>
          </Router>
        </Root >
)