diff --git a/src/components/InterestTabs.tsx b/src/components/InterestTabs.tsx index 6b4a46837f..5fd5742177 100644 --- a/src/components/InterestTabs.tsx +++ b/src/components/InterestTabs.tsx @@ -83,7 +83,12 @@ export function InterestTabs({ function handleTabLayout(index: number, x: number, width: number) { if (!tabOffsets.length) { pendingTabOffsets.current[index] = {x, width} - if (pendingTabOffsets.current.length === interests.length) { + // not only do we check if the length is equal to the number of interests, + // but we also need to ensure that the array isn't sparse. `.filter()` + // removes any empty slots from the array + if ( + pendingTabOffsets.current.filter(o => !!o).length === interests.length + ) { setTabOffsets(pendingTabOffsets.current) } } @@ -205,7 +210,7 @@ export function InterestTabs({ showsHorizontalScrollIndicator={false} decelerationRate="fast" snapToOffsets={ - tabOffsets.length === interests.length + tabOffsets.filter(o => !!o).length === interests.length ? tabOffsets.map(o => o.x - tokens.space.xl) : undefined }