How to only render something once at a specific index of an Array. React native

Question

So essentially, my problem stems from trying to solve this issue.

function SwiperComponent () {

  const [item, setItems] = useState([["hi",console.log("hi")], ["hello",console.log("hello")], ["never",console.log("never")], ["sorry",console.log("sorry")]])
  const swiperItems = item.map(ite => {
    return(
        <View style={styles.slide1} >
          <Text style={styles.text}>{ite[0] + ite[1]}</Text>
        </View>
    )
  })
    return (
        <Swiper
            key={item.length}
            style={styles.slide1}
        >
          {swiperItems}
        </Swiper>
    )

}

So my code is fairly simple, I am using the React-Native-Swiper library, to essentially make the views in the array swipable.

Now the problem is, when I run the code, it generates all the views in the array at the same time, I know this because i can see in the console, the print statements all being printed upon starting. The issue that arises with this, is what if I have a long array of lets say pictures, I dont want to retrieve all those images at once, since it will tank the performance, but also obviously there is a huge chance the user doesnt go through all the images, in which case, I will make calls to my server to retrieve the images unnecessarily (I am using firebase, so I am trying to limit this for cost issues).

So how can I render these images only when I get closer to them, after I start swiping?

Answer 1

You should be able to use the loadMinimal setting in the react-native-swiper.

Here, you need to specify that loadMinimal is true and the number of slides you need to load before and after the current slide by setting loadMinimalSize.

<Swiper
  key={item.length}
  style={styles.slide1}
  loadMinimal={true} // only loads the current page + [loadMinimalSize] amount of pages before and after
  loadMinimalSize={0}
  loadMinimalLoader={() => (
    <View>
      <Text>Loading</Text>
    </View>
  )} // optional loader to show while page loads
>
  {swiperItems}
</Swiper>

Alternatively, you can use the lazy load image library that would only load images when you scroll within a threshold. https://github.com/Aljullu/react-lazy-load-image-component.