How do you handle screen size, density and safe areas?

React Native numbers in styles are density-independent pixels. The platform scales them by the device pixel ratio, so a 16 unit padding looks physically similar across phones. PixelRatio is only for cases where you need the raw scale, such as aligning to a hairline.

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

export function Screen() {
  const { width, height, fontScale } = useWindowDimensions();
  const insets = useSafeAreaInsets();
  const isTablet = width >= 768;

  return (
    <View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}>
      <Text>{isTablet ? "Tablet layout" : "Phone layout"}</Text>
      <Text>{Math.round(height)} x {Math.round(width)} at scale {fontScale}</Text>
    </View>
  );
}

Rules that prevent layout bugs

• Use flex and percentages for fluid layouts instead of hard-coded screen widths
• Read dimensions inside render or a hook, not once at module scope
• Account for fontScale because users may enlarge system text
• Use safe-area-context rather than guessing notch heights
• Test on a small phone and a tablet, not only a large simulator

On Android, the status bar and navigation bar behaviour depends on the edge-to-edge configuration. On iOS, the home indicator area matters. A screen that ignores insets may put a button under the gesture bar and make it hard to tap.