Dimensions & Responsive Layout

import { useMemo } from "react";
import { useWindowDimensions, View, Text, StyleSheet } from "react-native";
 
const BREAKPOINTS = { phone: 0, tablet: 768, desktop: 1024 } as const;
 
function useBreakpoint() {
  const { width } = useWindowDimensions();
  if (width >= BREAKPOINTS.desktop) return "desktop" as const;
  if (width >= BREAKPOINTS.tablet) return "tablet" as const;
  return "phone" as const;
}
 
export function ResponsiveGrid({ children }: { children: React.ReactNode }) {
  const { width } = useWindowDimensions();
  const bp = useBreakpoint();
 
  const columns = bp === "phone" ? 1 : bp === "tablet" ? 2 : 3;
  const gap = width < BREAKPOINTS.tablet ? 12 : 16;
 
  const itemWidth = useMemo(
    () => (width - gap * (columns + 1)) / columns,
    [width, columns, gap]
  );
 
  return (
    <View style={[styles.grid, { gap, padding: gap }]}>
      {Array.isArray(children)
        ? children.map((child, i) => (
            <View key={i} style={{ width: itemWidth }}>
              {child}
            </View>
          ))
        : children}
    </View>
  );
}
 
const styles = StyleSheet.create({
  grid: { flexDirection: "row", flexWrap: "wrap" },
});

import { ScrollView, StyleSheet, Text, View, useWindowDimensions } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
 
const TABLET_MIN = 768;
 
type Item = { id: string; title: string; body: string };
 
const ITEMS: Item[] = [
  { id: "1", title: "Inbox", body: "3 new messages" },
  { id: "2", title: "Drafts", body: "1 unsent draft" },
  { id: "3", title: "Archive", body: "128 archived" },
];
 
export default function MailScreen() {
  const { width, height } = useWindowDimensions();
  const isTablet = width >= TABLET_MIN;
  const isLandscape = width > height;
 
  return (
    <SafeAreaView style={styles.safe} edges={["top", "left", "right"]}>
      <View style={[styles.shell, isTablet && styles.shellTablet]}>
        {/* Sidebar / list */}
        <View
          style={[
            styles.listPane,
            isTablet ? { width: isLandscape ? 320 : 280 } : styles.listPanePhone,
          ]}
        >
          <Text style={styles.heading}>Mail</Text>
          {ITEMS.map((item) => (
            <View key={item.id} style={styles.listRow}>
              <Text style={styles.rowTitle}>{item.title}</Text>
              <Text style={styles.rowBody} numberOfLines={1}>
                {item.body}
              </Text>
            </View>
          ))}
        </View>
 
        {/* Detail - side-by-side on tablet, hidden on phone (navigate separately in real app) */}
        {isTablet && (
          <ScrollView style={styles.detailPane} contentContainerStyle={styles.detailContent}>
            <Text style={styles.detailTitle}>Select a message</Text>
            <Text style={styles.detailBody}>
              On tablet ({width}×{height}), list and detail share the screen.
            </Text>
          </ScrollView>
        )}
      </View>
    </SafeAreaView>
  );
}
 
const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: "#fff" },
  shell: { flex: 1 },
  shellTablet: { flexDirection: "row" },
  listPane: { borderRightWidth: StyleSheet.hairlineWidth, borderColor: "#ddd" },
  listPanePhone: { flex: 1 },
  heading: { fontSize: 28, fontWeight: "700", padding: 16 },
  listRow: { paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: StyleSheet.hairlineWidth, borderColor: "#eee" },
  rowTitle: { fontSize: 16, fontWeight: "600" },
  rowBody: { fontSize: 14, color: "#666", marginTop: 2 },
  detailPane: { flex: 1 },
  detailContent: { padding: 24 },
  detailTitle: { fontSize: 22, fontWeight: "600" },
  detailBody: { fontSize: 16, color: "#444", marginTop: 8, lineHeight: 24 },
});

import { Dimensions, useWindowDimensions, PixelRatio } from "react-native";
 
// Snapshot - will NOT update on rotation
const { width: staticWidth } = Dimensions.get("window");
 
// Reactive - updates on rotation
function Layout() {
  const { width, height, scale, fontScale } = useWindowDimensions();
  const physicalWidth = width * PixelRatio.get();
  // ...
}

// Width-based (most common)
const isTablet = width >= 768;
 
// Orientation
const isLandscape = width > height;
 
// Minimum dimension (useful for foldables - tablet-ish when either axis is large)
const minDim = Math.min(width, height);
const isTabletClass = minDim >= 600;
 
// Platform + width (iPad always reports large width; Android tablets vary)
import { Platform } from "react-native";
const isIPad = Platform.OS === "ios" && Platform.isPad;

import { useSafeAreaInsets } from "react-native-safe-area-context";
 
function Header() {
  const insets = useSafeAreaInsets();
  return <View style={{ paddingTop: insets.top, paddingHorizontal: 16 }} />;
}

import { useWindowDimensions, ScaledSize } from "react-native";
 
type Breakpoint = "phone" | "tablet" | "desktop";
 
function getBreakpoint(window: ScaledSize): Breakpoint {
  if (window.width >= 1024) return "desktop";
  if (window.width >= 768) return "tablet";
  return "phone";
}
 
function useResponsiveValue<T>(values: Record<Breakpoint, T>): T {
  const window = useWindowDimensions();
  return values[getBreakpoint(window)];
}
 
// Usage
const padding = useResponsiveValue({ phone: 16, tablet: 24, desktop: 32 });