CODEWITHSUNDEEP
javascriptiosreactjsreact-native
patty2904
patty2904

Reputation: 27

My loop of image elements is not working as I want it to in React Native

I have an object in another file with certain attributes, such as name, year, uri etc... (I did import and export it btw)

I wanted to make a function that would loop all of these objects, which would display an image of a pink circle and the uri of each object (uri stores the image), for the amount of objects that exist - I will attach what I want it to look like below.

Here is the function:

const populateSeries = () => {
for (let i in seriesList) {
        <ImageBackground style={externalStyle.circle} source={require('../assets/circle.png')}>
        <Image style={externalStyle.image} source={seriesList[i].uri}/>
        </ImageBackground>
      } 
   }

I'm calling it below like so:

<ScrollView>
       <View>
         {populateSeries()}
       </View> 
</ScrollView>

It's not displaying anything. I'm not sure how to put a loop in the display bit of my code. Could someone help? I'm positive the uri bit works fine because I tested it inside <View> and it worked fine.

enter image description here

Upvotes: 0

Views: 180

Answers (3)

docmurloc
docmurloc

Reputation: 1239

Your populateSeries does not return anything so your view does not show anthing.

Try to use a flatList if you want to render component by looping inside an array.

<ScrollView>
       <View>
         <FlatList
          data={seriesList}
          renderItem={({ item }) => (
            <ImageBackground style={externalStyle.circle} source=               {require('../assets/circle.png')}>
            <Image style={externalStyle.image} source={item.uri}/>
            </ImageBackground>
          )}
          keyExtractor={item => item.id}
        />
       </View> 
</ScrollView>

Upvotes: 1

Muhammad Yousuf Noor
Muhammad Yousuf Noor

Reputation: 197

Create an array and push your items in it, this should work ! :

//Top of your component
const populateSeries = [];
for (let i in seriesList) {
   populateSeries.push(<ImageBackground style={externalStyle.circle} source= 
   {require('../assets/circle.png')}>
    <Image style={externalStyle.image} source={seriesList[i].uri}/>
    </ImageBackground>);
  }

 //on return
<ScrollView>
   <View>
     {populateSeries}
   </View> 
</ScrollView>

Upvotes: 1

Nguyễn Khương
Nguyễn Khương

Reputation: 371

Your function should return components but I dont see it return anything. Try this:

<ScrollView>
       <View>
         {
            seriesList.map((seri) => {
               return (
                  <ImageBackground style={externalStyle.circle} source={require('../assets/circle.png')}>
                    <Image style={externalStyle.image} source={seri.uri}/>
                  </ImageBackground>
               )
            })
         }
       </View> 
</ScrollView>

Upvotes: 1

Related Questions