How to make drawer for multiple scenes in react-native-router-flux?

Question

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 https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md#drawer-drawer-or-scene-drawer

/**
 * 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 = () => (
    <TouchableOpacity onPress={() => Actions.pop()} style={{ width: 60, height: 40, justifyContent: 'space-around' }}>
        <BKImageView source={Images.backIcon} style={{ marginLeft: 10 }} />
    </TouchableOpacity>
);

// define all scenes for the app
class Routes extends Component {
    render() {
        return (
            <Router
                backAndroidHandler={() => Actions.pop()}
                sceneStyle={styles.sceneStyle}
            >
                <Scene key="root">
                    <Scene
                        key="splashScreen"
                        component={SplashScreen}
                        hideNavBar
                        initial
                    />
                    <Drawer
                        hideNavBar
                        key="scene1"
                        drawerImage={Images.menuIcon}
                        contentComponent={Navigation}
                        drawerWidth={styles.drawerWidth}
                    >
                        <Scene
                            key="scene1"
                            component={Scene1}
                            navigationBarStyle={styles.navigationBarStyle}
                            navBarButtonColor={styles.navBarButtonColor}
                            title={strings.scene1}
                            titleStyle={styles.titleStyle}
                        />
                    </Drawer>
                    <Drawer
                        hideNavBar
                        key="scene2"
                        drawerImage={Images.menuIcon}
                        contentComponent={Navigation}
                        drawerWidth={styles.drawerWidth}
                        drawerPosition="right"
                    >
                        <Scene
                            key="scene2"
                            component={Scene2}
                            navigationBarStyle={styles.navigationBarStyle}
                            navBarButtonColor={styles.navBarButtonColor}
                            title={strings.scene2}
                            titleStyle={styles.titleStyle}
                            back
                            renderBackButton={renderBackButton}
                        />
                    </Drawer>
                    <Drawer
                        hideNavBar
                        key="scene3"
                        drawerImage={Images.menuIcon}
                        contentComponent={Navigation}
                        drawerWidth={styles.drawerWidth}
                        drawerPosition="right"
                    >
                        <Scene
                            key="scene2"
                            component={Scene3}
                            navigationBarStyle={styles.navigationBarStyle}
                            navBarButtonColor={styles.navBarButtonColor}
                            title={strings.scene3}
                            titleStyle={styles.titleStyle}
                            back
                            renderBackButton={renderBackButton}
                        />
                    </Drawer>
                    <Drawer
                        hideNavBar
                        key="scene4"
                        drawerImage={Images.menuIcon}
                        contentComponent={Navigation}
                        drawerWidth={styles.drawerWidth}
                        drawerPosition="right"
                    >
                        <Scene
                            key="scene4"
                            component={Scene4}
                            navigationBarStyle={styles.navigationBarStyle}
                            navBarButtonColor={styles.navBarButtonColor}
                            title={strings.giftCards}
                            titleStyle={styles.scene4}
                            back
                            renderBackButton={renderBackButton}
                        />
                    </Drawer>
                </Scene>
            </Router>
        );
    }
}

export default Routes;

Answer 1

You should create just a single drawer component and add scenes to that. Something like this:

    <Scene key="root">
                    <Scene
                        key="splashScreen"
                        component={SplashScreen}
                        hideNavBar
                        initial
                    />
                    <Drawer
                        hideNavBar
                        key="main"
                        drawerImage={Images.menuIcon}
                        contentComponent={Navigation}
                        drawerWidth={styles.drawerWidth}
                    >
                        <Scene
                            key="scene1"
                            component={Scene1}
                            navigationBarStyle={styles.navigationBarStyle}
                            navBarButtonColor={styles.navBarButtonColor}
                            title={strings.scene1}
                            titleStyle={styles.titleStyle}
                        />
<Scene
                            key="scene2"
                            component={Scene2}
                            navigationBarStyle={styles.navigationBarStyle}
                            navBarButtonColor={styles.navBarButtonColor}
                            title={strings.scene2}
                            titleStyle={styles.titleStyle}
                        />
<Scene
                            key="scene3"
                            component={Scene3}
                            navigationBarStyle={styles.navigationBarStyle}
                            navBarButtonColor={styles.navBarButtonColor}
                            title={strings.scene3}
                            titleStyle={styles.titleStyle}
                        />
                    </Drawer>