Why does React Native not offer a justify-self

I don't know React Native, but I do know flexbox!

Use the following code as a guide:

<div style="display: flex;">

  <div>
    I'll be on the left side
  </div>
  <div>
    I'll be hugging the guy on the left side
  </div>
  <div>
    I'll be hugging the guy hugging the guy on the left side
  </div>
  <div style="margin-left: auto;">
    I'll be hugging the right side far away from those other guys
  </div>

</div>

The margin set on the last child will push all other children to the left as far as their styles will allow, and push itself as far right as any other styles will allow.

You can test this out by also adding margin-right: auto; to the last child, and you will see the last child centered perfectly in the remaining space of the parent div, after the first three children take up their allotted space. This is because the competing "margin autos" will both share equally whatever space remains, since they can't cancel each other out and won't override each other.

Flex box was designed to handle margin spacing like this, so take advantage of it, as well as the other unique spacing options available under the justify-content property.

Helpful article: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6


I believe you want to achieve something like this: enter image description here

You can implement this by nesting views which share the same justifyContent property.

  <View style={{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
  }}>
    <View>
      <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
      <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
    </View>
    <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
  </View>