On firstTime Rendering it dosent work

[shishirkj]

import ContainerHeader from '@/presentation/components/channels/common/ContainerHeader';
import { PostItem } from '@/presentation/components/post/postItem';
import type React from 'react';
import { RefObject, useEffect, useMemo, useRef, useState } from 'react';
import { FlatList, View } from 'react-native';
import usePost from '@/application/hooks/post/usePost';
import { authState } from '@/application/slice/authSlice';
import { postState, setLimit, setPage } from '@/application/slice/postSlice';
import { channelId } from '@/constants/channelIdOptions';
import { PostError } from '@/error/postException';
import { useQuery } from '@tanstack/react-query';
import { useDispatch, useSelector } from 'react-redux';
import { createShimmerPlaceHolder } from 'expo-shimmer-placeholder';
import { LinearGradient } from 'expo-linear-gradient';
import NoMessage from '../common/NoMessage';
import throttle from 'lodash.throttle';
import handleViewport, { type InjectedViewportProps } from 'react-in-viewport';


const Block = (props: InjectedViewportProps<HTMLDivElement>) => {
	const { inViewport, forwardedRef } = props;
	const color = inViewport ? '#217ac0' : '#ff9800';
	const text = inViewport ? 'In viewport' : 'Not in viewport';
	return (
	  <div className="viewport-block" ref={forwardedRef}>
		<h3>{ text }</h3>
		<div style={{ height: '1px', background: color }} />
	  </div>
	);
  };
  
  const ViewportBlock = handleViewport(Block, /** options: {}, config: {} **/);




const IntroductionScreen = () => {
	const ShimmerPlaceHolder = createShimmerPlaceHolder(LinearGradient);
	const { posts, loading } = useSelector(postState);
	const { user } = useSelector(authState);
	const { handleFetchAllPosts } = usePost();
	const dispatch = useDispatch();
	const { limit, page } = useSelector(postState);

	const fetchIntroductionPost = async () => {
		try {
			return await handleFetchAllPosts(channelId.introduction);
		} catch (error) {
			if (error instanceof PostError) {
				console.log('🚀 ~ fetchRules ~ error:', error);
			}
		}
	};

	useQuery(['fetch-introductionPosts'], fetchIntroductionPost, {
		enabled: !!user,
	});
	const loadMorePosts = async () => {
		console.log('loadMorePosts');
		const newLimit = limit + 5;
		dispatch(setLimit(newLimit));
		await fetchIntroductionPost();
	};

	return (
		<View style={{ marginBottom: 64, paddingBottom: 12 }} className="bg-white w-[816px] px-8 border-b border-gray-200  min-h-full">
			<ContainerHeader />
			<View className="mb-4 border-b border-gray-200" />
			{loading ? (
				<>
					<ShimmerPlaceHolder
						style={{
							backgroundColor: 'transparent',
							flex: 1,
							borderRadius: 25,
							width: 750,
							maxHeight: 128,
							margin: 8,
							overflow: 'hidden',
						}}
					/>
					<ShimmerPlaceHolder
						style={{
							backgroundColor: 'transparent',
							flex: 1,
							borderRadius: 25,
							width: 750,
							maxHeight: 128,
							margin: 8,
							overflow: 'hidden',
						}}
					/>
				</>
			) : posts.length === 0 ? (
				<View className="flex items-center justify-center h-screen ">
					<NoMessage />
				</View>
			) : (
				<View className="flex-1 space-y-4">
					{
						!loading &&
							posts
								.slice()
								.reverse()
								.map((introductionPost) => <PostItem key={introductionPost.posts.postId} showLike={false} showBookMark={false} showComment={false} post={introductionPost.posts} name={introductionPost.name} />)
						// <FlatList
						// 	data={posts}
						// 	renderItem={({ item }) => <PostItem key={item.posts.postId} showLike={false} showBookMark={false} showComment={false} post={item.posts} name={item.name} />}
						// 	keyExtractor={(item) => item.posts.postId.toString()}
						// 	onEndReached={loadMorePosts}
						// 	onEndReachedThreshold={0.5}

						// />
					}
					    <ViewportBlock onEnterViewport={() => console.log('enter')} onLeaveViewport={() => console.log('leave')} />
				</View>
			)}
		</View>
	);
};

export default IntroductionScreen;