title: How to make drawer for multiple scenes in react-native-router-flux?
body: <p>I'm using react-native-router-flux for navigation between scenes. I have four pages and I want to make theme with single drawer menu component. Here is my code everything is working fine but the navigation component rerender because every scene has own drawer component. And here is the document for react-native-router flux <a href="https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md#drawer-drawer-or-scene-drawer" rel="nofollow noreferrer">https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md#drawer-drawer-or-scene-drawer</a></p>
  
  <pre><code>/**
   * Layout Routes
   */
  'use strict';
  
  import React, { Component } from 'react';
  import { TouchableOpacity } from 'react-native';
  import { Router, Scene, Actions, Drawer } from 'react-native-router-flux';
  
  // common component
  import { BKImageView } from '../components/common';
  
  
  // global styles
  import styles from './Styles';
  
  // localization strings
  import strings from '../config/localization';
  
  // images
  import Images from '../config/images';
  
  // layouts
  import SplashScreen from './layouts/Scenes/SplashScreen'
  import Scene1 from '../layouts/Scenes/Scene1';
  import Scene2 from '../layouts/Scenes/Scene2';
  import Scene3 from '../layouts/Scenes/Scene3';
  import Scene4 from '../layouts/Scenes/Scene4';
  
  // back button
  const renderBackButton = () =&gt; (
      &lt;TouchableOpacity onPress={() =&gt; Actions.pop()} style={{ width: 60, height: 40, justifyContent: 'space-around' }}&gt;
          &lt;BKImageView source={Images.backIcon} style={{ marginLeft: 10 }} /&gt;
      &lt;/TouchableOpacity&gt;
  );
  
  // define all scenes for the app
  class Routes extends Component {
      render() {
          return (
              &lt;Router
                  backAndroidHandler={() =&gt; Actions.pop()}
                  sceneStyle={styles.sceneStyle}
              &gt;
                  &lt;Scene key="root"&gt;
                      &lt;Scene
                          key="splashScreen"
                          component={SplashScreen}
                          hideNavBar
                          initial
                      /&gt;
                      &lt;Drawer
                          hideNavBar
                          key="scene1"
                          drawerImage={Images.menuIcon}
                          contentComponent={Navigation}
                          drawerWidth={styles.drawerWidth}
                      &gt;
                          &lt;Scene
                              key="scene1"
                              component={Scene1}
                              navigationBarStyle={styles.navigationBarStyle}
                              navBarButtonColor={styles.navBarButtonColor}
                              title={strings.scene1}
                              titleStyle={styles.titleStyle}
                          /&gt;
                      &lt;/Drawer&gt;
                      &lt;Drawer
                          hideNavBar
                          key="scene2"
                          drawerImage={Images.menuIcon}
                          contentComponent={Navigation}
                          drawerWidth={styles.drawerWidth}
                          drawerPosition="right"
                      &gt;
                          &lt;Scene
                              key="scene2"
                              component={Scene2}
                              navigationBarStyle={styles.navigationBarStyle}
                              navBarButtonColor={styles.navBarButtonColor}
                              title={strings.scene2}
                              titleStyle={styles.titleStyle}
                              back
                              renderBackButton={renderBackButton}
                          /&gt;
                      &lt;/Drawer&gt;
                      &lt;Drawer
                          hideNavBar
                          key="scene3"
                          drawerImage={Images.menuIcon}
                          contentComponent={Navigation}
                          drawerWidth={styles.drawerWidth}
                          drawerPosition="right"
                      &gt;
                          &lt;Scene
                              key="scene2"
                              component={Scene3}
                              navigationBarStyle={styles.navigationBarStyle}
                              navBarButtonColor={styles.navBarButtonColor}
                              title={strings.scene3}
                              titleStyle={styles.titleStyle}
                              back
                              renderBackButton={renderBackButton}
                          /&gt;
                      &lt;/Drawer&gt;
                      &lt;Drawer
                          hideNavBar
                          key="scene4"
                          drawerImage={Images.menuIcon}
                          contentComponent={Navigation}
                          drawerWidth={styles.drawerWidth}
                          drawerPosition="right"
                      &gt;
                          &lt;Scene
                              key="scene4"
                              component={Scene4}
                              navigationBarStyle={styles.navigationBarStyle}
                              navBarButtonColor={styles.navBarButtonColor}
                              title={strings.giftCards}
                              titleStyle={styles.scene4}
                              back
                              renderBackButton={renderBackButton}
                          /&gt;
                      &lt;/Drawer&gt;
                  &lt;/Scene&gt;
              &lt;/Router&gt;
          );
      }
  }
  
  export default Routes;
  </code></pre>