What is flex dimension and how is it different from fixed dimension?

• The flex property styles the component to expand and shrink it dynamically according to available space unlike fixed dimension where a specific height, width is specified.
• Setting flex: 1 will fill all the available space to the component, and shared evenly among the other components of same as the parent.
• Higher the flex value, occupy component higher ratio of space compared to its siblings.

Example:

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

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}