0

I have an image container that wraps dynamic number of circular image components as shown below:

<View style={styles.imageContainer}>
  {imageList.map(item=> <Image .../>)}
</View>

enter image description here

container has the following style:

imageContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexWrap: 'wrap',
    width: '100%',
    borderWidth: 1,
    paddingVertical: 20,
  },

As you can see, since justifyContent is flex-start, it leaves more space on the right than on the left side of the container. I tried doing justifyContent: 'center', but it leaves with the following:

enter image description here

now the left and right spaces are equal, but problem is that the images on the second row are centered, which is not what I want. I want them to align to left just like the first screen shot (but left/right space of the container being equal).

How would I solve the problem?

Thanks!

Eric Ahn
  • 391
  • 2
  • 7
  • 18
  • Does this answer your question? [How to align child views to left with even space in React-Native?](https://stackoverflow.com/questions/55036364/how-to-align-child-views-to-left-with-even-space-in-react-native) – Guruparan Giritharan Sep 21 '20 at 11:59
  • Thanks for answer ! I will have a look – Eric Ahn Sep 21 '20 at 12:40

0 Answers0