Empty space between tab bar and tab

[kozakstar]

https://github.com/user-attachments/assets/eb267f9e-feab-40d4-ba2c-cb34364b8bba

<Tabs.Container
                    lazy={true}
                    pagerProps={{
                        // onPageSelected: props => {
                        //  console.log('RUN');
                        //  onTabIndexChange(props.nativeEvent.position);
                        // },
                        scrollEnabled: false,
                    }}
                    // onIndexChange={onTabIndexChange}
                    renderTabBar={props => {
                        return (
                            <MaterialTabBar
                                {...props}
                                onTabPress={name => {
                                    props.onTabPress(name);
                                    onTabIndexChange(
                                        props.tabProps.get(name)?.index || 0,
                                    );
                                }}
                                contentContainerStyle={{
                                    paddingVertical: responsiveSize(5),
                                }}
                                TabItemComponent={props => (
                                    <MaterialTabItem
                                        inactiveOpacity={1}
                                        {...props}
                                    />
                                )}
                                style={styles.tabBar}
                                labelStyle={styles.labelStyle}
                                indicatorStyle={styles.indicator}
                                scrollEnabled={true}
                                tabStyle={{
                                    minWidth: 90,
                                }}
                            />
                        );
                    }}
                    headerHeight={276}
                    renderHeader={InvoicesTabHeader}>
                    {INVOICES_TABS.map(it => (
                        <Tabs.Tab key={it} name={it} label={it}>
                            <InvoiceTab
                                onOpenInvoicesSheet={onOpenInvoicesSheet}
                                hasNextPage={hasNextPage}
                                isLoading={isLoading}
                                fetchNextPage={fetchNextPage}
                                isFetchingNextPage={isFetchingNextPage}
                                items={items}
                                totalAmount={totalAmount}
                                totalCount={totalCount}
                                onOpenSortSheet={onOpenSortSheet}
                                onToggleInvoices={onToggleInvoices}
                                isSelectMode={isSelectMode}
                                onCloseSelectMode={onCloseSelectMode}
                                onSelectInvoice={onSelectInvoice}
                                selectedInvoices={selectedInvoices}
                                onOpenSelectSheet={onOpenSelectSheet}
                            />
                        </Tabs.Tab>
                    ))}
                </Tabs.Container>

export const InvoiceTab: React.FC<IInvoiceTab> = ({
    onSelectInvoice,
    selectedInvoices,
    isSelectMode,
    onOpenSelectSheet,
    onCloseSelectMode,
    onToggleInvoices,
    onOpenSortSheet,
    totalAmount,
    totalCount,
    items,
    isFetchingNextPage,
    fetchNextPage,
    hasNextPage,
    isLoading,
    onOpenInvoicesSheet,
}) => {
    // const ref = useRef<FlatList>(null);

    return (
        <>
            {isLoading ? (
                <SkeletonList />
            ) : (
                <Tabs.FlatList
                    // ref={ref}
                    data={items}
                    keyExtractor={it => String(it.id)}
                    renderItem={({ item }) => (
                        <InvoiceItem
                            item={item}
                            onSelectInvoice={() => {
                                onSelectInvoice(item.id);
                            }}
                            isChecked={selectedInvoices.has(item.id)}
                            isSelectMode={isSelectMode}
                        />
                    )}
                    contentContainerStyle={[
                        generalStyles.flexGrow,
                        generalStyles.gap(8),
                        {
                            backgroundColor: isSelectMode
                                ? colors.white
                                : colors.mainBg,
                        },
                    ]}
                    onEndReached={() => {
                        if (hasNextPage && !isFetchingNextPage) {
                            fetchNextPage();
                        }
                    }}
                    ListHeaderComponent={() => (
                        <InvoiceTabHeader
                            onOpenInvoicesSheet={onOpenInvoicesSheet}
                            totalAmount={totalAmount}
                            totalCount={totalCount}
                            onOpenSortSheet={onOpenSortSheet}
                            onToggleInvoices={onToggleInvoices}
                            selectedInvoices={selectedInvoices}
                            onOpenSelectSheet={onOpenSelectSheet}
                            isSelectMode={isSelectMode}
                            onCloseSelectMode={onCloseSelectMode}
                        />
                    )}
                    onEndReachedThreshold={0.2}
                    ListEmptyComponent={() => (
                        <View style={styles.emptyList}>
                            <Typography colorName={'inactiveText'}>
                                No invoices yet
                            </Typography>
                        </View>
                    )}
                    ListFooterComponent={() => (
                        <>
                            {isFetchingNextPage ? (
                                <View style={generalStyles.height(50)}>
                                    <ActivityIndicator />
                                </View>
                            ) : null}
                        </>
                    )}
                />
            )}
        </>
    );
};