Support for separators in ListView

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.

4 thoughts on “Support for separators in ListView

  1. “react-native”: “0.35.0”
    I have been using renderSeparator, but it rendering the separator line after the last row (in the end).
    Why?

  2. Note that I just landed (in master) separator highlighting/other custom render support in FlatList and SectionList. The API is a little different from ListView but should be easier to work with, just as powerful/flexible, and maybe a little more performant.

  3. Pingback: replica watches

Support for separators in ListView

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.

2 thoughts on “Support for separators in ListView

  1. “react-native”: “0.35.0”
    I have been using renderSeparator, but it rendering the separator line after the last row (in the end).
    Why?