renderSectionHeader docs not very clear

[syousif94]

I'm trying to create Instagram photo like sticky headers, but I don't understand how to structure the data. I've seen examples like these:

dataSource : new ListView.DataSource({
            getSectionData          : getSectionData,
            getRowData              : getRowData,
            rowHasChanged           : (row1, row2) => row1 !== row2,
            sectionHeaderHasChanged : (s1, s2) => s1 !== s2
 })

and

dataSource : this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)

but I can't figure out how they work...

[dhrrgn]

@syousif94 Here is a nice blog post I found earlier today actually about using section headers: http://moduscreate.com/react-native-listview-with-section-headers/

[syousif94]

@dhrrgn that's where I got those code snippets from. I have trouble following the manipulation of their data.

[syousif94]

Ok I figured it out.

First I put this in my constructor function:

var getSectionData = (dataBlob, sectionID) => {
      return dataBlob[sectionID];
 }
var getRowData = (dataBlob, sectionID, rowID) => {
      return dataBlob[sectionID + ':' + rowID];
}
this.ds = new ListView.DataSource({
      getSectionData: getSectionData,
      getRowData: getRowData,
      rowHasChanged: (r1, r2) => r1 !== r2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2
})  

Then you have to create a dataBlob object, an array of sectionIDs, and an array of rowID arrays with the following formats:

var dataBlob = {
     'sectionID1' : { ...section1 data },
     'sectionID1:rowID1' : { ...row1 data },
     'sectionID1:rowID2' : { ..row2 data },
     'sectionID2' : { ...section2 data },
     'sectionID2:rowID1' : { ...row1 data },
     'sectionID2:rowID2' : { ..row2 data },
     ...
}

var sectionIDs = [ 'sectionID1', 'sectionID2', ... ]

var rowIDs = [ [ 'rowID1', 'rowID2' ], [ 'rowID1', 'rowID2' ], ... ]

Finally, you can create a valid dataSource for your list with:

this.ds.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)

Hope this helps someone else.

[brentvatne]

Nice, thanks for the follow up @syousif94!

[nazywamsiepawel]

@syousif94 you're a star, thanks!

[joshuapinter]

Thank you @syousif94! 👍 Felt like I was missing something. This should be included in the main docs somewhere.

Still seems overly complicated for just a ListView with sections but at least we know to do it now. :)

[syousif94]

@nazywamsiepawel @joshuapinter y'all should switch to SectionList if the version of RN you're using supports it. Way easier to use.

[joshuapinter]

@syousif94 Man, now I have to thank you again. I just replaced my convoluted ListView with SectionList and it's way easier to use. It's less than half the code required for ListView.

Thanks for the pointer! 🙏