Responsive Layouts and Safe Areas

Dimensions, flex and safe areas

Phones and tablets vary in size and orientation, so prefer flex and percentages over fixed sizes. When you need numbers, the useWindowDimensions hook returns the current width, height and fontScale, and re-renders on rotation or window resizes. Screens also have areas you should not draw content under: notches, status bars, rounded corners and the home indicator. The react-native-safe-area-context library provides SafeAreaProvider, a SafeAreaView and the useSafeAreaInsets hook, which returns top, bottom, left and right insets; navigation libraries already use it for their headers and tab bars. Respect the user's font scale rather than hard-coding text that cannot grow.

A two-column grid on wide screens

useWindowDimensions plus safe-area insets.

import { View, Text, useWindowDimensions } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export function Dashboard() {
  const { width } = useWindowDimensions();
  const insets = useSafeAreaInsets();
  const columns = width >= 768 ? 2 : 1;   // tablets and landscape get two columns

  return (
    <View style={{ flex: 1, paddingTop: insets.top, paddingBottom: insets.bottom }}>
      <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
        {["Sales", "Orders", "Users", "Errors"].map((label) => (
          <View key={label} style={{ width: `${100 / columns}%`, padding: 8 }}>
            <Text>{label}</Text>
          </View>
        ))}
      </View>
    </View>
  );
}

// at the app root (Expo Router and React Navigation set this up for you):
// <SafeAreaProvider><App /></SafeAreaProvider>

Test on small and large devices

Check a small phone, a large phone, a tablet and landscape, and try the largest accessibility font size. Layout bugs often only appear at the extremes.

त्वरित जाँच: What does useSafeAreaInsets return?

• The device pixel ratio
• The distances to keep clear at each screen edge, such as notches and the home indicator
• The keyboard height only
• A list of all open screens