javascript – The best way to buffer pictures in react native

Mainly I’ve this practice tinder-like card system which works fantastic other than the picture loading. Mainly what I do is that I’ve solely two playing cards, one on high which is animated and interactable and one underneath it which is static, rendering the subsequent card. What I do is that when the consumer swipes the highest card, I ship it far off the display screen, change its information to the next card and set its place again to heart and replace the cardboard behind. It is like an phantasm however it’s damaged because the pictures take too lengthy to load. Because of this when the cardboard comes again, I nonetheless see a glimpse of the earlier card earlier than the brand new present card pictures change it. So I attempted making a buffer utilizing Picture.prefetch and that did not go rather well because the buffer logic was slower than my earlier buffer-less system. So now I do not know if I ought to strive once more with a customized buffer or use a devoted module. Apparently react-native-fast-image and expo-image can do that however I am unsure and I do not know tips on how to do it. So my query is, what is the quickest code-efficient method of buffering pictures ?

Here is what I attempted thus far for my customized buffer:
I’ve obtained 2 states variables, currentIndex and cardData that outline the present card.

const [cardBuffer, setCardBuffer] = useState([]); // The array of buffered playing cards to make sure a easy transition between playing cards

  useEffect(() => {
    // This useEffect hook runs each time the currentIndex or cardData adjustments
    // Its function is to preload pictures into the cardBuffer to make sure easy transitions between playing cards

    const preloadCards = async () => {
      const newBuffer = []; // Empty buffer
      for (let i = 0; i < BUFFER_LENGTH ; i++) {
        // Loop by the subsequent BUFFER_LENGTH variety of playing cards, ranging from the currentIndex
        const dataIndex = (currentIndex + i) % cardData.size;
        newBuffer.push(cardData[dataIndex]); // Add the cardboard information on the calculated index to the newBuffer array
      }

      await Promise.all(
        newBuffer.map((card) => Picture.prefetch(card.picture).catch(() => {})) // Truly preload pictures
      );

      setCardBuffer(newBuffer); // Replace the buffer with the newly preloaded playing cards
    };

    preloadCards(); // Name the operate
  }, [currentIndex, cardData]);

return (
    
      
        
        
          
          {cardBuffer[0]?.title}
          
            {cardBuffer[0]?.description}
          
        
      

      {cardBuffer.size > 1 && ( 
        
          
          
            
            {cardBuffer[1]?.title}
            
              {cardBuffer[1]?.description}
            
          
        
      )}
    
  );

Thanks in your assist.