How to render multiple custom rows in listview - Reactnative

Question

I am using ListView to show the list of items. So far I have displayed same kind of items, so no issues. Now I have to show different kind of items. How can I render different kind of row, like for row 2, render this component, for row 5 render that component...

By default to show 1 Custom view for row, I use the following code:

<ListView
                stickySectionHeadersEnabled={false}
                scrollEnabled={!this.state.shouldAnimate}
                style={styles.listView}
                enableEmptySections={true}
                dataSource={this.state.dataSource}
                renderSectionHeader = {this.renderSectionHeader}
                renderRow={(data) => <CellProgram data={data} onPress={this.GetSectionListItem.bind(this, data)} />}
            />

This will render CellProgram for all rows. What should I change to display it for particular rows and different layout for other rows?

Jigar · Accepted Answer · 2018-05-28 09:25:56Z

1

you can write an if statement or switch, according to your code

<ListView
  stickySectionHeadersEnabled={false}
  scrollEnabled={!this.state.shouldAnimate}
  style={styles.listView}
  enableEmptySections={true}
  dataSource={this.state.dataSource}
  renderSectionHeader = {this.renderSectionHeader}
   renderRow={(data,i) => {
    if(i==1){}
    else if (i==2){}
    .......
   }}
/>

don't forgot to add return inside if statement

answered May 28, 2018 at 9:25

Jigar

1,3749 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jigar Over a year ago

i will tell you the row number to be rendered

AAA Over a year ago

sorry, I dont get you, what is the i? how can i set for different rows?

AAA Over a year ago

Got it. actually (data,i,j) is better, as i will give the section id and j will give the row id

Collectives™ on Stack Overflow

How to render multiple custom rows in listview - Reactnative

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related