React-native: NavigationExperimental - conflicts withanother route when double clicks

Created on 28 May 2016 · 11Comments · Source: facebook/react-native

NavigationExperimental on UIExplorer.
When double clicks on push get error

navigationState.routes[2].key "scene_Route #1" conflicts withanother route!

<unknown>
    main.jsbundle @ 62773:10
NavigationScenesReducer
    main.jsbundle @ 62765:25
componentWillReceiveProps
    main.jsbundle @ 62413:31
updateComponent
    main.jsbundle @ 21553:31
receiveComponent
    main.jsbundle @ 21485:21
receiveComponent
    main.jsbundle @ 19685:34
_updateRenderedComponent
    main.jsbundle @ 21689:33
_performComponentUpdate
    main.jsbundle @ 21667:30
updateComponent
    main.jsbundle @ 21586:29
performUpdateIfNecessary
    main.jsbundle @ 21499:21
performUpdateIfNecessary
    main.jsbundle @ 19718:42
runBatchedUpdates
    main.jsbundle @ 19321:41
perform
    main.jsbundle @ 20038:16
perform
    main.jsbundle @ 20038:16
perform
    main.jsbundle @ 19260:38
flushBatchedUpdates
    main.jsbundle @ 19347:20
closeAll
    main.jsbundle @ 20104:19
perform
    main.jsbundle @ 20051:14
batchedUpdates
    main.jsbundle @ 34271:20
batchedUpdates
    main.jsbundle @ 19268:32
_receiveRootNodeIDEvent
    main.jsbundle @ 18041:28
receiveTouches
    main.jsbundle @ 18103:48
__callFunction
    main.jsbundle @ 2370:28
<unknown>
    main.jsbundle @ 2277:22
guard
    main.jsbundle @ 2228:3
callFunctionReturnFlushedQueue
    main.jsbundle @ 2276:6

Locked

Source

nvcken

Most helpful comment

you may use NavigationStateUtils.has(state, route.key) to check duplicated key.

hedgerwang on 27 Jun 2016

👍5 ❤1

All 11 comments

cc @ericvicenti @hedgerwang

charpeni on 29 May 2016

Isn't this a simple matter of creating two successive pushes w the same key? You could avoid this by creating an isNavigating flag to prevent this kind of thing

mschipperheyn on 31 May 2016

@nvcken What version of React Native are you using? NavigationAnimatedView is replaced with NavigationTransitioner, and as of v0.28-rc, NavigationTransitioner no longer depends on route keys.

🍺

jmurzy on 21 Jun 2016

Sorry, I dont remember exactly, seem it's 0.26 version

nvcken on 21 Jun 2016

Hello, I face the same problem, but with RN 0.28.0

xseignard on 27 Jun 2016

You can add a check in your reducer so that same route isn't pushed again.

satya164 on 27 Jun 2016

Yes, here is my reducer case when pushing a route:

case C.PUSH_ROUTE: {
    // trying to push the route where we already are, no need to change a thing
    if (state.routes[state.index].key === (action.route && action.route.key)) return state;
    // ensure no duplicate keys
    const index = state.routes.findIndex((route) => {
        return action.route.key === route.key && action.route.title === route.title;
    });
    if (index > -1) {
        const clonedState = Object.assign({}, state);
        clonedState.routes.splice(index, 1);
        return NavigationStateUtils.push(clonedState, action.route);
    }
    // normal case for a push
    return NavigationStateUtils.push(state, action.route);
}

xseignard on 27 Jun 2016

you may use NavigationStateUtils.has(state, route.key) to check duplicated key.

hedgerwang on 27 Jun 2016

👍5 ❤1

By the way @xseignard, I notice your reducer mutates the routes with the splice statement. This mutation is considered a bad practice because anyone else who looks at the original array of routes will see the mutated version and won't be able to make good comparisons