React-native-router-flux: Warning: Failed prop type: Invalid prop `scenes` of type `function` supplied to `Router`, expected a single ReactElement.

[avorochenko]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.16
• react-native v0.46.4

app.js

function mapStateToProps(state) {
  return {
    appData: state.appData
  };
}

function mapDispatchToProps(dispatch) {
  return {
    getData: bindActionCreators(getData, dispatch)
  };
}

const myConnectedSideBarConponent = connect(mapStateToProps, mapDispatchToProps)(SideBar);
const myConnectedHomeScreenConponent = connect(mapStateToProps, mapDispatchToProps)(HomeScreen);
const myConnectedMainScreenConponent = connect(mapStateToProps, mapDispatchToProps)(MainScreen);

const scenes = Actions.create(
  <Scene key="drawer" drawer contentComponent={myConnectedSideBarConponent}>
    <Scene key="root" hideNavBar hideTabBar>
      <Scene key="mainScreen" component={myConnectedMainScreenConponent} title="" initial/>
      <Scene key="homeScreen" component={myConnectedHomeScreenConponent} title=""/>      
    </Scene>
  </Scene>
);

const store = configureStore();

const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(Router);

export default class App extends Component {
        render = () => {
            return (
                <Provider store={store}>
                    <ConnectedApp  scenes={scenes} />
                </Provider>
            );
        }
    }

I get Warning after each restart of the application :
Warning: Failed prop type: Invalid prop scenes of type function supplied to Router, expected a single ReactElement.

08-04 15:19:52.500 5613 5884 W ReactNativeJS: in Router (created by Connect(Router))

08-04 15:19:52.500 5613 5884 W ReactNativeJS: in Connect(Router) (at app.js:69)

08-04 15:19:52.500 5613 5884 W ReactNativeJS: in Provider (at app.js:68)

08-04 15:19:52.500 5613 5884 W ReactNativeJS: in App(at renderApplication.js:35)

08-04 15:19:52.500 5613 5884 W ReactNativeJS: in RCTView (at View.js:133)

08-04 15:19:52.500 5613 5884 W ReactNativeJS: in View (at AppContainer.js:98)

08-04 15:19:52.500 5613 5884 W ReactNativeJS: in RCTView (at View.js:133)

08-04 15:19:52.500 5613 5884 W ReactNativeJS: in View (at AppContainer.js:97)

08-04 15:19:52.500 5613 5884 W ReactNativeJS: in AppContainer (at renderApplication.js:34)

Thanks for help!

[pewh]

Remove Actions.create, just use () instead.

const scenes = (
  <Scene key="drawer" drawer contentComponent={myConnectedSideBarConponent}>
    <Scene key="root" hideNavBar hideTabBar>
      <Scene key="mainScreen" component={myConnectedMainScreenConponent} title="" initial/>
      <Scene key="homeScreen" component={myConnectedHomeScreenConponent} title=""/>      
    </Scene>
  </Scene>
);

Then convert <ConnectedApp scenes={scenes} /> into <ConnectedApp>{scenes}</ConnectedApp>

[avorochenko]

I did everything as you wrote. Warning disappeared. As a result, the application crashes. In the console I see that there is a bunch of requests to the API via Reducer. I encountered this problem earlier and solved it with the help of "Actions.create"

[aksonov]

@avorochenko It seems to be a bug with PropTypes. Please use navigator={scenes} for now

[avorochenko]

@aksonov @pewh thanks for help!