reactjs - Alternate row in list view react native -

i trying show alternate colors in list view not happening.i have researched , tried various options available in internet unfortunately did not success. can tell me wrong?

    'use strict';    import react, {component} 'react'   import{     stylesheet,     image,     navigator,     text,     view,     listview, }from 'react-native';  var menu_drawer_list_item = [{title:'deluxe room', description:'double bed, tv, ac, wi-fi...', image:require('../icons/images/rest.jpg')},                         {title:'premier room', description:'double bed, tv, ac, wi-fi...', image:require('../icons/images/rest.jpg')},                         {title:'suite room', description:'double bed, tv, ac, wi-fi...', image:require('../icons/images/rest.jpg')},];   class room extends component{     constructor(props){      super(props);      this.state = {    datasource: new listview.datasource({         rowhaschanged : (row1,row2) => row1!=row2     }) }; }   render(){    return(   <listview         datasource={this.state.datasource}         renderrow={(item, rowid) => this._rendermenuitem(item, rowid)} /> ); }   componentdidmount() {     this.setstate({       datasource: this.state.datasource.clonewithrows(menu_drawer_list_item)   }); }    _rendermenuitem(item, rowid) { console.log("row id....."+rowid);     if(rowid % 2 == 0){       return(         <view style ={{flexdirection:'row', height:150, backgroundcolor:'red'}}>            <view style={{padding:2.5}}>              <image style={{width:150, height:110, borderradius:5}} source ={item.image}></image>            </view>            <view style={{margintop:15, marginleft:10}}>             <text style={{fontsize:20}}>{item.title}</text>             <text style={{fontsize:20}}>{item.description}</text>             <text style={{fontsize:18, backgroundcolor:'green', width:150, margintop:10, height:22, color:'white'}}>check availabilty</text>            </view>         </view>       );     }else{       return(         <view style ={{flexdirection:'row', height:150, backgroundcolor:'blue'}}>            <view style={{padding:2.5}}>              <image style={{width:150, height:110, borderradius:5}} source ={item.image}></image>            </view>            <view style={{margintop:15, marginleft:10}}>             <text style={{fontsize:20}}>{item.title}</text>             <text style={{fontsize:20}}>{item.description}</text>             <text style={{fontsize:18, backgroundcolor:'green', width:150, margintop:10, height:22, color:'white'}}>check availabilty</text>            </view>         </view>     );   } }  }  module.exports = room; 

and getting values in android studio monitor...

06-29 15:01:40.268 27584-5131/com.demoreactapp i/reactnativejs: row id.....s1 06-29 15:01:40.312 27584-5131/com.demoreactapp i/reactnativejs: row id.....s1 06-29 15:01:40.351 27584-5131/com.demoreactapp i/reactnativejs: row id.....s1 

can please me on ??

you had right second argument passed renderrow section id. row id third argument.

see http://facebook.github.io/react-native/docs/listview.html#renderrow

so change render method this:

render() {    return (       <listview         datasource={this.state.datasource}         renderrow={(item, sectionid, rowid) => this._rendermenuitem(item, rowid)}        />     ); }