Render rows within sections using ListView? - react-native

Question

With the ListView component in react-native - is it possible to render rows within sections like this?
<section>
<row>A</row>
<row>B</row>
</section>
<section>
<row>C</row>
<row>D</row>
</section>
And not like this:
<section></section>
<row>A</row>
<row>B</row>
<section></section>
<row>C</row>
<row>D</row>
I'm using renderRow and renderSectionHeader.
The reason I want to render like this is due to the styling. But maybe I'll need to have two nested ListView instead?

Answer 1

I can propose a bit hacky solution.
On android to add shadow to secton you can set elevation to all rows and section header. On ios you need to set shadow* styles.
But you will get problem if you will decide to add borderRadius. In this case to prevent top border artifacts you can add small negative marginBottom (-2 or -4 should be enough) to each row.
shadow: {
shadowOffset: {
width: 2,
height: 2
},
shadowRadius: 1,
shadowOpacity: 0.2,
elevation: 2,
borderRadius: 2,
marginBottom: -2,
}
ListView with 3 rows: