Android Style Drawer Navigation example using reactnavigation.org and Exponent-js

AndroidStyleDrawerNavigationExample.js

import Exponent from 'exponent';
import React from 'react';
import {
    Button,
    Platform,
    StatusBar,
    StyleSheet,
    Text,
    TouchableHighlight,
    View,
} from 'react-native';
import {
    DrawerNavigator,
    StackNavigator,
    TabNavigator,
} from 'react-navigation';
import { MaterialCommunityIcons as Icon } from '@exponent/vector-icons';


/* 
    STYLING 
*/
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
})


/*
    COMPONENTS
*/
const App = () => (
    <View style={{ flex: 1, backgroundColor: "#2B6DB5" }}>
        {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
        {Platform.OS === 'android' && <View style={{ paddingTop: Exponent.Constants.statusBarHeight }} />}
        <AppNavigation />
    </View>
)

const MenuButton = ({ navigate }) => (
    <TouchableHighlight onPress={() => { navigate('DrawerOpen') }}>
        <Icon
            name="menu"
            size={24}
            style={{ padding: 16, backgroundColor: "white" }}
        />
    </TouchableHighlight >
)

const leftHeaderMenu = (navigation) => (
    { left: <MenuButton navigate={navigation.navigate} /> }
)


/* 
    SCREENS
*/
const LogInScreen = ({ navigation }) => (
    <View style={styles.container} >
        <Button title="Click Here to Log In" onPress={() => { navigation.navigate('LeftDrawer') }} />
    </View>
)

const BasicScreen = ({ navigation }) => (
    <View style={styles.container} >
        <Text>I am Basic Screen</Text>
    </View>
)
BasicScreen.navigationOptions = {
    title: "Basic Screen",
    header: leftHeaderMenu,
}

const Tab1Screen = () => (
    <View style={styles.container} >
        <Text>I fill up Tab 1, son!!</Text>
    </View>
)

const Tab2Screen = () => (
    <View style={styles.container} >
        <Text>I fill up Tab 2, boo!!</Text>
    </View>
)


/*
    ROUTES
*/
const TabsNavigation = (
    TabNavigator({
        'Tab 1, Son!': { screen: Tab1Screen },
        'Tab 2, Boo!': { screen: Tab2Screen },
    })
)
TabsNavigation.navigationOptions = {
    title: "Tabs Screen",
    header: leftHeaderMenu,
}

const LeftDrawerNavigation = (
    DrawerNavigator({
        'Item1': { screen: StackNavigator({ 'Item1': { screen: BasicScreen } }) },
        'Item2': { screen: StackNavigator({ 'Item2': { screen: TabsNavigation } }) },
    })
)

const AppNavigation = (
    StackNavigator({
        'LogIn': { screen: LogInScreen },
        'LeftDrawer': { screen: LeftDrawerNavigation },
    }, {
            headerMode: 'none'
        }
    )
)

Exponent.registerRootComponent(App)