Fix AutoHeight on last list item

[admirsaheta]

Description

Fixes (issue #)
#1868

This PR resolves the issue where ItemSeparatorComponent in grid layouts ( numColumns > 1 ) causes all items in a row to stretch to match the height of the tallest item, including separator height. The fix ensures that separators are positioned outside the main item container to prevent interference with grid layout calculations.

Changes Made:

1. ViewHolder Component Refactoring ( src/recyclerview/ViewHolder.tsx ):

• Separator Positioning Fix : Modified separator rendering to position it outside the main item container using absolute positioning
• Code Organization : Extracted style creation into dedicated utility functions ( createContainerStyle , createSeparatorStyle )
• Type Safety Improvements : Enhanced TypeScript types with proper type imports and better type annotations
• Code Quality : Improved variable naming, added clear comments, and organized code into logical sections
  Key Technical Changes:

// Before: Separator rendered inside same container as item content
<CompatContainer>
  {children}
  {separator}
</CompatContainer>

// After: Separator positioned independently to avoid layout interference
<>
  <ContainerComponent>
    {itemContent}
  </ContainerComponent>
  {separatorElement && (
    <CompatView style={separatorStyle}>
      {separatorElement}
    </CompatView>
  )}
</>

Reviewers’ hat-rack 🎩

Focus Areas for Review:

• Verify that separators are correctly positioned in both horizontal and vertical grid layouts

• Test with various ItemSeparatorComponent implementations to ensure no visual regressions

• Confirm that the refactored code maintains all existing functionality

• Check TypeScript compilation and type safety improvements

• Validate that grid items no longer stretch unnecessarily due to separator height
  Testing Scenarios:

• Grid layout with numColumns={2} and custom separator components

• Items with varying content heights in the same row

• Horizontal and vertical list orientations

• Different separator designs (tall, short, with margins)

Screenshots or videos (if needed)

Before Fix:

• Grid items in the same row would all stretch to match the height of the tallest item + separator height

• Items without separators (last in row) would have unnecessary empty space
  After Fix:

• Each grid item maintains its natural content height

• Separators are positioned independently without affecting item dimensions

• Clean, consistent grid layout regardless of separator presence

Test configuration:

<FlashList
  data={items}
  numColumns={2}
  ItemSeparatorComponent={CustomSeparator}
  renderItem={({ item }) => <ItemComponent item={item} />}
/>

The fix ensures that ItemSeparatorComponent works seamlessly with grid layouts while maintaining the expected visual separation between items.