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
- Use
Tabs.FlashList with 2+ tabs
- Have one tab with short content (fewer items than fill the screen)
- Scroll down on tab A until header collapses
- Switch to the short-content tab B
- Expected: Content appears immediately below the collapsed header
- 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
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, notTabs.FlatList.Root Cause
FlashList.tsxonly extractspaddingTopfrom the library's calculatedcontentContainerStyle, droppingminHeight:FlatList.tsxpasses the full style includingminHeight:The library's
useCollapsibleStyle()calculatesminHeight: containerHeight + headerScrollDistanceto ensure content is tall enough for the scroll sync target position. Without it, Android'sscrollTo(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
contentInsetinstead ofpaddingTop/scrollTo.Reproduction
Tabs.FlashListwith 2+ tabsEnvironment
Fix
Pass the full
contentContainerStyleinFlashList.tsx, matchingFlatList.tsxbehavior. Fixed by #497