React Native - CSS :last-child without a border?

Question

In React Native, I have a static array of books that I map over and output in stacked rows like this:

return books.map((book, i) => {
  return(
    

        

Answer 1

You could achieve this using some logic:

return books.map((book, i) => {
  return(
    <View style={ (i === books.length - 1) ? styles.noBorderBook : styles.book} key={i}>
      <Text style={(i === books.length - 1) ? styles.noBorderBook : styles.book}>{book.title}</Text>
    </View>
  );
});

What this does is check if i, the iterator, is equal to the books array's length - 1.

Answer 2

You can try extended-stylesheet that supports :last-child:

import EStyleSheet from 'react-native-extended-stylesheet';

const styles = EStyleSheet.create({
  book: {
    borderBottomWidth: 1,
    borderBottomColor: '#000000'
  },
  'book:last-child': {
    borderBottomWidth: 0
  }
});

return books.map((book, i) => {
  const style = EStyleSheet.child(styles, 'book', i, book.length);
  return(
    <View style={style} key={i}>
      <Text style={style}>{book.title}</Text>
    </View>
  );
});