CODEWITHSUNDEEP
ioslistviewreact-native
Adamski
Adamski

Reputation: 3705

React Native ListView slow to load

I have a simple ListView which seems to take a long time to load its items. I've tested in Release mode, and its taking about 3 seconds to load the whole page. If I set initialListSize={1} I can see it building the list item by item.

The ListView JSX code:

<ListView
      dataSource={this.state.dataSource}
      renderRow={this.renderRow}
      renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />}
      style={styles.listView}
      initialListSize={1}
    />

And the renderRow method:

  renderRow(row) {
    // console.log ('rendering scale row: ' + row.numerator + ':' + row.denominator );
    return (
      <TouchableHighlight onPress={() => this.pressRow(row)} underlayColor="grey">
        <View style={styles.rowContainer}>
          <Text style={styles.rowText}>{row.hasOwnProperty('label') ? row.label : row.numerator + ':' + row.denominator}</Text>
          <Text style={styles.rowText}>{row.hasOwnProperty('label') ? row.numerator + ':' + row.denominator : ''}</Text>
        </View>
      </TouchableHighlight>
    );
  }

I'm not doing anything very complicated in renderRow... and the data had already been fetched in a previous view and passed in via props.

Is there something I don't know about that could be affecting load/render time?

This is iOS only and on an iPhone 4S. Only 12-21 rows in my tests.

I should also add that the core of the app is using the JUCE C++ framework and running some audio processing in one of the views. I have an audio processing thread that is only run when that view is visible - all other views (including the one with this ListView) will stop the audio processing thread. I've tried also stopping the audio thread in a similar manner but it did not make any difference.

Upvotes: 2

Views: 1340

Answers (2)

Lakshitha Ruwan
Lakshitha Ruwan

Reputation: 969

Better start using FlatList or SectionList since ListView is now Deprecated.

https://facebook.github.io/react-native/docs/listview.html

There are few Caveats like you must use a FLUX/ REDUX or RELAY. Please Checkout the details here (Features/Caveats) https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html

Upvotes: 1

Chris Geirman
Chris Geirman

Reputation: 9684

Not sure if this is going to help you, but I can think of three things you can try...

  1. cmd+T will toggle "slow animations" on/off. This is a long shot
  2. If you are writing to the console.log, comment out those lines. They can surprisingly bog things down considerably sometimes.
  3. Turn off dev mode. You shouldn't need to, but worth a shot

Upvotes: 1

Related Questions