Flexbox Deep Dive

import { StyleSheet, Text, View } from "react-native";
 
export function ScreenShell() {
  return (
    <View style={styles.screen}>
      <View style={styles.header}>
        <Text style={styles.title}>Inbox</Text>
      </View>
 
      <View style={styles.content}>
        <Text>Scrollable or list content goes here.</Text>
      </View>
 
      <View style={styles.footer}>
        <Text style={styles.footerText}>3 unread</Text>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: "#fff" },
  header: {
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: "#e2e8f0",
  },
  title: { fontSize: 20, fontWeight: "700" },
  content: { flex: 1, padding: 16 }, // grows - pushes footer down
  footer: {
    padding: 16,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: "#e2e8f0",
  },
  footerText: { textAlign: "center", color: "#64748b" },
});

import { ScrollView, StyleSheet, Text, View } from "react-native";
 
interface Task {
  id: string;
  title: string;
  done: boolean;
}
 
const TASKS: Task[] = [
  { id: "1", title: "Review flexbox PR", done: false },
  { id: "2", title: "Ship dark mode tokens", done: true },
  { id: "3", title: "Test foldable layout", done: false },
];
 
export default function TaskBoard() {
  return (
    <View style={styles.screen}>
      {/* Toolbar row */}
      <View style={styles.toolbar}>
        <Text style={styles.heading}>Tasks</Text>
        <View style={styles.badge}>
          <Text style={styles.badgeText}>{TASKS.filter((t) => !t.done).length}</Text>
        </View>
      </View>
 
      {/* Scrollable flex child */}
      <ScrollView contentContainerStyle={styles.list}>
        {TASKS.map((task) => (
          <View key={task.id} style={styles.row}>
            <View style={[styles.dot, task.done && styles.dotDone]} />
            <Text
              style={[styles.rowTitle, task.done && styles.rowTitleDone]}
              numberOfLines={1}
            >
              {task.title}
            </Text>
            <Text style={styles.rowMeta}>{task.done ? "Done" : "Open"}</Text>
          </View>
        ))}
      </ScrollView>
 
      {/* Bottom action bar */}
      <View style={styles.actionBar}>
        <View style={styles.actionPrimary}>
          <Text style={styles.actionPrimaryText}>Add task</Text>
        </View>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: "#f8fafc" },
  toolbar: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: 16,
    paddingVertical: 12,
    gap: 8,
  },
  heading: { fontSize: 28, fontWeight: "700", color: "#0f172a" },
  badge: {
    minWidth: 28,
    height: 28,
    borderRadius: 14,
    backgroundColor: "#2563eb",
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 8,
  },
  badgeText: { color: "#fff", fontWeight: "700", fontSize: 13 },
  list: { padding: 16, gap: 10 },
  row: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    backgroundColor: "#fff",
    borderRadius: 12,
    padding: 14,
  },
  dot: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: "#94a3b8",
    flexShrink: 0,
  },
  dotDone: { backgroundColor: "#22c55e" },
  rowTitle: { flex: 1, fontSize: 16, fontWeight: "600", color: "#0f172a" },
  rowTitleDone: { color: "#94a3b8", textDecorationLine: "line-through" },
  rowMeta: { fontSize: 13, color: "#64748b", flexShrink: 0 },
  actionBar: {
    padding: 16,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: "#cbd5e1",
    backgroundColor: "#fff",
  },
  actionPrimary: {
    backgroundColor: "#2563eb",
    borderRadius: 12,
    paddingVertical: 14,
    alignItems: "center",
  },
  actionPrimaryText: { color: "#fff", fontWeight: "600", fontSize: 16 },
});

// Column (default): justifyContent = vertical, alignItems = horizontal
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
  <Text>Centered</Text>
</View>
 
// Row: justifyContent = horizontal, alignItems = vertical
<View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
  <Icon />
  <Text style={{ flex: 1 }}>Label fills middle space</Text>
  <Chevron />
</View>

<View style={{ flex: 1 }}>
  <Header />
  <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }} />
  <Footer />
</View>

<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
  <BackButton />
  <Title />
  <MenuButton />
</View>

<View style={{ flexDirection: "row" }}>
  {tabs.map((tab) => (
    <Pressable key={tab} style={{ flex: 1, alignItems: "center" }}>
      <Text>{tab}</Text>
    </Pressable>
  ))}
</View>

<View style={{ flex: 1, justifyContent: "flex-end", padding: 16 }}>
  <PrimaryButton />
</View>

<View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
  {tags.map((tag) => (
    <Chip key={tag} label={tag} />
  ))}
</View>

import type { FlexStyle, ViewStyle } from "react-native";
 
type Justify = FlexStyle["justifyContent"]; // "flex-start" | "center" | "space-between" | ...
 
interface RowProps {
  children: React.ReactNode;
  justify?: Justify;
  style?: ViewStyle;
}
 
function Row({ children, justify = "flex-start", style }: RowProps) {
  return (
    <View style={[{ flexDirection: "row", alignItems: "center", justifyContent: justify, gap: 8 }, style]}>
      {children}
    </View>
  );
}