title: React Native ListView performance is too slow?
body: <p>I have 113 records in my application.react native listView is taking more than 3 seconds to render all the rows. how can i make it efficient so time consumption can be minimum and  app experience can be smooth. i have checked the same application in ios and it is much efficient as compared to react-native app version. I have one avatar image and name and button in each row.</p>
  
  <p>Here is my code for listview</p>
  
  <pre><code>var Ziglist = React.createClass({
  getInitialState: function() {
       return {
          isLoading: true,
          resultsData: new ListView.DataSource({
          rowHasChanged: (row1, row2) =&gt; row1 != row2 }),
        };
  },
  
  componentWillMount: function(){
    PeopleStore.listen(this.onChange);
    PeopleActions.getPeopleFollowing();
  },
  
  componentWillUnmount() {
    PeopleStore.unlisten(this.onChange);
  },
  
  onChange(state) {
  this.setState({resultsData: this.getDataSource(state.resultsData)})
  },
  
  getDataSource: function(mediaItem: Array&lt;any&gt;): ListView.dataSource {
    return this.state.resultsData.cloneWithRows(mediaItem)
  },
  render: function() {
      return (
    &lt;View style={{flex: 1}} &gt;
    &lt;ListView
      dataSource={this.state.resultsData}
      renderRow={this.renderRow}
      renderSeperator={this.renderSeperator}
      contentInset={{top: 0}}
      automaticallyAdjustContentInsets={false}
    /&gt;
    &lt;Button
      containerStyle={styles.goAhead}
      style={styles.base}
      onPress={() =&gt; this.onStartPress()}&gt;
      &lt;Text style={[styles.base,styles.go]}&gt;Ok, Lets GO &gt; &lt;/Text&gt;
    &lt;/Button&gt;
   &lt;/View&gt;
  );
  },
  renderSeparator: function (sectionID: number | 
  string, rowID: number | string, adjacentRowHighlighted: boolean ) {
   return (
      &lt;View key={"SEP_" + sectionID + "_" + rowID} /&gt;
   );
  },
  renderRow: function (
   media: Object,
   sectionID: number | string,
   rowID: number | string,
   highlightRowFunction: (sectionID: ?number | string, 
   rowID: ?number | string) =&gt; void,) {
    return (
      &lt;CelebrityRow
       media={media}
       onSelect={() =&gt; this.selectMediaItem(media)}
       onHighlight={() =&gt; highlightRowFunction(sectionID,rowID)}
       onDeHighlight={() =&gt; highlightRowFunction(null,null)}
      /&gt;
   );
  },
  selectMediaItem: function (mediaItem) {
  this.props.navigator.push({
    name: 'celebrityDetailView',
    passProps: {
      mediaItem: mediaItem
    }
  });
  }
  </code></pre>
  
  <p>and here is the code for Celebrity Row</p>
  
  <pre><code>var CelebrityRow = React.createClass({
  getInitialState: function() {
      return {
          following_ids: FollowingStore.getState().following_ids,
          unfollowing_ids: FollowingStore.getState().unfollowing_ids,
          icon: null,
          follow: true
      }
  },
  componentWillMount: function() {
      if (_.indexOf(this.state.unfollowing_ids, this.props.media.id) &gt; -1) {
          this.setState({
              follow: !this.state.follow
          });
      }
  },
  componentWillUnmount: function() {},
  componentDidMount: function() {
      var _unfollowing_ids = FollowingStore.getState().unfollowing_ids;
  
      if (_unfollowing_ids.length &gt; 0 &amp;&amp; this.state.follow === false) {
          var following_arr = PeopleStore.getState().resultsData;
          var _following_ids = FollowingStore.getState().following_ids;
  
          _.each(_unfollowing_ids, function(id) {
              var find = _.findWhere(following_arr, {
                  id: id
              });
              following_arr = _.without(following_arr, find);
          });
  
          var following_ids = _.difference(_following_ids, _unfollowing_ids);
  
          this.setState({
              unfollowing_ids: [],
              following_ids: following_ids
          });
          var _this = this;
          setTimeout(function() {
              FollowingActions.updateFollowingIdsWithStorage(following_ids);
              FollowingActions.updateUnFollowingIds([]);
              PeopleActions.updatePeopleFollowingWithStorage(following_arr);
              _this.setState({
                  follow: true
              })
          }, 1000);
  
      }
  
  },
  onChange: function(state) {
      // this.setState({unfollowing_ids: state.unfollowing_ids});
  },
  onAddPress: function(media) {
  
      this.setState({
          follow: !this.state.follow
      });
      FollowingActions.updateUnFollowingIds(media.id);
  },
  render: function() {
  
      return ( &lt;
          View style = {
              styles.row
          } &gt;
          &lt;
          TouchableHighlight onPress = {
              this.props.onSelect
          }
          onShowUnderlay = {
              this.props.onHighlight
          }
          onHideUnderlay = {
              this.props.onDeHighlight
          } &gt;
          &lt;
          View style = {
              styles.cellContainer
          } &gt;
          &lt;
          Image source = {
              {
                  uri: this.props.media.avatar_url
              }
          }
          style = {
              styles.cellImage
          }
          /&gt; &lt;
          Text style = {
              styles.CelebrityName
          }
          numberOfLines = {
              1
          } &gt; {
              this.props.media.name
          } &lt; /Text&gt;
  
          &lt;
          View style = {
              styles.celebrityAdd
          } &gt;
          &lt;
          Button onPress = {
              () =&gt; this.onAddPress(this.props.media)
          } &gt; {
              (this.state.follow ?
                  ( &lt;
                      Image source = {
                          require("../assets/tick-mark.png")
                      }
                      style = {
                          styles.addIcon
                      }
                      /&gt;
                  ) : ( &lt;
                      Image source = {
                          require("../assets/img-small-add.png")
                      }
                      style = {
                          styles.removeIcon
                      }
                      /&gt;
                  )
              )
          } &lt;
          /Button&gt; &lt;
          /View&gt;
  
          &lt;
          /View&gt; &lt;
          /TouchableHighlight&gt; &lt;
          /View&gt;
  
      );
  }
  </code></pre>
  
  <p>});</p>