How to deal with state during a screen transition using react native and react navigation

Question

I am getting an object undefined exception during a transition from one screen to another. I have a pretty good idea what is happening, I am just not sure if there is a clean way of handling it without just checking for undefined everywhere.

Here is my scenario:

1. Source screen references a user object in a Redux store
2. Navigation is initiated from the source screen to the destination screen.
3. The destination screen componentDidMount() is called where I clear the user object from the Redux store.
4. The source screen render() gets called again and the undefined error occurs because I cleared user from the store.

I am assuming that the source and destination screens have some overlap due to the transition. I have tried adding listeners with no luck. I can only get listener handlers to fire for type = action,

I am probably making this more complicated than it is, but I would like to find out if there is a standard way of dealing with this or if I am going about it in a completely wrong way.

Also, my react-navigation is integrated with Redux as per the instructions on React Navigation's website and the Redux React Navigation sample code.

Here is the basic code.

Screen 1

componentDidMount() {
  // This is a Redux action that sets an object called user to null
  clearUser();
{

Screen 2

render() {
  return (
    // Other code here
    // user is null here because render gets called after Screen1#componentDidMount() gets called
    <Text>{user.firstName + ' ' + user.lastName}</Text>
    <TouchableOpacity
      onPress={() => navigation.dispatch({ type:'NAV_SCREEN_1' })}
    >
      // button code here
    </TouchableOpacity>
    // Other code here
  )
}

The type of error is "TypeError: Cannot read property 'firstName' of null"

I understand the error and why I am getting it. The user object has been set to null by my Redux action in componentDidMount() of Screen 1 and then Redux causes render of Screen 2 to get called which is referencing a user object which is null.

My question is, is there a special way to accommodate this behavior without having to check if the user object is null every place I need to use it ? Should I call clearUser() somewhere else ?

Answer 1

For the newest version of react-navigation, you can use either addListener, withNavigationFocus or isFocused to detect transition state of the screens.

Another unofficial way is to catch action type NavigationActions.COMPLETE_TRANSITION, in case of using middleware like redux-saga.

Answer 2

As an alternative, you can simply make your Redux-connected screen handle undefined or null state. I had a similar problem and I ended up rendering a loader instead of the screen content when user state is undefined. When I log out, the screen shows a loader for a fraction of a second, then the app navigates away.