Ui: Insufficient docs for renderSectionHeader for <ListView />

Created on 23 Dec 2016  路  4Comments  路  Source: shoutem/ui

I can't figure out how to render the section headers. It seems like there's a prop missing from the documentation (getSectionId), but I can't figure out what that's supposed to be.

Most helpful comment

OK, I figured it out, this is how it works:
javascript const getSectionHeaderId = (post) => { // passes a post from the array of posts, expects unique identifier return post.cat_id; }; const renderSectionHeader = (cat_id) => { // passes unique identifier specified in getSectionHeaderId, expects rendered header const catTitle = _.filter(props.categories, {_id: cat_id})[0].title; return( <Divider styleName="section-header"> <Caption>{catTitle}</Caption> </Divider> ); }; return ( <ListView data={posts} loading={!postSubscription.ready()} renderRow={postRow} getSectionId={getSectionHeaderId} renderSectionHeader={renderSectionHeader} /> );

All 4 comments

OK, I figured it out, this is how it works:
javascript const getSectionHeaderId = (post) => { // passes a post from the array of posts, expects unique identifier return post.cat_id; }; const renderSectionHeader = (cat_id) => { // passes unique identifier specified in getSectionHeaderId, expects rendered header const catTitle = _.filter(props.categories, {_id: cat_id})[0].title; return( <Divider styleName="section-header"> <Caption>{catTitle}</Caption> </Divider> ); }; return ( <ListView data={posts} loading={!postSubscription.ready()} renderRow={postRow} getSectionId={getSectionHeaderId} renderSectionHeader={renderSectionHeader} /> );

Thanks bro, that was exactly what I was looking for 馃憤

Thanks ! Awesome ! 鉂わ笍

Thanks bro!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

haikov picture haikov  路  4Comments

KazuyaHara picture KazuyaHara  路  6Comments

ronaldpaul picture ronaldpaul  路  5Comments

kreshnikalidema picture kreshnikalidema  路  5Comments

awnali picture awnali  路  4Comments