aretherecookies-mobile/js/App.js

//@flow
import React, { Component } from 'react';
import { View } from 'react-native';
import { ThemeProvider, Toolbar } from 'react-native-material-ui';
import theme from './ui-theme';
import SideMenu from 'react-native-side-menu';
import DrawerMenu from './pages/DrawerMenu';
import { routingContextTypes } from './routes';

type Props = {
    route: Object,
    navigator: Object,
};

type State = {
    drawerOpen: boolean,
};

export default class App extends Component {
    state = { drawerOpen: false };

    props: Props;

    state: State;

    getChildContext() {
        const { navigator, route } = this.props;
        return { navigator, route };
    }

    toggleSideMenu = () => {
        this.setState(({ drawerOpen }) => ({ drawerOpen: !drawerOpen }));
    };

    setSideMenuOpen = (drawerOpen: boolean) => {
        this.setState({ drawerOpen });
    };

    render() {
        const { navigator, route } = this.props;
        const { drawerOpen } = this.state;
        return (
            <ThemeProvider uiTheme={theme}>
                <SideMenu
                    menu={<DrawerMenu navigator={navigator} route={route} />}
                    isOpen={drawerOpen}
                    onChange={this.setSideMenuOpen}
                >
                    <View style={theme.page.container}>
                        <Toolbar
                            leftElement="menu"
                            onLeftElementPress={this.toggleSideMenu}
                            centerElement="Are There Cookies?"
                            searchable={{
                                autoFocus: true,
                                placeholder: 'Search (todo)',
                            }}
                        />
                        <route.component />
                    </View>
                </SideMenu>
            </ThemeProvider>
        );
    }
}
App.childContextTypes = routingContextTypes;