React-native: SectionList renderItem multi item support

[jmparsons]

From the looks of it only FlatList has multi item support.

Will SectionList get multi item support or can the FlatList be used as the renderItem for a SectionList?

[jmparsons]

@sahrens Hopefully I'm using this correctly.

I'm closing this issue because it looks like FlatList works well as a renderItem for SectionList. I did a stress test with 1000 FlatLists with a possible 10 - 50 data items in each one rendering an image 125x125 with getImageLayout dimensions set and it worked great. Even scroll to top had no issues.

[GollyJer]

@jmparsons you don't by chance have a code sample of how you're doing this?
How do you pass item from the section renderItem to the FlatList rederItem?

[jmparsons]

@GollyJer It's something along these lines:

genListSection = (index, myData) => ({
  key: `${index}`,
  data: [{ key: '', data: myData }],
});

_renderList = ({ item }) => (
  <View style={styles.item}>
    <FlatList
      numColumns={this.state.columns}
      data={item.data}
      getItemLayout={(layoutData, index) => ({
        length: this.state.size.width,
        offset: this.state.size.height * index,
        index,
      })}
      renderItem={this._renderItem}
    />
  </View>
);

render() {
  const { myList } = this.props;
  const dataList = [this.genListSection(0, myList.data)];
  return (
    <View style={styles.container}>
      <SectionList
        style={styles.list}
        onRefresh={this.getData}
        refreshing={false}
        renderItem={this._renderList}
        renderSectionHeader={this._renderSectionHeader}
        sections={dataList}
      />
    </View>
  );
}

[GollyJer]

@jmparsons Awesome. Thanks!

[shukerullah]

Here is my solution to numColumns for SectionList. If you have better let me know please

class Example extends Component {
  static propTypes = {
    numColumns: PropTypes.number
  };

  static defaultProps = {
    numColumns: 2
  };

  _renderSection = data => <Section {...data} />;

  _renderItem = ({ section, index }) => {
    const { numColumns } = this.props;

    if (index % numColumns !== 0) return null;

    const items = [];

    for (let i = index; i < index + numColumns; i++) {
      if (i >= section.data.length) {
        break;
      }

      items.push(<Item item={section.data[i]} />);
    }

    return (
      <View
        style={{
          flexDirection: "row",
          justifyContent: "space-between"
        }}
      >
        {items}
      </View>
    );
  };

  render() {
    return (
      <SectionList
        sections={dumyData}
        style={styles.container}
        renderItem={this._renderItem}
        renderSectionHeader={this._renderSection}
      />
    );
  }
}

[pentarex]

@shukerullah how do you handle the keyExtractor? which RN version are you using?

[witalobenicio]

@shukerullah this will affect the performance of the list.

[sahrens]

Yup, this is exactly how the new lists are designed to be composed! Even virtualization and onViewableItemsChanged will work within the nested lists after https://github.com/facebook/react-native/commit/2668dc8e1be7bf93e65ca2e11c87cbeef3310c3e

[witalobenicio]

@sahrens so you are saying that I can use a Flstlist inside a sectionlist and performance will not be affected?
Wich version of react native provides that? I'm using 0.49 and I tried to use like this and my performance is very poor

[sahrens]

You can search the release branches to see if the commit exists.

Your performance could suffer for any number of reasons, but it's certainly possible to build an app with lots of nested lists with good performance by following React performance best practices.

[mogazheng]

<SectionList contentContainerStyle= {{ flexWrap: 'wrap', flexDirection: 'row', }} .... />