Responsive & Adaptive Layout

import React, { useMemo } from "react";
import { useWindowDimensions, View, StyleSheet } from "react-native";
 
export const BREAKPOINTS = { phone: 0, tablet: 768, wide: 1024 } as const;
 
export type LayoutClass = keyof typeof BREAKPOINTS;
 
export function useLayoutClass(): LayoutClass {
  const { width } = useWindowDimensions();
  if (width >= BREAKPOINTS.wide) return "wide";
  if (width >= BREAKPOINTS.tablet) return "tablet";
  return "phone";
}
 
export function AdaptiveColumns({ children }: { children: React.ReactNode }) {
  const { width } = useWindowDimensions();
  const layout = useLayoutClass();
  const columns = layout === "phone" ? 1 : layout === "tablet" ? 2 : 3;
  const gap = layout === "phone" ? 12 : 16;
 
  const itemWidth = useMemo(
    () => (width - gap * (columns + 1)) / columns,
    [width, columns, gap]
  );
 
  return (
    <View style={[styles.grid, { gap, padding: gap }]}>
      {React.Children.map(children, (child, index) => (
        <View key={index} style={{ width: itemWidth }}>
          {child}
        </View>
      ))}
    </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 Message = { id: string; subject: string; preview: string };
 
const MESSAGES: Message[] = [
  { id: "1", subject: "Sprint review", preview: "Demo adaptive layout on iPad." },
  { id: "2", subject: "Foldable QA", preview: "Test narrow window after fold." },
  { id: "3", subject: "Breakpoint tokens", preview: "Document 768 in the design system." },
];
 
export default function InboxAdaptiveScreen() {
  const { width, height } = useWindowDimensions();
  const minDim = Math.min(width, height);
  const isTablet = minDim >= TABLET_MIN;
  const isWide = width >= 1024;
  const isLandscape = width > height;
 
  const listWidth = isWide ? 360 : isTablet ? (isLandscape ? 320 : 280) : undefined;
 
  return (
    <SafeAreaView style={styles.safe} edges={["top", "left", "right"]}>
      <View style={[styles.shell, isTablet && styles.shellTablet]}>
        {/* List pane - full width on phone, fixed sidebar on tablet */}
        <View style={[styles.list, isTablet && { width: listWidth }]}>
          <Text style={styles.heading}>Inbox</Text>
          <Text style={styles.meta}>
            {width}×{height} · {isTablet ? "tablet layout" : "phone layout"}
          </Text>
          {MESSAGES.map((msg) => (
            <View key={msg.id} style={styles.row}>
              <Text style={styles.subject}>{msg.subject}</Text>
              <Text style={styles.preview} numberOfLines={1}>
                {msg.preview}
              </Text>
            </View>
          ))}
        </View>
 
        {/* Detail pane - visible only on tablet+; phone navigates via stack */}
        {isTablet ? (
          <ScrollView style={styles.detail} contentContainerStyle={styles.detailInner}>
            <Text style={styles.detailTitle}>Select a message</Text>
            <Text style={styles.detailBody}>
              Master-detail split view. On phone, push this screen from the list via Expo Router.
            </Text>
          </ScrollView>
        ) : null}
      </View>
    </SafeAreaView>
  );
}
 
const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: "#fff" },
  shell: { flex: 1 },
  shellTablet: { flexDirection: "row" },
  list: { flex: 1, borderColor: "#e2e8f0" },
  heading: { fontSize: 28, fontWeight: "700", padding: 16, paddingBottom: 4 },
  meta: { fontSize: 13, color: "#64748b", paddingHorizontal: 16, paddingBottom: 12 },
  row: {
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderColor: "#f1f5f9",
    gap: 2,
  },
  subject: { fontSize: 16, fontWeight: "600", color: "#0f172a" },
  preview: { fontSize: 14, color: "#64748b" },
  detail: { flex: 1, backgroundColor: "#f8fafc" },
  detailInner: { padding: 24 },
  detailTitle: { fontSize: 22, fontWeight: "600" },
  detailBody: { fontSize: 16, lineHeight: 24, color: "#475569", marginTop: 8 },
});

// Width-based (most common)
export const BP = {
  phone: 0,
  tablet: 768,   // iPad portrait, many Android tablets
  desktop: 1024, // iPad landscape, large tablets, foldable inner display
} as const;
 
// Material-inspired alternative
export const MATERIAL = { compact: 0, medium: 600, expanded: 840 } as const;

import { Platform, useWindowDimensions } from "react-native";
 
function useDeviceLayout() {
  const { width, height } = useWindowDimensions();
  const minDim = Math.min(width, height);
  const maxDim = Math.max(width, height);
 
  return {
    width,
    height,
    isLandscape: width > height,
    isTablet: minDim >= 768,
    isWide: width >= 1024,
    isIPad: Platform.OS === "ios" && Platform.isPad,
    // Foldable: inner display may be square - minDim catches "tablet-class"
    isTabletClass: minDim >= 600,
  };
}

// Modal width cap on large screens
const { width } = useWindowDimensions();
const modalWidth = Math.min(width - 48, 560);

const isTablet = width >= 768;
 
return (
  <View style={{ flex: 1, flexDirection: isTablet ? "row" : "column" }}>
    <View style={isTablet ? { width: 320 } : { flex: 1 }}>{/* list */}</View>
    {isTablet && <View style={{ flex: 1 }}>{/* detail */}</View>}
  </View>
);

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

import type { ScaledSize } from "react-native";
 
interface ResponsiveProps {
  phone: React.ReactNode;
  tablet?: React.ReactNode;
  wide?: React.ReactNode;
}
 
function Responsive({ phone, tablet, wide }: ResponsiveProps) {
  const window = useWindowDimensions();
  const bp = getBreakpoint(window);
  if (bp === "wide" && wide) return <>{wide}</>;
  if (bp === "tablet" && tablet) return <>{tablet}</>;
  return <>{phone}</>;
}