react-nativeiconsreact-native-flatlistreact-native-listviewreact-native-flexbox

React Native : Aligning images side by side on one line with a dynamic number of images

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...

Solution

  • 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!