index.ios.js

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Button,
    Navigator
} from 'react-native';

import Menu from './app/componentes/Menu';
const SideMenu = require('react-native-side-menu');


export default class Aplicacion extends Component {

    constructor()
    {
        super();
        this.state = {
            isOpen: false,
            selectedItem: 'Home'
        };
    }

    toggle()
    {
        this.setState({
            isOpen: !this.state.isOpen
        })
    }

    updateMenuState(isOpen)
    {
        this.setState({isOpen})
    }

    //al seleccionar un elemento del menú
    onMenuItemSelected = (el) => {
        //cerramos el menú
        this.setState({
            isOpen: false,
            selectedItem: el.item,
        });

        //navegamos al componente
        this.refs.navigator.push({
            component: el.component
        })
    }


  render()
  {

      const menu = <Menu
          navigator={navigator}
          onItemSelected={this.onMenuItemSelected}
      />

    return (
        <View style={{flex: 1}}>
            <SideMenu
                menu={menu}
                isOpen={this.state.isOpen}
                onChange={(isOpen) => this.updateMenuState(isOpen)}
            >
                <Text
                    style={{padding: 10, backgroundColor: 'black', color: 'white', textAlign: 'center'}}
                >
                    {this.state.selectedItem}
                </Text>
            </SideMenu>
        </View>
    );
  }
}

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

Menu.js

import React, {Component} from 'react';
import {
    Dimensions,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView
} from 'react-native';

const window = Dimensions.get('window');
const uri = 'http://www.gravatar.com/avatar/10bae4215eb20cfc117804357d3cb521.jpg?s=40';

export default class Menu extends Component
{
    render()
    {
        return(
            <ScrollView style={styles.menu}>
                <View style={styles.avatarContainer}>
                    <Image

                        style={styles.avatar}
                        source={{uri}}

                    />

                    <Text style={styles.name}>Comunidad</Text>

                </View>
                <Text style={styles.item}>Go Home</Text>
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    menu: {
        flex: 1,
        width: window.width,
        height: window.height,
        backgroundColor: 'navajowhite',
        padding: 20,
    },
    avatarContainer: {
        marginBottom: 10,
        marginTop: 5,
    },
    avatar: {
        width: 48,
        height: 48,
        borderRadius: 24,
        flex: 1,
    },
    name: {
        position: 'absolute',
        left: 70,
        top: 20,
    },
    item: {
        fontSize: 14,
        fontWeight: '300',
        paddingTop: 5,
        color: 'black'
    },
});

package.json

{
  "name": "Aplicacion",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "0.46.4",
    "react-native-side-menu": "^1.0.2"
  },
  "devDependencies": {
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "2.1.0",
    "jest": "20.0.4",
    "react-test-renderer": "16.0.0-alpha.12"
  },
  "jest": {
    "preset": "react-native"
  }
}