iosNavigator example

App_Components_Dashboard.js

var React = require('react-native');

var {
    Text,
    View,
    StyleSheet
    } = React;

var styles = StyleSheet.create({
    mainContainer: {
        flex: 1,
        padding: 30,
        marginTop: 65,
        flexDirection: 'column',
        justifyContent: 'center',
        backgroundColor: 'orange'
    }
});


class Dashboard extends React.Component {

    render() {
        return (
            <View style={styles.mainContainer}>
                <Text> Dashboard </Text>
            </View>
        )
    }
}
module.exports = Dashboard;

App_Components_Main.js

var React = require('react-native');
var Dashboard = require('./Dashboard')

var {
    Text,
    View,
    StyleSheet
    } = React;

var styles = StyleSheet.create({
    mainContainer: {
        flex: 1,
        padding: 30,
        marginTop: 65,
        flexDirection: 'column',
        justifyContent: 'center',
        backgroundColor: '#48BBEC'
    }
});

class Main extends React.Component {

    render() {
        return (
            <View style={styles.mainContainer}>
                <Text onPress={this.onPress.bind(this)}> Click to switch route</Text>
            </View>
        )
    }

    onPress() {
        this.props.navigator.push({
            title: 'Dashboard',
            component: Dashboard
        });
    }
}
module.exports = Main;

index.ios.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */


var React = require('react-native');
var SideMenu = require('react-native-side-menu');
var window = require('Dimensions').get('window');
var Main = require('./App/Components/Main');
var Dashboard = require('./App/Components/Dashboard');

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

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
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

class Menu extends React.Component {

    about() {
        console.log(this.props);
    }

    render() {
        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 onPress={this.props.navigate} style={styles.item}>About</Text>
                <Text style={styles.item}>Contacts</Text>
            </ScrollView>
        );
    }
};

class slickMenu extends React.Component {
    navigate() {
        this.refs.menu.closeMenu();

        this.refs.navigator.push({
            title: 'Dashboard',
            component: Dashboard,
        })


    }

    render() {
        return (
            <SideMenu ref='menu' menu={<Menu navigate={this.navigate.bind(this)} />}>

                <NavigatorIOS ref="navigator"
                    style={styles.container}
                    initialRoute={{
                title: 'Main',
                component: Main
                }}/>

            </SideMenu>
        )
    }
}


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