React-native: Support for separators in ListView

[ide]

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.

[sahrens]

Great idea! At times we have cheated by making the (static) separators the same color as the highlight state so they appear to disappear on press....having real support like this would be much better.

On Feb 26, 2015, at 3:21 AM, James Ide [email protected] wrote:

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: where renderSeparator is a function that receives the section ID and the rowID of the row above it, and returns any View.

—
Reply to this email directly or view it on GitHub.

[vjeux]

like-stamp

[ide]

ListView now has renderSeparator.

[olivierlesnicki]

renderSeparator doesn't seem to work with ListView

[sahrens]

Can you provide more context, like a code sample of how you tried to use it? I'm pretty sure it's working in the Movies sample app, but it might have broken.

-Spencer

On Jun 6, 2015, at 1:22 PM, Olivier Lesnicki [email protected] wrote:

renderSeparator doesn't seem to work with ListView

—
Reply to this email directly or view it on GitHub.

[vjeux]

Shot in the dark. If you install react native the normal way, you get 0.5 that doesn't have this feature yet. You need to manually do npm install [email protected] in order to test it out.

[olivierlesnicki]

"react-native": "^0.5.0" touché!

[erickreutz]

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.

[erickreutz]

@ide anything on the above?

[proteye]

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

[RyanMitchellWilson]

I'm using React Native 0.41.0 and getting the same problem that @proteye mentioned for React Native 0.35.0.
Is this being worked on yet?

[nabati]

Related? @RyanMitchellWilson

If provided, a renderable component to be rendered as the separator below each row but not the last row if there is a section header below. Take a sectionID and rowID of the row above and whether its adjacent row is highlighted.

[gregblass]

I'm trying to add a separator (or just a style border) to the first list item. Any idea how I could do that? :first-child isn't available. Is there an index?

EDIT: I put a search element at the top, and I can set the border there.

[sahrens]

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.

[Nygma297]

@sahrens Can you please acknowledge as what version is it compatible with? I'm running [email protected]! Can I use FlatList and SectionList!?

[sahrens]

@Nygma297: you can browse both the source and documentation by version:

Docs have a version number in top left that will take you to this page: https://facebook.github.io/react-native/versions.html

github has a "branches" dropdown you can use to browse the source of your version: https://github.com/facebook/react-native/tree/0.42-stable/Libraries/

[gregblass]

@Nygma297 FlatList and SectionList are newer, separate components than ListView. They are included in React Native 0.43 and above - so they will not be available in 0.42.

https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html

This thread is about the ListView component, which is different. FlatList has a simplified syntax and better performance. It does support item separators - when in doubt just check the API: https://facebook.github.io/react-native/docs/flatlist.html#itemseparatorcomponent -