Key login is already defined - HMR 0.22

[PeterKow]

I am on react-native 0.22 and react-native-router-flux 3.1.3 with hot reloding [HMR], after first HMR reload I got following error

Problem is caused by Actions.create

This is my current setup:

let scenes = Actions.create(
     <Scene key="root">
            <Scene key="login" component={Login} title="Login"/>
          </Scene>
);

 <Provider store={store}>
      {() =>
        <Router scenes={scenes} />
      }
    </Provider>

I tired this also, but doesn't work at all - nothing renders

 <Provider store={store}>
      {() =>
        <Router>
          <Scene key="root">
            <Scene key="login" component={Login} title="Login"/>
          </Scene>
        </Router>
      }
    </Provider>

Temporary solution is to call when working with HMR is to call components directly without Router

{() =>
        <Login/>
      }
..

Let me know if you have any ideas, so I can test them :)

[aksonov]

Check latest version

On 23 Mar 2016, at 11:19, Peter Kowalczyk [email protected] wrote:

I am on react-native 0.22 and react-native-router-flux 3.1.3 with hot reloding [HMR], after first HMR reload I got following error

https://cloud.githubusercontent.com/assets/10186048/13956908/730928a0-f042-11e5-8c2a-988066f2b0f9.png
Problem is caused by Actions.create

This is my current setup:

let scenes = Actions.create(



);

{() => } I tired this also, but doesn't work at all - nothing renders {() => } Temporary solution is to call when working with HMR is to call components directly without Router

{() =>

}
..

Let me know if you have any ideas, so I can test them :)
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub #376

[zxcpoiu]

same issue using 3.1.5

[aksonov]

It is not true. 3.1.5 doesn't throw exception for existing keys anymore

 if (this[key]){
            console.log("Key " + root.key + " is already defined!");
        }

[zxcpoiu]

oh sorry, I mean, I didn't got a red screen but same issue which is "key xxx is already defined."

[aksonov]

It is not issue but logging. It still could be usable if user really defines several scenes with the same key. For hot reload you could ignore it.

[zxcpoiu]

@PeterKow

I think it is caused by wrap <Router> into <Provider> and maybe it is redux triggers <Router> to re-render.
you can try Example and print some log in render() and onComponentDidMount, you will find that <Router> only render at the initial stage.

is your <Router> render several times also?
I'm still trying to find a better way to wrap <Provider>

[PeterKow]

Works after updating to 3.1.5

@zxcpoiu I tried without Provider and that wasn't a problem

Thanks!

[mmazzarolo]

@zxcpoiu is right, re-rendering <Router /> (for example by wrapping it in a Provider) prints that log.

[octohedron]

I'm also getting Key is already defined for every key in my app.
Is it confirmed that it's caused by wrapping the Router with a redux Provider?
Is it telling me there is something wrong with my app that I should fix?
Is there a way to make it go away besides commenting the line in the package?

[jsdario]

How can we not wrap it into a provider? Any examples we could follow? I am stuck here and it was the recommended implementation on the docs https://github.com/aksonov/react-native-router-flux/blob/master/docs/REDUX_FLUX.md

[zxcpoiu]

by my suffering experiences, there is no way to prevent Router re-render if you wrap it under a Provider and listen updates from redux, it is a nature by design.

the point how to prevent this, is: Router should render once and just once
it means:

If you didn't connect to redux at all, it works fine since your Router would not be triggered by any of updates from redux.

Also, you can connect() Router to redux to get a dispatch() method props but you can NOT listen to another props.

Thus, the architecture would be:

import {
    Router,
    Scene,
    Actions,
} from 'react-native-router-flux';


// --- child component can connect and listen to props they want.
const myConnectedMainConponent = connect()(myMainConponent);
const myConnectedLoginConponent = connect()(myLoginConponent);

// --- Create it via Actions.create(), or it will be re-created for each render of your Router
const scenes = Actions.create(
    <Scene key="root">
        <Scene key="login" component={myLoginConponent} />
        <Scene key="main" component={myMainConponent} />
    </Scene>
);

// --- Create connected Router if you want dispatch() method.
// --- Or you can just use vanilla Router
const myConnectedRouter = connect()(Router);

// --- your exported main router
export default class MyExportedRouter extends React.Component {
    constructor(props) {
        super(props);
    };

    render() {
        return (
            <Provider store={store}>
                <myConnectedRouter scenes={scenes} />
            </Provider>
        );
    }
}

p.s. I typed above codes directly here, be aware the syntax error :)

Point Taken:

1. Router should render once and just once ( connect to get dispatch method only or not connect at all )
2. pre create scenes via Actions.create() and pass it into Router
3. move your app main logic into one of the children of Router

[zxcpoiu]

put it in doc #1098

[jsdario]

Hi. Thanks @zxcpoiu for the hints, I made some progress. This question I posted in stackoverflow is becoming sort of popular. You may want to answer as you answer this one so I can credit you for your help.

[zxcpoiu]

@jsdario thanks! glad it helps! 😄

[lucasff]

@zxcpoiu hey, the wording is not so great, we are trying to use your approach even we have the same problems with the latest version of RN/RNRF

[zxcpoiu]

@lucasff

I didn't upgrade my libraries for a while neither react-native-router-flux nor redux, so I'm not sure if it changes.

I think the most important thing you might want to solve first is to make sure your router render once and only once

you can console.log("XXX") in your router's render() function, then try to do anything you need to do until "XXX" only shows once.

there is so many factors may cause router to re-render, and the most difficult part is to redesign your app's architecture.