Flatlist contains empty space

I tried to display my posts using Flatlist (gensture-handler) + setup infinite scroll to load new posts. when i scrolling the flatlist, i have an empty space (idk why). as you can see on screenshot, scrollview thumb in the center of scrollview, but there empty space

screenshot

NEW POST COMPONENT

import { t } from 'i18next';
import { useEffect, useState, useCallback } from 'react';
import { View, FlatList, Text } from 'react-native';
import { api } from '../../../../services/Api';
import { IPost } from '../../../../types';
import Button from '../../../common/Button';
import CardSkeleton from '../../../common/CardSkeleton';
import { ScreenContainer } from '../../../containers/ScreenContainer';
import { PostCard } from '../../Post/PostCard/PostCard';
import HomeSection from '../molecules/HomeSection/HomeSection';
import { twMerge } from 'tailwind-merge';

const MoreNewPosts = () => {
  const [search, { data, isLoading, isSuccess }] =
    api.useSearchByQueryMutation();
  const [currentPage, setCurrentPage] = useState(1);
  const [allPosts, setAllPosts] = useState<IPost[]>([]);

  useEffect(() => {
    loadPosts(1);
  }, []);

  const loadPosts = (page: number) => {
    search({
      page,
      sort_by: 'newest',
    }).then((response) => {
      if (response && 'data' in response) {
        setAllPosts((prevPosts) => {
          const newPosts = response.data.posts.filter(
            (post) => !prevPosts.some((prevPost) => prevPost.id === post.id),
          );
          return [...prevPosts, ...newPosts];
        });
      }
    });
  };

  const handleLoadMore = () => {
    const nextPage = currentPage + 1;
    setCurrentPage(nextPage);
    loadPosts(nextPage);
  };

  const renderItem = ({ item, index }: { item: IPost; index: number }) => (
    <View key={item.id} className={twMerge(index % 2 === 0 ? 'mr-2' : 'ml-2')}>
      <PostCard post={item} isLoading={isLoading} />
    </View>
  );

  const renderFooter = () => {
    if (isLoading) {
      return Array.from({ length: 10 }).map((_, index) => (
        <CardSkeleton key={index} isLoading={isLoading} />
      ));
    }
    return null;
  };

  return (
    <ScreenContainer
      edges={['left', 'right', 'bottom']}
      className="flex-1 bg-white"
    >
      <HomeSection
        label={t('translation:dashboard.fresh_posts.message')}
        elementsAlign="end"
      >
        {allPosts.length ? (
          <FlatList
            data={allPosts}
            numColumns={2}
            renderItem={renderItem}
            keyExtractor={(item) => item.id.toString()}
            onEndReached={handleLoadMore}
            onEndReachedThreshold={0.5}
            ListFooterComponent={renderFooter}
            removeClippedSubviews
          />
        ) : null}
      </HomeSection>
    </ScreenContainer>
  );
};

export default MoreNewPosts;

POST CARD COMPONENT

import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { t } from 'i18next';
import { memo, useState } from 'react';
import { Pressable, Text, View, ViewStyle } from 'react-native';
import { Image } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';
import { twMerge } from 'tailwind-merge';

import { useAppSelector } from '../../../../hooks/useActions';
import { getShortProductName } from '../../../../lib/text';
import { IPost } from '../../../../types';
import {
  CompositeRootStackNavigationProp,
  RootStackParamList,
} from '../../../../types/types';
import { getPostPrice } from '../../../../utils/get';
import LikeComponent from '../LikeComponent/LikeComponent';
import DefaultAvatar from '../../../common/DefaultAvatar';
import Chip from '../../../common/Chip';

export const PostCard = memo(
  ({
    post,
    className,
    style,
    isLoading,
    shouldResize = true,
    isFilter,
  }: {
    post: IPost;
    className?: string;
    style?: ViewStyle;
    isLoading?: boolean;
    shouldResize?: boolean;
    isFilter?: boolean;
  }) => {
    const navigation = useNavigation<CompositeRootStackNavigationProp>();
    const { activeCurrency, isAuthorized } = useAppSelector(
      (state) => state.authReducer,
    );

    return (
      <Pressable
        onPress={() => {
          navigation.push('Tabs', {
            screen: 'HomeStack',
            params: {
              screen: 'Post',
              params: { id: post.id },
            },
          });
        }}
        className={twMerge(
          'relative rounded-[10px] rounded-t-[20px] bg-[#f5f5f5] min-w-[170px] max-w-[50%] flex-1',
          className,
        )}
        style={{
          height: 250,
          ...style,
        }}
      >
        <View
          style={{ backgroundColor: post.used ? '#F8D7A9' : '#99D6A6' }}
          className="absolute left-2 top-2 justify-center items-center rounded-[20px] px-2 py-[5px] z-50"
        >
          <Text
            style={{
              color: post.used ? '#D96804' : '#017B1C',
            }}
            className="text-[12px] font-semibold"
          >
            {post.used
              ? t('translation:product_card.used.message')
              : t('translation:product_card.new.message')}
          </Text>
        </View>

        {isAuthorized && <LikeComponent post={post} />}

        <Image
          height={150}
          className="self-center w-full rounded-[20px] rounded-b-[0px] border-2 border-[#f5f5f5]"
          source={
            post.images_variants.length
              ? { uri: post.images_variants[0].original }
              : require('../../../../../assets/default_image.png')
          }
        />

        <View className="py-[3px] w-full px-[7px]">
          <View className="flex-row justify-between items-center">
            <Text className=" text-[18px] font-medium">
              {post.price === null
                ? t('translation:product_card.discussed.message')
                : post.price == 0.0
                  ? t('translation:product_card.free.message')
                  : getPostPrice(post, activeCurrency)}
            </Text>

            <Text className="text-[12px] font-normal">
              {post.user_location?.name}
            </Text>
          </View>

          <Text
            numberOfLines={2}
            ellipsizeMode="tail"
            className="text-[14px] mb-2 min-h-[40px] max-h-[40px] font-normal"
          >
            {post.title}
          </Text>

          <View className="flex-row py-1 items-center">
            {post.user.avatar ? (
              <Image
                className="rounded-full w-4 h-4"
                source={{ uri: post.user.avatar }}
              />
            ) : (
              <DefaultAvatar size={16} username={post.user.username} />
            )}

            <Text
              className="text-[12px] font-normal ml-1"
              numberOfLines={1}
              ellipsizeMode="tail"
            >
              {post.user.username}
            </Text>
          </View>
        </View>
      </Pressable>
    );
  },
  (prevProps, nextProps) => {
    return prevProps.post === nextProps.post;
  },
);

I tried different keys, optimize the post card. before that I just had a “load more” button and everything worked fine (using scrollview). however when I tried infinite scroll, everything broke