Listview with alternating color in react native

Question

I have array of objects like the example below;

[{
        \"id\" : 13100,
        \"key\" : \"Emlak Vergisi\",
        \"y\" : 135638.98
    }, {
        \"         


        

Answer 1

I would say this approach is cleaner:

 renderRow(rowData, sectionID, rowID) {

   let style = [
         styles.row, 
         {'backgroundColor': colors[rowID % colors.length]}
       ];

   return (<View style={style}/>);
 }

 let colors = ['#123456', '#654321', '#fdecba', '#abcdef'];

 let styles = StyleSheet.create({
       row: {
            // .. rows style
       }
 });

This way you can easily add a specail color to each row in the list (not only by even/odd type)

Answer 2

    (Provided Array).map((array, index) => {
        return (
            <View style={{ backgroundColor: (index % 2 == 0) ? '#ecf0f1' : '#fff' }}>
                <Text>{array.key}</Text>
            </View>
        )
    })

Answer 3

You can use the rowId provided in the renderRow function. I've set up a working example here

Render row method :

  renderRow = (rowData, sectionId, rowId) => {
    if (rowId % 2) {
      return (
        <View style={{backgroundColor: 'red'}}>
          <Text>{rowData.id}</Text>
        </View>
      );
    } else {
      return (
        <View style={{backgroundColor: 'blue'}}>
          <Text>{rowData.id}</Text>
        </View>
      );
    }
  };

Answer 4

Yes in renderRow, apply a different style based on rowID or rowData etc

Ex:

renderRow(rowData, sectionID, rowID, highlightRow) {
    if(rowID%2 === 0) {
        return (<View style={{backgroundColor: 'blue'}}/>);
    }
    return (<View style={{backgroundColor: 'red'}}/>);
}