AppNavigator.router undefined/props should be defined errors in V4

[warrenronsiek]

I'm upgrading from v3 to v4, and I'm having two issues with my router:

1. Keeping my router as is, leads to a [react-native-router-flux] props should be defined error. Which is strange, since I know my props are defined.
2. Commenting out all the scenes in the router except the login scene changes the issue to undefined is not an object (evaluating AppNavigator.router)

My current router:

...
const RouterWithRedux = connect()(Router);

...

export default class TheApp extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <Provider store={store}>
        <RouterWithRedux>
          <Scene key="login" component={Login} title="Login"/>
          <Scene key="register" component={Register} title="Register"/>
          <Scene key="passwordreset" component={ResetPasswordScene} title="Reset Password"
                 onBack={() => passwordResetOnBack()}/>
          <Scene key="code" component={ConfirmCodeScene} title="Confirm Code"/>
          <Scene key="nodes" component={Nodes} title="Node Scene" type={ActionConst.RESET}/>
          <Scene key="tabs" tabs={true} type={ActionConst.RESET}>
            <Scene key="tab1" component={TabOne} title="TabOne" icon={bell} initial={true}
                    renderBackButton={BackButton}/>
            <Scene key="tab2" component={TabTwo} title="TabTwo" icon={shoe}
                    renderBackButton={BackButton}/>
          </Scene>
          <Scene key="placeholder" component={Placeholder} title="Placeholder"/>
          <Scene key="cart" component={CartScene} title="Cart"/>
          <Scene key="checkout" component={CheckoutScene} title="Checkout"/>
          <Scene key="cardForm" component={CardFormScene} title="Card Details"/>
        </RouterWithRedux>
      </Provider>
    );
  }
}

I've read through the docs, and it seems like this should work as is. I've also tried removing components/props that might be gumming things up. I.e. I removed all of the tabs, and the scenes that have fancy arguments like onBack. I still get the props should be defined error.

I am currently running react-native 0.45.1. Any sense of what could be causing this?

[isAlmogK]

I believe this is the same issue or related to my issue as well, something to so with the redux integration - #1998

[aksonov]

@warrenronsiek

1. Replace ActinsConst.REPLACE with 'replace'.
2. You must set atleast one container - wrap your single Login by Scene
3. Please fork & modify Example project to reproduce your issue ('props is not defined')

[warrenronsiek]

@aksonov, thank you, you are a hero. Problem resolved by:

1. Wrapping all scenes with a 'root' scene.
2. Replacing {ActionConst.REPLACE} with 'replace', '{ActionConst.RESET}' with 'reset' etc.

Correct router config:

<Provider store={store}>
  <RouterWithRedux>
    <Scene key="root">
      <Scene key="login" component={Login} title="Login"/>
      <Scene key="register" component={Register} title="Register"/>
      <Scene key="passwordreset" component={ResetPasswordScene} title="Reset Password"
             onBack={() => passwordResetOnBack()}/>
      <Scene key="code" component={ConfirmCodeScene} title="Confirm Code"/>
      <Scene key="nodes" component={Nodes} title="Table Selection" type={ActionConst.reset}/>
      <Scene key="tabs" tabs={TabOne} type={ActionConst.reset}>
        <Scene key="tab1" component={Request} title="TabOne" icon={bell} initial={true}
               renderBackButton={BackButton}/>
        <Scene key="tab2" component={TabTwo} title="TabTwo" icon={shoe}
               renderBackButton={BackButton}/>
      </Scene>
      <Scene key="placeholder" component={Placeholder} title="Placeholder"/>
      <Scene key="cart" component={CartScene} title="Cart"/>
      <Scene key="checkout" component={CheckoutScene} title="Checkout"/>
      <Scene key="cardForm" component={CardFormScene} title="Card Details"/>
    </Scene>
  </RouterWithRedux>
</Provider>