Responsive Design Strategies for Tablet and Mobile

In this lesson, you will learn how to create distinct layout structures for your application that automatically switch based on the device’s screen size and orientation.

The Core Concept: Conditional Layout Branching

While Flexbox is excellent at distributing space within a container, sometimes a layout needs to fundamentally change shape when moving from a narrow mobile screen to a wide tablet screen. For example, a mobile app might display items in a single vertical column, but that same interface might look better as a multi-column grid on a tablet.

In React Native, we achieve this by checking the device’s dimensions—specifically the width and height—and using that data to decide which layout logic to render.

Implementing the Strategy

To handle this, we look at the aspect ratio and physical dimensions of the screen. A common approach is to create a utility that determines if the device is a "tablet" based on a threshold (like a width greater than 600 logical pixels) and then branch our JSX:

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

const ResponsiveContainer = () => {
  const { width } = useWindowDimensions();
  const isTablet = width > 600;

  return (
    <View style={{ flexDirection: isTablet ? 'row' : 'column' }}>
      <View style={{ flex: 1 }}>
        <Text>Sidebar or Image</Text>
      </View>
      <View style={{ flex: 2 }}>
        <Text>Main Content Area</Text>
      </View>
    </View>
  );
};

By checking the width variable, we can toggle the flexDirection of our container. When isTablet is true, the items sit side-by-side; when false, they stack vertically. Because we are using useWindowDimensions, the app will automatically re-render whenever the user rotates their device or splits the screen, ensuring the layout remains responsive to user interaction.

This technique is superior to static styling because it allows you to optimize your information density—providing a compact, single-column experience for phones and a richer, multi-column dashboard for larger tablets.

Key Takeaway: Use conditional rendering logic based on useWindowDimensions to adjust your component structure, effectively swapping layout patterns to match the available screen real estate.