Nativebase: How to render Sections in List?

[ghost]

Basically I have an array of names and I want to divide them into sections based on the first letter of name. Also, I would like to render list with sticky section headers.

I went through the js code of list ( *List.js* ) and couldn't find renderSections prop in list.
Does List provide renderSection method or is there any other way to implement sections?

react-native: 0.36.0,
react: 15.3.1,
native-base:0.5.13

[dev-stacks]

What I did was use the react native listview and use native base for the styling.

First You will need to create a CategoryMap

var CategoryMap = {};
if (!CategoryMap[divider]) {
CategoryMap[divider] = [];
}
CategoryMap[divider].push(row);

Then you will need to map these to the listview source

const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2
});

Then render the listview

dataSource={ds.cloneWithRowsAndSections(CategoryMap)}
renderRow={
(detail) => < ListItem listItem > }
renderSectionHeader={
(sectionData, category) => < ListItem itemDivider theme={baseTheme}>< Text>
}
/>

[ghost]

Ok. Thanks for the response. Just to make the situation more clear I am using redux too. Updating react-native ListView increases the complexity of the code while updating the dataArray of List ( native-base ) is pretty simple. Pretty much nothing to do. So, I was thinking of some implementation of sections using List of native-base. Can anyone on the native-base developers side share something that might be useful to me on this road?

[sankhadeeproy007]

List component will support all the props of ListView. So ideally renderSections should work as well. However we haven't tried that out yet and it'll be great if you let us know if that works.

[ghost]

Sure.

[neel132]

@sankhadeeproy007 Yes it works well using default ListView Props[tested].

[ghost]

@neel132 Can you please provide me a sample code?

[jlauu]

I'm also trying to render sections with \

For example:

https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/List.js

/* My caller code */
render() {
  let data = ds.cloneWithRowsAndSections(this.props.data);
  return (
    <List
      dataSource={data}
      renderRow={myRenderRow}
      renderSectionHeader={myRenderSectionHeader}
    />
   );
}


/* in List.js */
  render() {
    if (this.props.dataArray && this.props.renderRow) {
      const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
      // This doesn't support section-structured data
      const dataSource = ds.cloneWithRows(this.props.dataArray);  
      return (
        <ListView
          {...this.props}   // Move this down?
          enableEmptySections
          dataSource={dataSource}
          renderRow={this.props.renderRow}
        />
      );
    }

[jasan-s]

does the sticky header work on android as well?

[jzhw0130]

Does the 'dataSource' property work with List?
For my test, is does not work on version V2.3.3.

I have to use ListView as follows:
<ListView dataSource={data} renderSectionHeader={(sectionData,sectionId) => this._renderSectionHeader(sectionData,sectionId)} renderRow={(task,sectionID,rowID) => this._renderRow(task,sectionID,rowID)} />

But render row and sectionHeader with ListItem.