Poor rendering

gistfile1.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Image,
  Text,
  ListView,
  Navigator,
  View
} from 'react-native';
class HomePage extends Component
{
  // Initialize the hardcoded data
  constructor(props) {
    super(props);
    var data = ['begin'];
    for (i = 0; i < 1000; i++) {
    data.push(Math.random().toString(36).substring(7))
    }
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(data)
    };
  }
  render() {
    return (
    <Navigator
        renderScene={this.renderScene.bind(this)}
        navigationBar={
          <Navigator.NavigationBar style={{backgroundColor: '#000000', alignItems: 'center'}}
              routeMapper={NavigationBarRouteMapper} />
        } />
  );
}
  renderScene(route, navigator) {
    return (
<View style={{paddingTop: 22,flex:1}}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderRow.bind(this)}
          renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator}/>}
        />
      </View>
    );
  }
renderRow(rowData, sectionID, rowID, highlightRow: (sectionID: number, rowID: number) => void){
     var rowHash = Math.abs(hashCode(rowData));
     var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
    return (
        <View>
        <Image source={imgSource} />
          <Text>{rowData}</Text>
        </View>
    )
  }
var THUMB_URLS = [
  require('./Thumbnails/like.png'),
  require('./Thumbnails/dislike.png'),
  require('./Thumbnails/call.png'),
  require('./Thumbnails/fist.png'),
  require('./Thumbnails/bandaged.png'),
  require('./Thumbnails/flowers.png'),
  require('./Thumbnails/heart.png'),
  require('./Thumbnails/liking.png'),
  require('./Thumbnails/party.png'),
  require('./Thumbnails/poke.png'),
  require('./Thumbnails/superlike.png'),
  require('./Thumbnails/victory.png'),
  ];
module.exports = HomePage;