CODEWITHSUNDEEP
javascriptreactjslayoutreact-nativeflexbox
Anshul Kai
Anshul Kai

Reputation: 4088

React Native - centering flexWrap content

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>

Upvotes: 5

Views: 3584

Answers (1)

Anshul Kai
Anshul Kai

Reputation: 4088

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>

Upvotes: 7

Related Questions