NavigationDrawer.js

import React, { Component, PropTypes } from 'react';
import { BackAndroid, Image, Platform, View } from 'react-native';
import Drawer from 'react-native-drawer';
import { Actions, DefaultRenderer } from 'react-native-router-flux';

import DFPBanner from './DFPBanner';
import Menu from '../containers/Menu';
import { getDrawerStyles, drawerTweenHandler } from '../styles/menu';
import { banner } from '../styles';

class NavigationDrawer extends Component {
    constructor(props) {
        super(props);

        this.state = {
            drawerOpen: false
        }
    }

    _handleOpenDrawer(state) {
        Actions.refresh({ key: state.key, open: true });
        this.setState({drawerOpen: true});
        if (Platform.OS === 'android') {
            BackAndroid.addEventListener('hardwareBackPress', this._handleBackAndroidPress);
        }
    }

    _handleCloseDrawer(state) {
        Actions.refresh({ key: state.key, open: false });
        this.setState({drawerOpen: false});
        if (Platform.OS === 'android') {
            BackAndroid.removeEventListener('hardwareBackPress', this._handleBackAndroidPress);
        }
    }

    _handleBackAndroidPress = () => {
        if (this.state.drawerOpen) {
            this.refs.navigation.close();
            return true;
        }
        return false;
    }

    render() {
        const { hasBottomBanner, bottomBanner, hasTopBanner, topBanner } = this.props;
        const state = this.props.navigationState;
        const { children } = state;

        return (
            <Drawer negotiatePan tapToClose
                content={<Menu />}
                ref={'navigation'}
                type={'overlay'}
                open={state.open}
                openDrawerOffset={0.15}
                panCloseMask={0.15}
                onOpen={() => this._handleOpenDrawer(state)}
                onClose={() => this._handleCloseDrawer(state)}
                styles={getDrawerStyles()}
                tweenHandler={drawerTweenHandler}
            >
                {hasTopBanner &&
                    <View style={banner.apoioContainer}>
                        <Image source={{uri: topBanner}} style={banner.image} />
                    </View>
                }
                <DefaultRenderer
                    navigationState={children[0]}
                    onNavigate={this.props.onNavigate} />
                {hasBottomBanner &&
                    <DFPBanner dfpTag={bottomBanner} />
                }
            </Drawer>
        );
    }
}

NavigationDrawer.propTypes = {
    navigationState: PropTypes.object,
}

export default NavigationDrawer;