Viewport-Relative Units

In this lesson, you will learn how to create fluid layouts by using percentage-based sizing to ensure your components scale dynamically relative to their parent container.

Why use Percentages?

In previous lessons, we discussed flex for distributing space. However, sometimes you need a component to occupy a specific, fixed proportion of the screen regardless of how many other elements are present. This is where percentage-based dimensions come in. By assigning a string value (like "50%") to a component's width or height, you instruct React Native to calculate its size based on the dimensions of its immediate parent.

Implementation

When you define a dimension as a percentage, React Native automatically resolves it against the parent's size. This is perfect for building components that need to maintain a relative relationship, such as a sidebar or a featured card.

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

const FluidComponent = () => {
  return (
    <View style={styles.container}>
      {/* This box will always be 50% of the screen width */}
      <View style={styles.box} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
  },
  box: {
    width: '50%',
    height: '25%',
    backgroundColor: 'skyblue',
  },
});

The Fluid Advantage

Unlike hard-coded pixel values which can look tiny on a high-resolution tablet or oversized on a small phone, percentage-based units are inherently responsive. If the parent container resizes due to an orientation change or a split-screen multitasking event, the child component recalculates its size instantly.

Note that for percentages to work correctly, the parent container must have a defined size (either a fixed value or a percentage itself). If the parent has an undefined height, its children cannot successfully calculate their height based on that parent. Using these relative units helps you build interfaces that feel "liquid," flowing naturally into whatever space is available without requiring you to manually check the device's exact pixel count.

Key Takeaway: Use percentage strings like "50%" for width and height to create responsive components that automatically scale in proportion to their parent container.