Folder Structure for Features

src/
├── components/
│   └── ui/                  # shared primitives (Button, Screen, TextField)
├── lib/                     # api client, storage, analytics helpers
├── features/
│   └── orders/
│       ├── index.ts         # public exports only
│       ├── screens/
│       │   └── OrdersScreen.tsx
│       ├── components/
│       │   └── OrderRow.tsx
│       ├── hooks/
│       │   └── useOrders.ts
│       └── types.ts
└── types/                   # truly global types (User, Session)
 
app/
└── (tabs)/
    └── orders/
        └── index.tsx        # export { OrdersScreen as default } from "@/features/orders"

// src/features/orders/index.ts
export { OrdersScreen } from "./screens/OrdersScreen";
export type { Order } from "./types";

// app/(tabs)/orders/index.tsx - route stays one line when possible
export { OrdersScreen as default } from "@/features/orders";

// src/features/orders/types.ts
export type OrderStatus = "pending" | "shipped" | "delivered";
 
export type Order = {
  id: string;
  title: string;
  totalCents: number;
  status: OrderStatus;
};

// src/features/orders/hooks/useOrders.ts
import { useCallback, useEffect, useState } from "react";
import type { Order } from "../types";
 
export function useOrders() {
  const [orders, setOrders] = useState<Order[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
 
  const refresh = useCallback(async () => {
    try {
      setError(null);
      const response = await fetch("https://jsonplaceholder.typicode.com/todos?_limit=6");
      if (!response.ok) throw new Error("Failed to load orders");
      const data = (await response.json()) as Array<{ id: number; title: string; completed: boolean }>;
      setOrders(
        data.map((row) => ({
          id: String(row.id),
          title: row.title,
          totalCents: 1999,
          status: row.completed ? "delivered" : "pending",
        }))
      );
    } catch (e) {
      setError(e instanceof Error ? e.message : "Unknown error");
    } finally {
      setLoading(false);
    }
  }, []);
 
  useEffect(() => {
    refresh();
  }, [refresh]);
 
  return { orders, loading, error, refresh };
}

// src/features/orders/components/OrderRow.tsx
import { Pressable, StyleSheet, Text, View } from "react-native";
import type { Order } from "../types";
 
type Props = {
  order: Order;
  onPress: (id: string) => void;
};
 
export function OrderRow({ order, onPress }: Props) {
  return (
    <Pressable style={styles.row} onPress={() => onPress(order.id)} accessibilityRole="button">
      <View style={styles.textBlock}>
        <Text style={styles.title} numberOfLines={1}>
          {order.title}
        </Text>
        <Text style={styles.meta}>
          ${(order.totalCents / 100).toFixed(2)} · {order.status}
        </Text>
      </View>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  row: { paddingVertical: 12, paddingHorizontal: 16 },
  textBlock: { gap: 4 },
  title: { fontSize: 16, fontWeight: "600", color: "#0f172a" },
  meta: { fontSize: 13, color: "#64748b" },
});

// src/features/orders/screens/OrdersScreen.tsx
import { ActivityIndicator, FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
import { OrderRow } from "../components/OrderRow";
import { useOrders } from "../hooks/useOrders";
 
export function OrdersScreen() {
  const { orders, loading, error, refresh } = useOrders();
 
  if (loading && orders.length === 0) {
    return <ActivityIndicator style={styles.centered} />;
  }
 
  if (error) {
    return (
      <View style={styles.centered}>
        <Text style={styles.error}>{error}</Text>
      </View>
    );
  }
 
  return (
    <FlatList
      data={orders}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <OrderRow order={item} onPress={() => {}} />}
      refreshControl={<RefreshControl refreshing={loading} onRefresh={refresh} />}
      contentContainerStyle={styles.list}
    />
  );
}
 
const styles = StyleSheet.create({
  centered: { flex: 1, justifyContent: "center", alignItems: "center" },
  list: { paddingVertical: 8 },
  error: { color: "#b91c1c", padding: 24, textAlign: "center" },
});

// tsconfig.json paths (Expo default template includes @/* → project root or src)
// "paths": { "@/*": ["./src/*"] }

# Layered - fine for < 5 screens, painful at scale
src/
├── components/       # every feature's rows, cards, modals mixed together
├── hooks/
├── screens/
└── services/
 
# Feature slice - scales with team and feature count
src/
├── components/ui/
├── lib/
└── features/
    ├── orders/
    ├── inbox/
    └── settings/

// ✅ Cross-feature import through public API
import type { Order } from "@/features/orders";
 
// ❌ Reaching into another feature's internals
import { OrderRow } from "@/features/orders/components/OrderRow";

// src/components/ui/Screen.tsx - shared primitive, no feature imports
import type { ReactNode } from "react";
import { StyleSheet, Text, View } from "react-native";
 
type ScreenProps = {
  title: string;
  children: ReactNode;
};
 
export function Screen({ title, children }: ScreenProps) {
  return (
    <View style={styles.root}>
      <Text style={styles.title}>{title}</Text>
      <View style={styles.body}>{children}</View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  root: { flex: 1, padding: 16, gap: 12, backgroundColor: "#fff" },
  title: { fontSize: 24, fontWeight: "700" },
  body: { flex: 1, gap: 8 },
});

// features/settings/screens/SettingsScreen.tsx - feature screen uses shared primitive
import { Screen } from "@/components/ui/Screen";
import { Text } from "react-native";
 
export function SettingsScreen() {
  return (
    <Screen title="Settings">
      <Text>Notifications, account, and privacy live here.</Text>
    </Screen>
  );
}