toggleMenu() example

index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

var React = require('react-native');
var SideMenu = require('react-native-side-menu');
var window = require('Dimensions').get('window');

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableHighlight
    } = React;

var Menu = React.createClass({
    render: function () {
        return (
            <ScrollView style={styles.menu}>
                <View style={styles.avatarContainer}>
                    <Image
                        style={styles.avatar}
                        source={{
              uri: 'http://pickaface.net/includes/themes/clean/img/slide2.png'
            }}/>
                    <Text style={{ position: 'absolute', left: 70, top: 20 }}>Your name</Text>
                </View>

                <Text style={styles.item}>About</Text>
                <Text style={styles.item}>Contacts</Text>
            </ScrollView>
        );
    }
});

var slickMenu = React.createClass({

    render: function () {

        return (
            <SideMenu ref="sideMenu" menu={<Menu />}>

                <View style={styles.container}>
                    <TouchableHighlight
                        style={styles.button}
                        onPress={this.toggleMenu}
                        underlayColor="red">
                        <Text style={styles.buttonText}> Toggle Menu</Text>
                    </TouchableHighlight>
                </View>
            </SideMenu>
        );
    },

    /* Couldn't find a state eg. open / close. But you can check the .left property that doesn't
    exist when menu is closed. 
     */
    toggleMenu: function () {
        this.refs.sideMenu.left ? this.refs.sideMenu.closeMenu() : this.refs.sideMenu.openMenu()
    }

});

var styles = StyleSheet.create({
    menu: {
        flex: 1,
        width: window.width,
        height: window.height,
        backgroundColor: 'gray',
        padding: 20
    },
    caption: {
        fontSize: 20,
        fontWeight: 'bold',
        alignItems: 'center',
    },
    avatarContainer: {
        marginBottom: 20,
        marginTop: 20
    },
    avatar: {
        width: 48,
        height: 48,
        borderRadius: 24,
        flex: 1
    },
    item: {
        fontSize: 14,
        fontWeight: '300',
        paddingTop: 5,
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    buttonText: {
        fontSize: 18,
        color: '#111',
        alignSelf: 'center'
    },
    button: {
        height: 45,
        flexDirection: 'row',
        backgroundColor: 'red',
        borderColor: 'white',
        borderWidth: 1,
        borderRadius: 8,
        marginBottom: 10,
        marginTop: 10,
        alignSelf: 'stretch',
        justifyContent: 'center'
    },
});

AppRegistry.registerComponent('slickMenu', () => slickMenu);