Custom Overscroll Background Colors for Top and Bottom in FlashList

Feature Request: Custom Overscroll Background Colors for Top and Bottom in FlashList

Problem Statement

Currently, with FlashList (and FlatList), it is not possible to set different background colors for the overscroll (bounce) area at the top and at the bottom of the list. The overscroll area always inherits the background color of the parent container or the list itself, which makes it impossible to have, for example, a white background for the top overscroll (to match a header) and a different color (e.g., red) for the bottom overscroll (to match the content area).

Proposed Solution

Add props to FlashList to allow setting the overscroll background color separately for the top and the bottom:

• Example: overscrollTopBackgroundColor and overscrollBottomBackgroundColor.

This would allow developers to:

• Set a white background for the top overscroll (matching the header)
• Set a different background color for the bottom overscroll (matching the content area)

Example Usage

<FlashList
  data={data}
  overscrollTopBackgroundColor="white"
  overscrollBottomBackgroundColor="#F2F2F7"
  // ...other props
/>

Alternatives Considered

• Wrapping the list in custom Views or using absolute-positioned backgrounds does not affect the native overscroll area.
• No reliable workaround found in the community or in React Native issues.
• Using a single background color for the whole list, but this does not allow for the desired visual separation between header and content.

Priority

• Critical - Blocking my project
• High - Significant improvement to my workflow
• Medium - Would be nice to have
• Low - Minor enhancement

Checklist

• I've searched existing issues and discussions
• I've provided clear use cases for this feature
• I'm willing to help test this feature if implemented

Start by locating FlashList's public TypeScript props and the existing list background or overscroll handling, then compare the behavior described for FlashList and FlatList. Done means the proposed top and bottom color options can be configured independently and the example use case produces the intended colors in both overscroll areas.