How to delay rendering correctly

Question

//offline.js

import { offline } from '@redux-offline/redux-offline';
import offlineConfig from '@redux-offline/redux-offline/lib/defaults';

const config = params => ({
  ...offlineConfig,
  persistCallback: params.persistCallback
});

export default params => offline(config(params));

//App.js

class App extends Component {

  componentWillMount() {
    this.store = Reactotron.createStore(
      reducers,
      undefined,
      compose(
        applyMiddleware(ReduxThunk),
        offline({ persistCallback: this.startApp })
      )
    );
  }

  startApp = () => {
    if (this.store.getState().auth.loggedIn) {
      const resetAction = StackActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: 'summmary' })],
      });
      this.props.navigation.dispatch(resetAction);
    }
  }

  render() {
    return (
      <Provider store={this.store}>
        <MainNavigator />
      </Provider>
    );
  }
}

export default App;

I have 2 screens summary and login where login screen will be rendered by default. However I added this logic this.store.getState().auth.loggedIn to check that if it's true then dispatch the screen to summary but I'm getting Cannot read property 'dispatch' of undefined

score 0 · Answer 1 · answered Sep 18 '18 at 12:37

The navigation prop is available to the Screen components that are wrapped inside your MainNavigator.

You're trying to use it from your App component which is outside of your navigators so it is undefined.

In this case it is recommended to use "Navigating without the navigation prop" approach as described in the documentation: https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

score 0 · Answer 2 · answered Sep 18 '18 at 12:47

You are getting that error because you don't have the navigation object in scope.

Ideally, your App.js file should have the StackNaviator class itself. So, the first object declared there, will the first screen you'll land to. There you can write the logic of dispatching it to another screen as you have the navigation object in scope as well.

Something on the lines of -

Your App.js

createStackNavigator({
  Home: {
  screen: HomeScreen}
})

So, your home screen will be launched first, and the logic you wrote in App.js about dispatching an action can move to this HomeScreen

All the `react-navigation` related declaration are defined in `MainNavigator` component — Isaac, Sep 19 '18 at 00:52

How to delay rendering correctly

2 Answers2