title: react-native-router-flux, Hot-reloading and Key XXX is already defined in React-native
body: <p>Everytime I change a component I got the warning  "Key  is already defined!" and hot-reloading stop working.</p>
  
  <p>Can anyone point out what I am doing wrong ? Here is basically what I have :</p>
  
  <p>A main <code>index.ios.js</code> with the Provider. </p>
  
  <pre><code>// index.ios.js
  const store = configureStore();
  
  const Root = () =&gt; (
    &lt;Provider store={store}&gt;
      &lt;App /&gt;
    &lt;/Provider&gt;
  );
  
  // Render to the device
  AppRegistry.registerComponent('Mythology', () =&gt; Root);
  </code></pre>
  
  <p>the store/redux-logger declaration</p>
  
  <pre><code>// configureStore.js
  import { createStore, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  import promise from 'redux-promise';
  import createLogger from 'redux-logger';
  
  import reducer from '../reducers';
  
  const configureStore = () =&gt; {
    let store;
  
    if (__DEV__) {
      const logger = createLogger({ collapsed: true });
      store = createStore(
        reducer,
        applyMiddleware(thunk, promise, logger),
      );
    } else {
      store = createStore(
        reducer,
        applyMiddleware(thunk, promise),
      );
    }
    return store;
  };
  
  export default configureStore;
  </code></pre>
  
  <p>Here is App.js</p>
  
  <pre><code>// App.js
  class App extends Component {
  
    componentWillMount() {
      this.props.loginWithToken();
      this.props.fetchQuotes('random', true);
      this.props.fetchAllGreeks();
      this.props.fetchBooks();
    }
  
    render() {
      return (
        &lt;Router
          scenes={Scenes}
        /&gt;
      );
    }
  }
  
  App.propTypes = {
    loginWithToken: PropTypes.func.isRequired,
    fetchAllGreeks: PropTypes.func.isRequired,
    fetchQuotes: PropTypes.func.isRequired,
    fetchBooks: PropTypes.func.isRequired,
  };
  
  export default connect(null,
    {
      loginWithToken,
      fetchAllGreeks,
      fetchBooks,
      fetchQuotes,
    })(App);
  </code></pre>
  
  <p>And here is Scenes.js</p>
  
  <pre><code>const Scenes = Actions.create(
    &lt;Scene
      key="root"
    &gt;
      &lt;Scene
        key="tabbar"
        tabs
        tabBarStyle={styles.tabBarStyle}
        tabBarIconContainerStyle={{height: null, padding: 10}}
      &gt;
        {/* Homepage */}
        &lt;Scene
          key="home"
          title="Quotes"
          icon={TabIcon}
          navigationBarStyle={styles.navbarStyleWidthShadow}
        &gt;
          &lt;Scene
            key="homepage"
            component={Homepage}
            title="Quotes"
            initial
            renderRightButton={() =&gt; &lt;UserIcon /&gt;}
          /&gt;
        &lt;/Scene&gt;
        {/* GreekList page */}
        &lt;Scene
          key="greeks"
          title="Pantheon"
          icon={TabIcon}
        &gt;
          &lt;Scene
            key="greekListPage"
            component={GreekListpage}
            title="Pantheon"
            initial
            renderRightButton={() =&gt; &lt;UserIcon /&gt;}
            navigationBarStyle={styles.navbarStyle}
          /&gt;
          &lt;Scene
            key="singleHeroPage"
            component={SingleHeropage}
            renderRightButton={() =&gt; &lt;UserIcon /&gt;}
            navigationBarStyle={[styles.navbarStyleWidthShadow, styles.extraShadow]}
          /&gt;
        &lt;/Scene&gt;
        {/* Books page */}
        &lt;Scene
          key="books"
          title="Books"
          icon={TabIcon}
          navigationBarStyle={styles.navbarStyle}
        &gt;
          &lt;Scene
            key="booksPage"
            component={BookListpage}
            title="Books"
            initial
            renderRightButton={() =&gt; &lt;UserIcon /&gt;}
          /&gt;
          &lt;Scene
            key="singleBookPage"
            component={SingleBookpage}
            renderRightButton={() =&gt; &lt;UserIcon /&gt;}
          /&gt;
        &lt;/Scene&gt;
      &lt;/Scene&gt;
      &lt;Scene
        key="login"
        title="Login"
        component={Loginpage}
        renderRightButton={() =&gt; &lt;UserIcon /&gt;}
        navigationBarStyle={styles.navbarStyleWidthShadow}
      /&gt;
      &lt;Scene
        key="logout"
        title="Logout"
        component={Logoutpage}
        renderRightButton={() =&gt; &lt;UserIcon /&gt;}
        navigationBarStyle={styles.navbarStyleWidthShadow}
      /&gt;
    &lt;/Scene&gt;,
  );
  
  export default Scenes;
  </code></pre>
  
  <p>I have tried to use componentShouldUptate but with no success.</p>
  
  <p>If I am missing something the full code is on github: <a href="https://github.com/kamiranoff/mythology" rel="nofollow noreferrer">https://github.com/kamiranoff/mythology</a></p>