Sticky headers don't work with content insets

[bryanmylee]

Current behavior

I'm using FlashList to render a list that flows under the device's safe area in combination with a sticky header. However, the sticky header does not respect the safe area insets and therefore gets stickied at top: 0 under the safe area.

This can be seen on my demo:

flashlist.sticky.header.mp4

The main issue comes from:

<FlashList
  contentInset={{ top: safeAreaInsets.top }}
  contentOffset={{ y: -safeAreaInsets.top }}
  stickyHeaderIndices={[1]}
  // snip
/>

Expected behavior

In contrast, swapping FlashList for FlatList produces the correct behaviour:

flatlist.sticky.header.mp4

<FlatList
  contentInset={{ top: safeAreaInsets.top }}
  contentOffset={{ y: -safeAreaInsets.top }}
  stickyHeaderIndices={[1]}
  // snip
/>

To Reproduce

I've created a minimal reproduction here:

https://github.com/bryanmylee/flashlist-sticky-inset-demo

<FlashList
  contentInset={{ top: safeAreaInsets.top }}
  contentOffset={{ y: -safeAreaInsets.top }}
  stickyHeaderIndices={[1]}
  // snip
/>

Platform:

• iOS
• Android

Environment

1.7.2