0PricingLogin▼
React Native Academy · Lesson

flex, flexGrow, and Responsive Sizing

Use the flex property to distribute available space proportionally between sibling Views, and build a layout that adjusts to any screen width.

The flex Property Explained

The flex property is a shorthand that sets how a View grows and shrinks to fill available space within its parent. In React Native, flex is similar to CSS's flex-grow — it represents the proportion of available space the component takes. Setting flex: 1 on a single child makes it fill all remaining space. When multiple siblings have flex values, the space is divided proportionally: a child with flex: 2 gets twice as much space as a sibling with flex: 1.

import { View } from 'react-native';

export default function FlexDemo() {
  return (
    <View style={{ flex: 1, flexDirection: 'column' }}>
      {/* Takes 1/3 of height */}
      <View style={{ flex: 1, backgroundColor: '#ff6b6b' }} />
      {/* Takes 2/3 of height */}
      <View style={{ flex: 2, backgroundColor: '#4f86f7' }} />
    </View>
  );
}

flex: 1 on the Root Container

If your root App component or the outermost screen View doesn't have flex: 1, the component collapses to the size of its content — it does not fill the screen. This is one of the most common React Native bugs for beginners: the app appears to have no layout because the root View has zero height. Always set flex: 1 on the root-level View and any intermediate containers that should fill available space. Child Views without a fixed size or flex property will shrink to wrap their content.

import { View, Text, StyleSheet } from 'react-native';

// WRONG: root View has no flex, collapses to text height
function WrongLayout() {
  return (
    <View style={{ backgroundColor: '#f5f5f5' }}>
      <Text>This View only wraps its content.</Text>
    </View>
  );
}

// CORRECT: flex: 1 fills the screen
function CorrectLayout() {
  return (
    <View style={{ flex: 1, backgroundColor: '#f5f5f5' }}>
      <Text>This View fills the entire screen.</Text>
    </View>
  );
}

All lessons in this course

  1. StyleSheet.create and Inline Styles
  2. Flexbox Direction, JustifyContent, AlignItems
  3. flex, flexGrow, and Responsive Sizing
  4. Building a Responsive Card Grid
← Back to React Native Academy