React Native ListView performance is too slow?
<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>