Props not getting passed to tabs

Question

I have a react-native app where I'm using React-Native-Router-Flux as my navigation library, and I'm having an issue with the props being passed down to the children components. In my login.js file, after a user logs in, a new route is called with the new route props (the logged in username) as well. This works fine when using a stack view, but not for tabs, whereas the props value never changed from it's inital value. I've listed my Routes and login file below:

*The prop not being set is named Auth

login (reduced for brevity):

.then( (data) => {
          Actions.tabbar({Auth: this.state.username})
        })

routes:

  render() {
    return (
      /* Start Router */
      <routes.Router>
        {/* Start Root Stack */}
        <routes.Scene key="root" headerMode = "none"  hideNavBar={true} tabBarPosition="bottom" >

          {/* Home Route as a stack */}
          <routes.Scene key="Home Test"  title="Home">
              <routes.Scene  key="Home Test"  component={Home} title="Home" />
          </routes.Scene>

          {/* Signup Screen as a Stack */}
          <routes.Scene key="SignupScreen" title="Signup Screen">
            <routes.Scene key="SignupScreen"  component={SignupScreen} title="SignupScreen" />
          </routes.Scene>

          {/* Start Tabs view */}
          <routes.Scene key="tabbar" tabs={true} Auth = {null} tabBarStyle={{ backgroundColor: '#FFFFFF' }}  >

            {/* Live Feed Tab View */}
            <routes.Scene key = "live" title = "live">
              <routes.Scene key="LiveFeed" component={LiveFeed} title="LiveFeed" userLoggedIn = {null} />
            </routes.Scene>

            {/* User Directory Tab View */}
            <routes.Scene key = "User Directory" title = "User Directory">
              <routes.Scene key="UserDirectory" component={UserDirectory} title="UserDirectory" />
            </routes.Scene>

           {/* Messages Tab View */}
           <routes.Scene key = "Messages" title = "Messages">
             <routes.Scene key="Messages" component={Messages} title="Messages" userLoggedIn = {this.props.Auth} />
             <routes.Scene key="Message" component={Message} title="Message" userLoggedIn = {null} ThreadRequested =  {null} />
           </routes.Scene>

          {/* End Tabs View */}
          </routes.Scene>
          {/* End Root Stack */}
        </routes.Scene>
        {/* End Router */}
      </routes.Router>

Answer 1

The error was I was passing the default value of the prop, which was overwriting it when rendered. To fix, just remove the prop default value within the value, and pass down your props with Action. , thus I removed the Auth property from the scene

Solution:

   <routes.Scene key="tabbar" tabs={true} tabBarStyle={{ backgroundColor: '#FFFFFF' }}  >