Navigation Drawer in React-Native

Question

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 1

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: 'HomePage',
                        title: 'HomePage',
                        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 'HomePage':
                return ( <HomePage navigator={navigator}/> );

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

const NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        switch (route.id) {
            case 'HomePage':
                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];
}

Answer 2

Firstly, you need to install the react-navigation package: npm install --save react-navigation
To make it easier and more comfortable, I put every lines of codes and comments in my App.js file

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

// Create HomeScreen class. When 'Home' item is clicked, it will navigate to this page
class HomeScreen extends Component {
  render() {
      return <Text> Home Page </Text>
  }
} 

// Create ProfileScreen class. When 'Profile' item is clicked, it will navigate to this page
class ProfileScreen extends Component {
  render() {
    return <Text> Profile Page </Text>
  }
} 

// Create SettingsScreen class. When 'Settings' item is clicked, it will navigate to this page
class SettingsScreen extends Component {
  render() {
    return <Text> Settings Page </Text>
  }
} 

const RootNavigation = DrawerNavigator({
  Home: { screen: HomeScreen },
  Profile: { screen: ProfileScreen},
  Settings: { screen: SettingsScreen}
});

export default class App extends Component {
  render() {
    return <RootNavigation />
  }
}

Here is my demo