I have a View which needs to render items in a list. The items need to be rendered in a row and then wrap around. I am able to achieve this behavior by using flexDirection and flexWrap as below. The problem is that the wrapped rows all appear left justified thus leaving an undetermined space towards the right. This makes some sense but I'm wondering if there is a way to center the content in each row that flexWrap creates?

<View style={{alignItems: 'center', justifyContent: 'center'}}>
  <View style={{alignItems: 'center', justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap'}}>
    <Item value={1} />
    <Item value={2} />
    <Item value={3} />
  </View>
</View>

I have a View which needs to render items in a list. The items need to be rendered in a row and then wrap around. I am able to achieve this behavior by using flexDirection and flexWrap as below. The problem is that the wrapped rows all appear left justified thus leaving an undetermined space towards the right. This makes some sense but I'm wondering if there is a way to center the content in each row that flexWrap creates?

<View style={{alignItems: 'center', justifyContent: 'center'}}>
  <View style={{alignItems: 'center', justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap'}}>
    <Item value={1} />
    <Item value={2} />
    <Item value={3} />
  </View>
</View>

• javascript
• reactjs
• layout
• react-native
• flexbox

• you can play around with flex here and find the right bination of values to achieve what you want the-echoplex/flexyboxes – diedu Commented Dec 2, 2016 at 0:18
• Have you tried adding justifyContent: 'center'? That would be the property to use for horizontal alignment in flexDirection: 'row'. – Michael Benjamin Commented Dec 2, 2016 at 0:46
• Thanks for sharing the link on flexyboxes. A very handy tool. I was able to get it working on flexyboxes by setting justifyContent and alignContent to center but still have no luck in my project. FWIW, React Native doesn't support alignContent and adding justifyContent to my View seems to have no effect. – Anshul Kai Commented Dec 3, 2016 at 15:15

1 Answer 1

The external alignItems somehow gets in the way. I'm not sure about the inner workings and why this works but the code below now works as expected.

<View style={{justifyContent: 'center'}}>
  <View style={{alignItems: 'center', justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap'}}>
    <Item value={1} />
    <Item value={2} />
    <Item value={3} />
  </View>
</View>