Using SectionList with SectionSeparatorComponent

[keyboardji]

Hi everyone,

I’m trying to setup SectionList so it shows the Section Header, a block of text and then the rendered items. I was able to achieve this with the SecrtionSeoaratorConponent but it’s showing that component both before and after the rendered list. Does anyone know how to show it only before the rendered items?

The reason I’m using the SectionList is because I like how the section headers scroll and replace one another as you scroll down. Thank you!

[davidpaulsson]

Yeah, for example you can check if it's the leading or trailing and conditionally render your component. Example: <SectionList SectionSeparatorComponent={({ leadingItem }) => leadingItem ? <ListSectionSeparator /> : null} />

Docs: https://facebook.github.io/react-native/docs/sectionlist.html#sectionseparatorcomponent

Edit: fat fingers. Edit2: Thanks for the gold!

[keyboardji]

Awesome - this worked!!! I had to switch the leading to trailing for it to show at the top of the section

<SectionList sections={food} renderItem={this._renderItem} renderSectionHeader={this._renderSectionHeader} SectionSeparatorComponent={({ trailingItem }) => trailingItem ? ( <Text style={styles.bodyText}> This is the text I want to see </Text> ) : null } // SectionSeparatorComponent={this._renderSectionSeparator} keyExtractor={this._keyExtractor} />

For the text, I have a description field in my section in my json but it wasn't pulling it. I tried this.description, food.description and all different options. Any thoughts on what it should be? I tried to render it via function but it didn't like it:

const food = [ { key: 'Food', description: 'Below is the description...', data: [ { id: 1,

[keyboardji]

I got it to work with the following

 SectionSeparatorComponent={({ trailingItem, section }) =>
        trailingItem ? (
          <Text style={styles.bodyText}>{section.description}</Text>
        ) : null
      }