How can I be notified when a rendered item is displayed

[vricosti]

Hi,
I am using react-native-reanimated-carousel to display some pictures of remote controller with a code like that:

const baseOptions = {
    vertical: false,
    width: windowWidth,
  } as const;

  return (
    <SafeAreaView edges={["bottom"]} style={{ flex: 1 }}>
      <Carousel
        {...baseOptions}
        loop
        enabled
        ref={ref}
        defaultScrollOffsetValue={scrollOffsetValue}
        testID={"xxx"}
        style={{ width: "100%" }}
        autoPlay={false}
        data={data}
        // onScrollBegin={() => { console.log('===1') }}
        // onScrollEnd={() => { console.log('===2') }}
        onConfigurePanGesture={g => g.enabled(false)}
        pagingEnabled={true}
        onSnapToItem={index => console.log("current index:", index)}
        renderItem={({ index }) => (
          <RemoteCtlCarouselItem 
            key={index} 
            index={index} 
            fullWidth={fullWidth}
            showButtons={showButtons}
            visualDebug={visualDebug}
          />
        )}
      />
    </SafeAreaView>
  );

and inside each RemoteCtlCarouselItem (that display a picture of a remote controller) I am instantiating a class to manage the androidtv remote like this::

  // Initialize RemotePairingManager for adtv2 remotes
  useEffect(() => {
    if (remoteData && 'adtv2' in remoteData.appData.type) {
      console.log('Initializing RemotePairingManager for adtv2 remote:', remoteData.appData.uniqueName);
      remotePairingManagerRef.current = new RemotePairingManager();

The problem is all the rendered item are mounted and all the classes are instantiated but what I would like is to instantiate the class only when the rendered item is displayed the first time.
How can I know when an item is displayed ?

[vricosti]

Finally I used handleSnapToItem with a isVisible prop:

 const [viewedItems, setViewedItems] = useState<Set<number>>(new Set());
 
const handleSnapToItem = (index: number) => {
    console.log("current index:", index);
    if (!viewedItems.has(index)) {
      console.log(`First time viewing item at index: ${index}`);
      setViewedItems(prev => new Set(prev).add(index)); // Mark as viewed
    }
  }; 
  
  ...
  <RemoteCtlCarouselItem 
            key={index} 
            index={index} 
            fullWidth={fullWidth}
            showButtons={showButtons}
            visualDebug={visualDebug}
            isVisible={viewedItems.has(index)} // Pass visibility prop
          />
 ...