Set styles to last element in ListView with sections - react-native

Question

I have a problem with ListView styling. My ListView has sections. So I need to separate sections by some empty space. I see decision in adding marginBottom style to last element in every section. With css it would be done with :last pseudo-class. Has React Native some alternatives to do this?
Some pseudo code for example:
var dataSource = new React.ListView.DataSource({
rowHasChanged: (a, b) => a !== b,
sectionHeaderHasChanged: (a, b) => a !== b,
getRowData: (dataBlob, sectionId, rowId) => dataBlob[rowId],
getSectionHeaderData: (dataBlob, sectionId, rowId) => dataBlob[sectionId]
});
//test data
var sectionIds = ["clients", "properties"];
var rowIds = [["clients_1", "clients_2"], ["properties_1"]];
var dataBlob = {
clients_1: {
type: "client",
title: "Andrew Chinn",
addInfo: "xxx xxx xxx",
image: ""
},
clients_2: {
type: "client",
title: "Karl Chinn",
addInfo: "xxx xxx xxx",
image: ""
},
properties_1: {
type: "property",
title: "Karl Chinn",
addInfo: "xxx xxx xxx",
image: ""
}
};
const renderSectionHeader = (data) => {
return (
<SomeTestHeader {...data}/>
);
};
const renderRow = (data) => {
return (
<SomeTestComponent {...data}/>
);
};
var Test extends React.Component {
render() {
<View>
<ListView
dataSource={dataSource.cloneWitRowsAndSections(dataBlob, sectionIds, rowIds)}
renderRow={renderRow}
renderSectionHeader={renderSectionHeader}
/>
</View>
}
}

Answer 1

You can do this in your renderRow method :
renderRow = (rowData, sectionId, rowId) => {
var indexSection = _.findIndex(this.state.sectionIds, function(o) {return o === sectionId});
if (rowId == _.last(this.state.rowIds[indexSection])) {
return (
<View style={{backgroundColor: 'red'}}>
<Text>{rowId}</Text>
</View>
);
} else {
return (
<View style={{backgroundColor: 'blue'}}>
<Text>{rowId}</Text>
</View>
);
}
};
You can do the same for your sections with sectionId. I've set up an example here.

Answer 2

ListView exposes a function called renderSeparator which renders a view/component between sections, use it to render the separator you want.
Your other option is just to give marginTop value to the view you're rendering in the renderSectionHeader