# Responsive Layouts and Safe Areas — React Native

Source: https://www.skillbyai.com/en/react-native/s-responsive

> Different sizes, notches and home indicators.

## 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.

```tsx
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.

**Quiz:** What does useSafeAreaInsets return?

- [ ] The device pixel ratio
- [x] 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

*Answer:* The distances to keep clear at each screen edge, such as notches and the home indicator. Insets keep content out of unsafe areas.