reactjsreact-nativereact-native-swiper

Use array of data to render React native swiper


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.


Solution

  • 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>
        )
    }