Row separators are non-trivial to do and ListView could help by providing them out of the box in a way that’s easier to use than UIKit in most cases. The special characteristics of a separator are:
- It sits in between rows but not above the first row and not below the last row in a section if there is a section header below
- It disappears when a row is highlighted
- Highlighting a row on either side of the separator will include the separator’s area. In the diagram below, if you touch row 1, it highlights row 1 and the separator. If you touch row 2 it highlights row 2 and the separator.
+----------------------------+ +
| row 1 | | touch row 1
| | |
+----------------------------+ |
separator ------------------------------ + +
+----------------------------+ | touch row 2
| row 2 | |
| | |
+----------------------------+ +
For these reasons separators are tricky to build. React could outshine UIKit by letting the programmer provide any View as a separator. This makes it really easy to customize the side margins/padding or have separators of arbitrary heights.
The API could resemble the other list child APIs and just be a delegate prop: <ListView renderSeparator={this.renderSeparator} /> where renderSeparator is a function that receives the section ID and the rowID of the row above it, and returns any View.
Can anyone explain the reasoning behind not having separators rendered above the first row of a section and below the last row of the section?
What is the reasoning for the row and section index checks here? https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/ListView/ListView.js#L409
Hard to pull of the native UIKit look without these.
“react-native”: “0.35.0”
I have been using renderSeparator, but it rendering the separator line after the last row (in the end).
Why?
Note that I just landed (in master) separator highlighting/other custom render support in
FlatListandSectionList. The API is a little different fromListViewbut should be easier to work with, just as powerful/flexible, and maybe a little more performant.