React-native CSS 'last-child' property

Question

Here is my code:

<ListView style={styles.mainContent}
    ref={(scrollView) => { _scrollView = scrollView; }}
    dataSource={this.state.dataSource}
    renderRow={this.renderRow.bind(this)}
/>

and the styling of that code:

mainContent: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    borderBottomColor: '#CCCCCC',
    paddingLeft: 15,
    paddingRight: 15
},

Now, for every 'ListView' there is a border, and on the last section, I want that border to be removed or overwritten. But in react-native it's not possible to use :last-child.

I have tried using the answers given here, but I was unable to get a result. (I'm still new to React(-native))

Anyone have an idea?

Answer 1

Instead of using ListView, try using ScrollView and iterate over the elements you want to show like the following example (assuming the variable DataSource is the array of values you want to render)

render() {
  const innerElems = DataSource.map((e, i) => {
    if (i === DataSource.length - 1) {
      // check if it's last elem, if so the no border style that you want
      return <View style={styles.noBottomBorder}> ... </View>
    } 
    return <View style={styles.withBottomBorder}> ... </View>
  });
  return (
    <ScrollView style={styles.mainContent}>
      {innerElems}
    </ScrollView>
  );
}