Use array of data to render React native swiper

Question

I am using react-native-swiper library. I wanted to load images inside the swiper based on array. I tried following code.

  const Pages = () => {
    jsonMovies.map(movies => {
      console.log("test--" + movies.img);
      return (
        < View key={movies.uid} style={styles.slide1} >
          <Image
            style={styles.image}
            source={{ uri: movies.img }}
          />
        </View>
      )

    })
  }

 return (

    <Swiper 
    >    
      <Pages />

    </Swiper >


  )

I tried above code but I get the error Even though I return something in pages function.

Error: Pages(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

If i use the code like below , my slider images are shown.

<Swiper>

{

  jsonMovies.map(movies => {
    console.log("test--" + movies.img);
    return (
      < View key={movies.uid} style={styles.slide1} >
        <Image
          style={styles.image}
          source={{ uri: movies.img }}
        />
      </View>
    )

  })

}

</Swiper >

But problem is paginations are not working , can some one tell the proper way to use the arrays inside swiper , thank you.

Answer 1

Try this :

const Pages = () => {
    return (
        <div>
            {jsonMovies.map(movies => {
                console.log("test--" + movies.img);
                return (
                    <View key={movies.uid} style={styles.slide1}>
                        <Image
                            style={styles.image}
                            source={{ uri: movies.img }}
                        />
                    </View>
                )
            })}
        </div>
    )
}