simple infinite scroll gridView example

gridItem.js

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

var {
    Text,
    View,
    StyleSheet
    } = React;

var styles = StyleSheet.create({
    photo: {
        height: 150,
        flex: 1,
        borderColor: 'red',
        borderWidth: 1,
        alignItems: 'center',
        flexDirection: 'column'
    }
});

class GridItem extends React.Component {

    render() {
        return (
            <View style={styles.photo}>
                <Text>{this.props.item}</Text>
            </View>
        )
    }
}
module.exports = GridItem;

index.ios.js

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

var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    } = React;

var GridView = require('react-native-grid-view');
var GridItem = require('./gridItem');

var styles = StyleSheet.create({
    listView: {
        backgroundColor: 'yellow'
    }
});

var PHOTOS_PER_ROW = 2;

class gridView extends React.Component {
    constructor() {
        this.state = {
            dataSource: ['photo1', 'photo2', 'photo3', 'photo4', 'photo5', 'photo6', 'photo7', 'photo8', 'photo9']
        };

        this.onEndReached = this.onEndReached.bind(this)
    }

    render() {
        return (
            <GridView
                items={this.state.dataSource}
                itemsPerRow={PHOTOS_PER_ROW}
                renderItem={this._renderItem}
                style={styles.listView}
                onEndReached={this.onEndReached.bind(this)}
                />
        )
    }

    _renderItem(item) {
        return <GridItem item={item}/>
    }

    onEndReached() {
        var that = this;
        var oldArr;

        for (var i = 0; i < 10; i++) {
            oldArr = that.state.dataSource;
            oldArr.push(i);
        }

        this.setState({
            dataSource: oldArr
        })
    }

}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

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