navigationState duplicate key when restarting the app after an error

[fabriziomoscon]

@jevakallio
I reproduced the scene stack error I mentioned to you at the meetup. This happens when I open the app after another error occurred. So I guess leaving some dirty state in the application.
Contacts is the name of the route. To clear this error I have to clean manually the data cache for the app.

Possible Unhandled Promise Rejection (id: 0):
navigationState.children[2].key "scene_Contacts" conflicts withanother child!
Invariant Violation: navigationState.children[2].key "scene_Contacts" conflicts withanother child!
    at invariant (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:2433:7)
    at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:71833:1
    at Array.forEach (native)
    at NavigationScenesReducer (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:71825:20)
    at new NavigationAnimatedView (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:71457:8)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:28503:19)
    at ReactCompositeComponentWrapper._constructComponent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:28485:13)
    at ReactCompositeComponentWrapper.mountComponent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:28404:15)
    at Object.mountComponent (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:26913:29)
    at ReactCompositeComponentWrapper.performInitialMount (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:28580:28)

UPDATE:

This happens when inside the NavigationState another children with the same key gets pushed

using the chrome debug console:

// prev state state
Object NavigationState = {
   MainNavigation: {
      routes: [
         {key: 'pageA'},
         {key: 'pageB'},
      ]
  }
}

// next state
Object NavigationState = {
   MainNavigation: {
      routes: [
         {key: 'pageA'},
         {key: 'pageB'},
         {key: 'pageB'},
      ]
  }
}

// NOTE: the key `routes` is called `children` with react-native < 0.28

[fabriziomoscon]

I have narrowed down this issue to this line:
https://github.com/futurice/pepperoni-app-kit/blob/master/src/modules/navigation/NavigationState.js#L48

in react-native:
https://github.com/facebook/react-native/blob/master/Libraries/NavigationExperimental/Reducer/NavigationScenesReducer.js#L125

also found this related issues with a good description: jlyman/RN-NavigationExperimental-Redux-Example#10

proposed fix:

const getNewChildrenList = (children) => {
    const sameChildren = children.filter((child) => {
        return child.get('key') === (action.payload && action.payload.key);
    });
    if (sameChildren.isEmpty()) {
        children.push(fromJS(action.payload));
    }
    return children;
}
return state
    .set('isNavigating', true)
        .updateIn(['children', state.get('index')], tabState =>
            tabState
                .update('children', getNewChildrenList)
                .set('index', tabState.get('children').size);
        );

Basically it checks that the child is not already present before pushing it in.
At the moment this solution doesn't work 100%, because the index between NavigationState and Scenes goes out of sync.
But hopefully this will help help others with this same issue

[jevakallio]

@fabriziomoscon is this issue solved by #89 or is there something more we need to do in your opinion?

[fabriziomoscon]

@jevakallio I haven't see this issue at all after implementing the change in PR #89
I think this is the fix: https://github.com/futurice/pepperoni-app-kit/blob/master/src/modules/navigation/NavigationState.js#L61-L68

[jevakallio]

Awesome 🎉