Khushboo Khushboo - 2 months ago 15
React JSX Question

Navigation Drawer in React-Native

I am a newbie in react-native, Dont mind if i ask a basic question, i wanted to know,
what is the step by step procedure to implement navigation drawer.

Referred Links this Link

I am not able to integrate it.

Any Demo project implementing drawer will also work.
Any help regarding this will be great.

Thankyou

Answer

Implementation of navigation drawer in react native as follows:

index.ios.js

'use strict';

import React, { AppRegistry } from 'react-native';
import App from './components/App';

AppRegistry.registerComponent('ReactNativeProject', () => App);

App.js:

'use strict'

import React, { Component } from 'react';
import { DeviceEventEmitter, Navigator, Text, TouchableOpacity, View } from 'react-native';

import Drawer from 'react-native-drawer';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { EventEmitter } from 'fbemitter';

import Menu from './Menu';
import HomePage from './HomePage'
import ProfilePage from './ProfilePage'

import navigationHelper from '../helpers/navigation';

import styles from '../styles/root';

let _emitter = new EventEmitter();

class App extends Component {
    componentDidMount() {
        var self = this;

        _emitter.addListener('openMenu', () => {
            self._drawer.open();
        });

        _emitter.addListener('back', () => {
            self._navigator.pop();
        });
    }

    render() {
        return (
            <Drawer
                ref={(ref) => this._drawer = ref}
                type="overlay"
                content={<Menu navigate={(route) => {
                    this._navigator.push(navigationHelper(route));
                    this._drawer.close()
                }}/>}
                tapToClose={true}
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                closedDrawerOffset={-3}
                styles={{
                    drawer: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
                    main: {paddingLeft: 3}
                }}
                tweenHandler={(ratio) => ({
                    main: { opacity:(2-ratio)/2 }
                })}>
                <Navigator
                    ref={(ref) => this._navigator = ref}
                    configureScene={(route) => Navigator.SceneConfigs.FloatFromLeft}
                    initialRoute={{
                        id: 'Home',
                        title: 'Home',
                        index: 0
                    }}
                    renderScene={(route, navigator) => this._renderScene(route, navigator)}
                    navigationBar={
                        <Navigator.NavigationBar
                            style={styles.navBar}
                            routeMapper={NavigationBarRouteMapper} />
                    }
                />
            </Drawer>
        );
    }

    _renderScene(route, navigator) {
        switch (route.id) {
            case 'Home':
                return ( <Home navigator={navigator}/> );

            case 'AnotherComponent':
                return ( <AnotherComponent navigator={navigator}/> );
        }
    }
}

const NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        switch (route.id) {
            case 'Home':
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {_emitter.emit('openMenu')}}>
                        <Icon name='menu' size={25} color={'white'} />
                    </TouchableOpacity>
                )
            default:
                return (
                    <TouchableOpacity
                        style={styles.navBarLeftButton}
                        onPress={() => {_emitter.emit('back')}}>
                        <Icon name='chevron-left' size={25} color={'white'} />
                    </TouchableOpacity>
                )
        }
    },

    RightButton(route, navigator, index, navState) {
        return (
            <TouchableOpacity
                style={styles.navBarRightButton}>
                <Icon name='more-vert' size={25} color={'white'} />
            </TouchableOpacity>
        )
    },

    Title(route, navigator, index, navState) {
        return (
            <Text style={[styles.navBarText, styles.navBarTitleText]}>
                {route.title}
            </Text>
        )
    }
}

export default App;

Menu.js

import React, { Component } from 'react';
import { ListView } from 'react-native';

import Button from 'react-native-button';

import styles from '../styles/menu'

var _navigate;
class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2
            })
        };
        _navigate = this.props.navigate;
    }

    componentDidMount() {
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(['HomePage', 'ProfilePage'])
        });
    }

    _renderMenuItem(item) {
        return(
            <Button style={styles.menuItem} onPress={()=> this._onItemSelect(item)}>{item}</Button>
        );
    }

    _onItemSelect(item) {
        _navigate(item);
    }

    render() {
        return (
            <ListView
                style={styles.container}
                dataSource={this.state.dataSource}
                renderRow={(item) => this._renderMenuItem(item)}
            />
        );
    }
}

module.exports = Menu;

ProfilePage.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

import styles from '../styles/home'

class ProfilePage extends Component {
    render(){
        return (
            <View style={styles.container}>
                <Text>Profile Page</Text>
            </View>
        );
    }
}

module.exports = ProfilePage;

HomePage.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

import styles from '../styles/home'

class HomePage extends Component {
    render(){
        return (
            <View style={styles.container}>
                <Text>Home Page</Text>
            </View>
        );
    }
}

module.exports = HomePage;

navigation.js

import React, { Platform } from 'react-native';
import _ from 'underscore';

module.exports = function (scene) {
    var componentMap = {
        'HomePage': {
            title: 'HomePage',
            id: 'HomePage'
        },
        'ProfilePage': {
            title: 'ProfilePage',
            id: 'ProfilePage'
        }
    }

    return componentMap[scene];
}