React Native - CSS :last-child without a border?
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
.
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>
);
});