Hide sticky overflow for Section List

[friyiajr]

Description

Fixes #528

When a view was placed above a sticky header with Flash List the header would overflow that view (see video in original ticket). This PR removes that problem.

Reviewers’ hat-rack 🎩

Note: I couldn't get the e2e tests to run on my machine. Please run them on your end before approving.

1. In fixture/src/contacts/Contacts.tsx copy and paste this code into the render function

  return (
    <View style={{ flex: 1 }}>
      <View style={{ height: 100 }} />
      <View style={{ height: "100%" }}>
        <FlashList
          testID="FlashList"
          estimatedItemSize={44}
          data={data}
          renderItem={({ item }) => {
            if (typeof item === "string") {
              return <ContactSectionHeader title={item} />;
            } else {
              return <ContactCell contact={item as Contact} />;
            }
          }}
          getItemType={(item) => {
            return typeof item === "string" ? "sectionHeader" : "row";
          }}
          ItemSeparatorComponent={ContactDivider}
          stickyHeaderIndices={stickyHeaderIndices}
          ListHeaderComponent={ContactHeader}
          initialScrollIndex={debugContext.initialScrollIndex}
        />
      </View>
    </View>
  );

2. At this point if you scroll up, the sticky header in Contacts should NOT overflow the blank space above it. If you are in main, the sticky header would have gone over the empty space

Screenshots or videos (if needed)

fix.mov

Checklist

• I have added a changelog entry following the Keep a Changelog guidelines.

[sebastienlabine]

Would be nice to see it in the next release 🙌

[andrestone]

Before this PR, it was possible to have sticky headers combined with blurry top menu bars by using the (unadvised) overrideProps.

//...
          overrideProps={{
            style: { minHeight: 1, minWidth: 1, overflow: 'visible' },
          }}
//...

I'm currently patching locally to obtain same behavior, wondering if there's any interest on adding a prop to support that behavior or maybe expanding the use of overrideProps to also allow modifying the sticky header container props, more or less like so:

//...
      <StickyHeaderContainer
        overrideRowRenderer={this.stickyOverrideRowRenderer}
        applyWindowCorrection={this.applyWindowCorrection}
        stickyHeaderIndices={stickyHeaderIndices}
        style={
          this.props.horizontal
            ? { ...this.getTransform() }
            : { flex: 1, overflow: "hidden", ...this.getTransform() }
        }
        {...this.props.overrideProps.stickyContainerProps}
      >
      
      //...

        <ProgressiveListView
          {...restProps}
          ref={this.recyclerRef}
          //...
          scrollViewProps={{
            onScrollBeginDrag: this.onScrollBeginDrag,
            //...
            ...this.props.overrideProps.scrollViewProps,
          }}
//...