react native flex

flex: 1, which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.

import React, { Component } from 'react';
import { View } from 'react-native';

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

column, column-reverse

row, row-reverse

export default class FlexDirectionBasics extends Component {

  render() {

    return (

      // Try setting `flexDirection` to `column`, 'row', '-reverse'.

      <View style={{ flex: 1, flexDirection: 'row-reverse', marginTop: 25 }}>

        <View style={{ width: 100, height: 100, backgroundColor: 'red', borderRadius: 50 }} />

        <View style={{ width: 100, height: 100, backgroundColor: 'yellow', borderRadius: 50 }} />

        <View style={{ width: 100, height: 100, backgroundColor: 'green', borderRadius: 50 }} />

      </View>

    );

  }

};