Skip to content

[Android] FlashList.tsx drops minHeight from contentContainerStyle, breaking scroll sync on tab switch #498

Description

@AgathaCrystal

Bug

On Android, switching tabs while the header is collapsed shows a large gap above the tab content (~headerScrollDistance pixels). This only happens with Tabs.FlashList, not Tabs.FlatList.

Root Cause

FlashList.tsx only extracts paddingTop from the library's calculated contentContainerStyle, dropping minHeight:

// FlashList.tsx (line 127-135) — drops minHeight
const memoContentContainerStyle = React.useMemo(
  () => [
    { paddingTop: contentContainerStyle.paddingTop },
    _contentContainerStyle,
  ],
  [_contentContainerStyle, contentContainerStyle.paddingTop]
)

FlatList.tsx passes the full style including minHeight:

// FlatList.tsx (line 91-98) — correct
const memoContentContainerStyle = React.useMemo(
  () => [
    _contentContainerStyle,
    contentContainerStyle as any,
  ],
  [_contentContainerStyle, contentContainerStyle]
)

The library's useCollapsibleStyle() calculates minHeight: containerHeight + headerScrollDistance to ensure content is tall enough for the scroll sync target position. Without it, Android's scrollTo(headerScrollDistance) silently fails when content is shorter than the viewport, because the maximum scroll offset is less than the target.

iOS is unaffected because it uses native contentInset instead of paddingTop/scrollTo.

Reproduction

  1. Use Tabs.FlashList with 2+ tabs
  2. Have one tab with short content (fewer items than fill the screen)
  3. Scroll down on tab A until header collapses
  4. Switch to the short-content tab B
  5. Expected: Content appears immediately below the collapsed header
  6. Actual: Large gap (~250px) above the content

Environment

  • react-native-collapsible-tab-view: 9.0.0-rc.0
  • @shopify/flash-list: ^2
  • react-native: 0.83
  • Platform: Android only

Fix

Pass the full contentContainerStyle in FlashList.tsx, matching FlatList.tsx behavior. Fixed by #497

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions