[REACT NATIVE] Navigation

BurgerMenu.js

import React, { Component } from 'react';
import {StyleSheet, TouchableOpacity, Image} from 'react-native';

import { THEME } from '../config/env';

class BurgerMenu extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <TouchableOpacity
                onPress = {() => this.props.nav.navigate('DrawerOpen')} >
                <Image style={styles.image} source={{uri: THEME.burgerLogo}} />
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    image: {
        width: 25,
        height: 25,
        marginLeft: 10,
    }
});

export default BurgerMenu;

index.android.js

import { AppRegistry } from 'react-native';
import App from './src/index';

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

index.ios.js

import { AppRegistry } from 'react-native';
import App from './src/index';

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

index.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

import { Root } from './config/router';
import rootReducer from './config/store';

import SplashScreen from 'react-native-smart-splash-screen';

class App extends Component {
    componentDidMount () {
        SplashScreen.close({
            animationType: SplashScreen.animationType.scale,
            duration: 100,
            delay: 0,
        });
    }

    render() {
        return (
            <Provider store = {createStore(rootReducer)} >
                <Root />
            </Provider>
        )
    }
}

export default App;

router.js

import React from 'react';
import { StackNavigator, DrawerNavigator, TabNavigator } from 'react-navigation';

// Import des commponents
import BurgerMenu from '../components/BurgerMenu';
import DrawerView from '../components/DrawerView';

// Import des écrans
import LoginContainer from '../scenes/login/LoginContainer';
import MenuView from '../scenes/menu/MenuView';
import CameraView from '../scenes/addReport/camera/CameraView';
import CameraEdit from '../scenes/addReport/camera/CameraEdit';
import EditContainer from '../scenes/addReport/edit/EditContainer';
import ReadyContainer from '../scenes/listReport/ready/ReadyContainer';
import DraftsContainer from '../scenes/listReport/drafts/DraftsContainer';

// Import du thème
import { THEME } from './env.js';

export const ListReports = TabNavigator({
    Ready: {
        screen: ReadyContainer,
        navigationOptions: {
            tabBarLabel: THEME.listExpenseReadyTabTitle,
        }
    },
    Drafts: {
        screen: DraftsContainer,
        navigationOptions: {
            tabBarLabel: THEME.listExpenseDraftTabTitle,
        }
    },
}, {
    initialRouteName: 'Ready',
    tabBarOptions: {
        activeTintColor: '#e91e63',
    },
    lazy: true,
    swipeEnabled: false,
});

export const AppDrawer = DrawerNavigator({
    Menu: {
        screen: MenuView,
        navigationOptions: {
            title: THEME.menuHeaderTitle,
        },
    },
    'Nouvelle note de frais': {
        screen: CameraView,
        navigationOptions: {
            header: false,
        }
    },
    'CameraEdit': {
        screen: CameraEdit,
        navigationOptions: {
            header: false,
        }
    },
    Edit: {
        screen: EditContainer,
        navigationOptions: {
            title: THEME.editHeaderTitle,
        }
    },
    'Vos notes de frais': {
        screen: ListReports,
        navigationOptions: {
            title: THEME.listExpenseHeaderTitle,
        },
    }
}, {
    initialRouteName: 'Menu',
    contentComponent: props => <DrawerView {...props} />
});

export const Root = StackNavigator({
    Login: {
        screen: LoginContainer,
        navigationOptions: {
            header: false,
        }
    },
    App: {
        screen: AppDrawer,
        navigationOptions: ({navigation}) => ({
            headerLeft: <BurgerMenu nav = {navigation} />,
        })
    }
}, {
    headerMode: 'screen',
    initialRouteName: 'Login',
});