scrollview / listview navigatorIOS

EventsList.js

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

var {
    Text,
    View,
    StyleSheet,
    ListView,
    ScrollView,
    } = React;

var styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        justifyContent: 'center',
        padding: 10,
        backgroundColor: '#F6F6F6',
        height: 500,
    },
    container: {
        flex: 1,
        backgroundColor: 'white'
    },
    menu: {
        width: window.width,
        height: window.height,
    }

});

class PrivateEventsList extends React.Component {

    constructor() {
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

        this.state = {
            isLoading: false,
            dataSource: ds.cloneWithRows(['row 1', 'row 2']),
        }
    }

    onEndReached() {

    }

    render() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={(rowData) =>   <View style={styles.row}>
                <Text>{rowData}</Text>
            </View>}
                />
        )
    }
}

module.exports = PrivateEventsList;

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 UserReg = require('./App/Components/User/UserReg');
var UserContainer = require('./App/Components/User/UserContainer');
var EventsList = require('./App/Components/Event/EventsList');

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 {

    render() {
        return (
            <View 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>
            </View>
        );
    }
};

class flokka 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: 'flokka',
                    component: EventsList
                    }}/>
            </SideMenu>
        )
    }
}


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