Question

Native styling listview even odd rows

11

Hi all, I am styling my native app and want try to change the backgroundcolors of the even/odd items. I want it to look like this: This is a list on the web app and now I want the same for the native app. Does somebody know how you can change only the even/odd rows in a list in react native? Thanks! Kolien

asked 2020-07-17

Kolien Pleijsant

3 answers

Rob Duits · Answer 1 · 2020-07-20

Hi Kolien, try this:

.mx-listview > ul > li:nth-child(odd) {background-color: #BADa55;}
.mx-listview > ul > li:nth-child(even) {background-color: white;}

Jeremie Degrave · Answer 2 · 2021-11-18

You found it! :)

Glenn Cörvers · Answer 3 · 2021-12-09

You could build your own function to check whether you are on an odd or even row. Using the row ID or a custom counter as input and the modulo function to determine whether the current row is even. If so, give it a different underlayColor.

See as well this StackOverflow solution.