Sticky Headers respects contentContainerStyle horizontal padding

[davidfloegel]

Problem Statement

Using a FlashList with StickyHeaders requires custom work arounds if the FlashList uses contentContainerStyle settings such as paddingHorizontal.

What happens is the headers are rendered correctly in the list (since the horizontal padding is applied), but when they become sticky, they don't "remember" that they should have the same horizontal padding applied.

Proposed Solution

Whenever a header becomes sticky, it should apply the same horizontal padding that the contentContainerStyle has.

Alternatives Considered

If this is not always desired, a custom sectionHeaderContainerProps could be considered that I can configure, though I can't think of use-cases where a user would want the sticky header to jump to a different position than it has in the scrolling view itself.

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

[naqvitalha]

@agent Explain how renderTarget can be used to achieve this and close the issue and the linked PR.

[github-actions]

Claude finished @naqvitalha's task in 1m 5s —— View job

---

Using renderTarget to Apply Padding on Sticky Headers

• Research renderTarget in the codebase
• Write explanation
• Close issue and linked PR (fix(sticky-headers): respect contentContainerStyle horizontal padding #2221)

---

FlashList already provides a way to handle this via the target property passed to your renderItem callback. When an item is rendered as a sticky header, target is set to "StickyHeader" (instead of "Cell"). You can use this to conditionally apply horizontal padding:

const renderItem = ({ item, target }: ListRenderItemInfo<MyItem>) => {
  const isStickyHeader = target === "StickyHeader";

  return (
    <View style={isStickyHeader ? { paddingHorizontal: 16 } : undefined}>
      <Text>{item.title}</Text>
    </View>
  );
};

This way, when the header becomes sticky, it renders with the same horizontal padding as the rest of the list content — no workaround needed.

The three possible target values are (FlashListProps.ts:30):

• "Cell" — normal list item
• "StickyHeader" — item is being rendered as a sticky header
• "Measurement" — item is being measured (not visible, can be ignored for styling)

Closed this issue and the linked PR #2221 since the existing API covers this use case.

[github-actions]

Closing this issue — the existing renderTarget API already provides a solution for this. See the explanation in the comment above.