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

let {
    Text,
    View,
    Image,
    ListView,
    TouchableHighlight,
    Component,
    ViewPagerAndroid,
    AppRegistry,
    } = React;

class Main extends Component {
    constructor(props) {
        super(props);
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows(new Array(30).join(' ').split(' ').map((s, i)=>`this is item ${i}`)),
        };
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderHeader={()=>{
                        return (
                            <ViewPagerAndroid style={{height: 150, backgroundColor: 'lightgreen'}}>

                                {/* ---- missed these things ---- */}
                                <View style={{height: 150, backgroundColor: 'red'}}>
                                    <Text>the View object is ok</Text>
                                </View>

                            </ViewPagerAndroid>
                        );
                    }}
                    renderRow={(d) => {
                        return (
                            <Text style={{textAlign: 'center'}}>{d}</Text>
                        )
                    }}
                />
            </View>
        )
    }
}

AppRegistry.registerComponent('tmp', () => Main);