Skip to content

Fix: contentContainerStyle paddingTop ignored on initial render (iOS)#403

Open
Kasendwa wants to merge 1 commit intoLegendApp:mainfrom
Kasendwa:fix/content-container-style-padding-top-ios
Open

Fix: contentContainerStyle paddingTop ignored on initial render (iOS)#403
Kasendwa wants to merge 1 commit intoLegendApp:mainfrom
Kasendwa:fix/content-container-style-padding-top-ios

Conversation

@Kasendwa
Copy link

Closes #392

What's the problem?

On iOS, when a LegendList (or AnimatedLegendList) has paddingTop in contentContainerStyle or uses a ListHeaderComponent, the list renders with the padding/header scrolled out of view on the first render. The user sees the content as if it's already scrolled past the top. Scrolling up manually reveals the padding/header, and everything works fine from that point on.

This only affects iOS — Android is unaffected.

Why does it happen?

In initializeStateVars, the MVCP (maintainVisibleContentPosition) logic detects a padding "change" on first render — from 0 (the initial default) to the actual value (e.g. 100) — and calls requestAdjust to compensate. But there's nothing to compensate for on the first render; the list hasn't scrolled yet.

The existing guard (prevPaddingTop !== undefined) was meant to catch this, but it fails because stylePaddingTop is initialized to 0 in the state context, not undefined.

How is it fixed?

Added a state.hasScrolled check to the condition:

 if (
     maintainVisibleContentPosition &&
     paddingDiff &&
     prevPaddingTop !== undefined &&
+    state.hasScrolled &&
     Platform.OS === "ios"
 ) {

state.hasScrolled is false until the user actually scrolls (set in onScrollAction), so the adjustment is skipped on first render. After the user scrolls, dynamic padding changes are still correctly compensated.

Testing

  • Added 7 regression tests in __tests__/core/initializeStateVars-mvcp.test.ts covering:
    • First render with paddingTop (the bug case)
    • Post-scroll padding changes (MVCP still works correctly)
    • MVCP disabled, zero diff, undefined prev padding, negative scroll
    • ListHeaderComponent scenario
  • All 1011 tests pass
  • Build passes cleanly

Reproduction

  1. Create a LegendList with contentContainerStyle={{ paddingTop: 100 }} or a ListHeaderComponent
  2. Run on iOS (simulator or device)
  3. Observe the padding/header is scrolled out of view on first render
  4. Scroll up — it appears and works correctly after that

Performance Impact

None. This adds a single boolean read (state.hasScrolled) to an existing conditional. No new allocations, renders, or layout changes.

…dApp#392)

When a LegendList has paddingTop in contentContainerStyle (or a
ListHeaderComponent), the list was rendering with the padding scrolled
out of view on the first render. This happened because the MVCP logic
saw the padding change from 0 to the actual value and tried to
compensate, even though nothing had actually scrolled yet.

Fixed by checking state.hasScrolled before applying the adjustment,
so we only compensate for padding changes after the user has scrolled.
Added regression test covering the first-render and post-scroll cases.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

paddingTop is not applying on render in iOS

1 participant