React-native-router-flux: Can't read property 'router' of null

Created on 17 Jul 2017 · 12Comments · Source: aksonov/react-native-router-flux

"react": "16.0.0-alpha.12",
"react-native": "0.46.1",
"react-native-router-flux": "^4.0.0-beta.11",

<Router> <Scene key='login' component={LoginForm} title='Login' /> </Router>

when i run my code,give me following error message:
'Can't read property 'router' of null'
in Router.js 279:46

Source

xilibro

👍2

Most helpful comment

@ranasing you should check the documentation, you need to nest all you scenes in the root scene as in the example:

<Router>
    <Scene key="root">
      <Scene key="login" component={Login} title="Login"/>
      <Scene key="home" component={Home}/>
    </Scene>
  </Router>

alfchee on 2 Aug 2017

👍39

All 12 comments

You must have container scene as root. Otherwise this component doesn't make any sense.

aksonov on 17 Jul 2017

Can you explain what you mean by this, 'container scene as root'? I am getting the same error. Thanks

ranasing on 1 Aug 2017

Ok, I'm not getting the error any more, but it only shows a blank screen on my Android simulator. Here is the relevant code:

import React, { Component } from 'react';
import { Scene, Router } from 'react-native-router-flux';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import LoginForm from './components/LoginForm';

render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

return (
  <Provider store={store}>
    <Router>
      <Scene key='login' component={LoginForm} title='Login' />
    </Router>
  </Provider>
);

}

** Only showing render method, because if I take out components and replace with just LoginForm component, it will render correctly.

ranasing on 1 Aug 2017

Your root scene is not container

1 авг. 2017 г., в 18:56, ranasing notifications@github.com написал(а):

Ok, I'm not getting the error any more, but it only shows a blank screen on my Android simulator. Here is the relevant code:

import React, { Component } from 'react';
import { Scene, Router } from 'react-native-router-flux';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import LoginForm from './components/LoginForm';

render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

return (

);
}

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub, or mute the thread.

aksonov on 1 Aug 2017

@ranasing you should check the documentation, you need to nest all you scenes in the root scene as in the example:

<Router>
    <Scene key="root">
      <Scene key="login" component={Login} title="Login"/>
      <Scene key="home" component={Home}/>
    </Scene>
  </Router>

alfchee on 2 Aug 2017

👍39

@alfchee This solved it, thank you so much!! I am two weeks into the Udemy course The Complete React Native and Redux Course by Stephen Grider.

He does the code on his example like @ranasing showed here.

mariobermudezjr on 2 Aug 2017

👍7 😄2

@TeslaMotors91 came here after that course as well. This does it. He doesn't use the "root" thing. Hence the issue.

SarasArya on 15 Aug 2017

@alfchee thanks for the help...

<Router>
    <Scene key="root">
      <Scene key="login" component={Login} title="Login"/>
      <Scene key="home" component={Home}/>
    </Scene>
 </Router>