javascript – Easy methods to buffer pictures in react native

Mainly I’ve this practice tinder-like card system which works advantageous other than the picture loading. Mainly what I do is that I’ve solely two playing cards, one on prime which is animated and interactable and one beneath it which is static, rendering the subsequent card. What I do is that when the person 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 middle and replace the cardboard behind. It is like an phantasm but it surely’s damaged because the pictures take too lengthy to load. Which means when the cardboard comes again, I nonetheless see a glimpse of the earlier card earlier than the brand new present card pictures substitute it. So I attempted making a buffer utilizing Picture.prefetch and that did not go very 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 undecided and I do not know easy methods to do it. So my query is, what is the quickest code-efficient method of buffering pictures ?

This is what I attempted up to now for my customized buffer:
I’ve received 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 clean transition between playing cards

  useEffect(() => {
    // This useEffect hook runs at any time when the currentIndex or cardData adjustments
    // Its objective is to preload pictures into the cardBuffer to make sure clean transitions between playing cards

    const preloadCards = async () => {
      const newBuffer = []; // Empty buffer
      for (let i = 0; i < BUFFER_LENGTH ; i++) {
        // Loop by means of 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(() => {})) // Really preload pictures
      );

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

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

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

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

Thanks on your assist.