Get current index/visible item of FlatList – React native

If you provide a viewabilityConfig to the FlatList, you can use the onViewableItemsChanged event to learn which items are on screen. You just have to make sure that both the viewabilityConfig and onViewableItemsChanged values never change:

import { useState, useEffect, useRef, useCallback } from 'react';
import { Text, View, StyleSheet, FlatList, Image } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const API_URL = 'https://random-data-api.com/api/v2/users?size=25';
export default function App() {
  const [posts, setPosts] = useState([]);
  const [visibleItems, setVisibleItems] = useState([]);
  // wrapped in ref so that re-renders doesnt recreate it
  const viewabilityConfig = useRef({
    minimumViewTime: 100,
    itemVisiblePercentThreshold: '90%',
  }).current;
  // wrapped in useCallback so that re-renders doesnt recreate it
  const onViewableItemsChanged = useCallback(({ viewableItems }) => {
    setVisibleItems(viewableItems.map(({ item }) => item));
  }, []);
  useEffect(() => {
    fetch(API_URL)
      .then((data) => data.json())
      .then(setPosts);
  }, []);

  return (
    <View style={styles.container}>
      {visibleItems.length > 0 && (
        <Text>
          Currently visible:{' '}
          {visibleItems
            .map((item) => item.first_name + ' ' + item.last_name)
            .join(', ')}
        </Text>
      )}
      <View style={styles.flatlistContainer}>
        <FlatList
          data={posts}
          renderItem={(props) => <Item {...props} />}
          viewabilityConfig={viewabilityConfig}
          onViewableItemsChanged={onViewableItemsChanged}
        />
      </View>
    </View>
  );
}

const Item = ({ item }) => {
  return (
    <View style={styles.itemContainer}>
      <Text>
        {item.first_name} {item.last_name}
      </Text>
      <Image
        source={{ uri: item.avatar }}
        style={{ width: 100, height: 100 }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  flatlistContainer: {
    width: '100%',
    height: 500,
    backgroundColor: 'lightblue',
  },
  itemContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
  },
});

Demo

I’ve gone through and created a supabase app that resembles your use case and the onViewableItemsChanged approach should work:

import { useContext, useEffect, useState, useRef, useCallback } from 'react';
import {
  View,
  StyleSheet,
  Dimensions,
  FlatList,
  ActivityIndicator,
} from 'react-native';
import { Text } from 'react-native-paper';

import { SessionContext } from '../../Context';
import { supabase } from '../../initSupabase';
import PostItem from '../../components/PostItem';
const { height } = Dimensions.get('screen');

const totalPostsToGet = 2;

type Post = {
  post: {
    text: string;
    media: {
      type: string;
      source: string;
    };
  };
  id: number;
  created_at: string;
  uid: string;
};

export default function PostScreen(props) {
  const { session } = useContext(SessionContext);
  const [posts, setPosts] = useState<Post[]>([]);
  const [page, setPage] = useState(1);
  const [isLoading, setIsLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [visibleItems, setVisibleItems] = useState([]);
  const viewabilityConfig = useRef({
    // minimumViewTime: 100,
    itemVisiblePercentThreshold: 50,
  }).current;
  // wrapped in useCallback so that re-renders doesnt recreate it
  const onViewableItemsChanged = useCallback(({ viewableItems }) => {
    setVisibleItems(viewableItems.map(({ item }) => item));
  }, []);
  const handleLoadMore = () => {
    if (!isLoading && hasMore) {
      setPage((prevPage) => prevPage + 1);
    }
  };

  useEffect(() => {
    if (!session) return;
    const fetchLastPost = async () => {
      const { data, error } = await supabase
        .from('posts')
        .select('*')
        .order('created_at')
        .range(0, 1);
      return data[0];
    };
    const fetchPosts = async () => {
      setIsLoading(true);
      const lastPost = await fetchLastPost();
      console.log('last post', lastPost);
      const rangeStart = (page - 1) * totalPostsToGet;
      const { data, error } = await supabase
        .from('posts')
        .select('*')
        .order('created_at', { ascending: false })
        .range(rangeStart, rangeStart + totalPostsToGet - 1);
      if (error) {
        console.log('error retrieving profile data', error);
      }
      if (data) {
        setPosts((prev) => prev.concat(data));
        // I couldnt figure out how PAGE_SIZE could be used to know that the last post was reached
        // so I just grab the  last post and look to see if its id is in current data
        const hasLastPost = Boolean(
          data.find((post) => post.id == lastPost.id)
        );
        setHasMore(!hasLastPost);
      }
      setIsLoading(false);
    };
    fetchPosts();
    // subscribe to database changes
    const subscription = supabase
      .channel(`Posts`)
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'posts',
          // filter: `id=eq.${session.user.id}`,
        },
        (payload) => {
          setIsLoading(true);
          console.log('Post update');
          setPosts((prev) => {
            // either push new post or update existing one
            const postIndex = prev.findIndex(
              (post) => post.id == payload.new.id
            );
            if (postIndex < 0) return [...prev, payload.new];
            else {
              const newPosts = [...prev];
              newPosts[postIndex] = payload.new;
              return newPosts;
            }
          });
          setIsLoading(false);
        }
      )
      .subscribe();
    return () => {
      supabase.removeChannel(subscription);
    };
  }, [session, page]);
  return (
    <View style={styles.container}>
      <Text>Currently visible:</Text>
      <View style={{ padding: 5, margin: 5 }}>
        {visibleItems.map((item) => (
          <Text>{item.post.text.substring(0, 30)}</Text>
        ))}
      </View>

      <View style={styles.flatlistContainer}>
        {isLoading && <ActivityIndicator />}
        <FlatList
          data={posts}
          keyExtractor={(item: Post) => item.id}
          horizontal={false}
          directionalLockEnabled
          onEndReached={handleLoadMore}
          renderItem={(props) => <PostItem {...props} />}
          viewabilityConfig={viewabilityConfig}
          onViewableItemsChanged={onViewableItemsChanged}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  flatlistContainer: {
    height: height * 0.45,
  },
});

Demo