Implementation of SectionList with numColumns and header does not work correctly

[animmore]

Current behavior

Header on the same line as an item, that is really bad

[](url)

Code from an example in official documentation, and added some props to make two columns

const stickyHeaderIndices = sections
    .map((item, index) => {
      if (typeof item === 'string') {
        return index;
      }

      return null;
    })
    .filter(item => item !== null) as number[];

    interface Contact {
      firstName: string;
      lastName: string;
    }

    const contacts: (string | Contact)[] = [
      "A",
      { firstName: "John", lastName: "Aaron" },
      { firstName: "John", lastName: "Are" },
      { firstName: "John", lastName: "Avik" },
      { firstName: "John", lastName: "Amok" },
      { firstName: "John", lastName: "Aluz" },
      { firstName: "John", lastName: "Amio" },
      "D",
      { firstName: "John", lastName: "Doe" },
      { firstName: "Mary", lastName: "Dianne" },
      { firstName: "Mary", lastName: "Dmol" },
      { firstName: "Mary", lastName: "Deko" },
      { firstName: "Mary", lastName: "Duke" },
    ];

    return (
      <View style={styles.container}>
        <View style={{height: 50}} />
        <FlashList
        numColumns={2}
          data={contacts}
          renderItem={({item}) => {
            if (typeof item === 'string') {
              // Rendering header
              return (
                <View style={{backgroundColor: 'dodgerblue', height: 50, width: width, alignSelf: 'center',}}>
                  <Text
                    style={{
                      fontSize: 15,
                    }}>
                    {item}
                  </Text>
                </View>
              );
            } else {
              // Render item
              return (
                <View
                  style={{
                    width: width * 0.4,
                    height: normalize(85),
                    backgroundColor: 'green',
                    alignItems: 'center',
                    justifyContent: 'center',
                    marginTop: 20,
                  }}>
                  <Text>{item.lastName}</Text>
                </View>
              );
            }
          }}
          stickyHeaderIndices={stickyHeaderIndices}
          getItemType={item => {
            // To achieve better performance, specify the type based on the item
            return typeof item === 'string' ? 'sectionHeader' : 'row';
          }}
          estimatedItemSize={normalize(85)}
          contentContainerStyle={{backgroundColor: 'red'}}
        />
      </View>
    );

Expected behavior

Header is not located on the same line like an item. UI structure must be something like this:

Header Item item Item Item ... .... Item item

Header Item item Item item .... .... Item item

To Reproduce

Run code

Platform:

• [✅] iOS
• [✅] Android

Environment

"react-native": "0.67.4",

"@shopify/flash-list": "1.2.2",

[naqvitalha]

You can use overrideItemLayout prop to increase span of your header to 2.

[SMhdAsadi]

You can use overrideItemLayout prop to increase span of your header to 2.

Thanks. That workes👍

[Nantris]

I'm having no luck with overrideItemLayout

Our code looks like this, but everything remains a maximum of one column wide:

overrideItemLayout={(layout, item, index, maxColumns) => {
  layout.span = 2;
  maxColumns = 2;
}}

[naqvitalha]

@Slapbox numColumns={2} needs to be set on FlashList.

[Nantris]

@naqvitalha thanks for your reply! Unfortunately we're already using numColumns={2} - is there anything else we can try? We're on version 1.3.1, but I don't see anything in the changelog to suggest any fixes/changes related to this in newer versions, and I think we're currently locked into 1.3.x due to using Expo.

Any other things we might check? Thanks again!

[naqvitalha]

This function has been there since v1. Are you using this with masonry? That doesn't support custom column spans. If not, help me with an expo sample and I can fix it for you.

[Nantris]

Any chance we can support this, even haphazardly, in Masonry mode?