0

I am new to react native and I am trying to implement this view :

The view I try to implement

The first difficulty I encounter is to show the little green circles side by side.

The second comes from the fact that the number of little green circles is not constant... This number comes from my API. I would like to show from 2 to 6 little green circles depending on the number sent by my API (note that I know how to retrieve this information from my API, my problem is how to implement the View).

Thank you very much for you help...

Santo R
  • 49
  • 3
  • well, show us the code so. – William Brochensque junior Apr 20 '20 at 18:11
  • {greenCirclesArray.map( unneededItem => } is one solution. Could also use a FlatList, have a function instead of the map that uses a for loop to push all the components into an array and then just have that array between the {}, etc. What have you tried and what isn't working? – HBSKan Apr 20 '20 at 18:19
  • Hi @HBSKan Thanks so much for your help. I realize now that it was not so difficult... But you know was it is to start in a new language... Sometimes we look too far and we forget the basics! I warmly thank you for your rapid and accurate answer. – Santo R Apr 20 '20 at 18:47
  • No worries. Good luck! – HBSKan Apr 20 '20 at 19:56

1 Answers1

0

As suggested by @HBSKan, the answer is:

<View style={{flexDirection: "row"}}>{this.state.InfoFromApi.logo_tab.map( elem => 
  <Image key={elem.type} style = {styles.logo} source={require('../assets/green_circles.png')} />
)}</View>

Thanks to him!

Santo R
  • 49
  • 3