Feature-Sliced Design for RN

src/
├── app/                    # FSD "app" layer - providers, init (NOT Expo Router's app/)
│   └── providers/
│       └── AppProviders.tsx
├── features/
│   ├── auth/
│   │   ├── index.ts        # public API
│   │   ├── ui/
│   │   ├── model/
│   │   └── api/
│   └── orders/
│       ├── index.ts
│       ├── ui/
│       ├── model/
│       └── api/
├── entities/
│   ├── user/
│   │   ├── index.ts
│   │   ├── model/
│   │   └── ui/             # UserAvatar - entity-scoped UI
│   └── order/
│       └── index.ts
└── shared/
    ├── ui/                 # Button, Screen
    ├── api/
    ├── config/
    └── lib/
 
app/                        # Expo Router - route files only
└── (tabs)/
    └── orders/
        └── index.tsx

// Import rule (enforced in ESLint):
// app → features → entities → shared
// features/auth must NOT import features/orders/ui/*

// src/entities/user/model/types.ts
export type User = {
  id: string;
  displayName: string;
  avatarUrl: string | null;
};

// src/entities/user/ui/UserAvatar.tsx
import { Image, StyleSheet, View } from "react-native";
import type { User } from "../model/types";
 
type Props = { user: User; size?: number };
 
export function UserAvatar({ user, size = 40 }: Props) {
  return (
    <View style={[styles.circle, { width: size, height: size }]}>
      {user.avatarUrl ? (
        <Image source={{ uri: user.avatarUrl }} style={styles.image} />
      ) : null}
    </View>
  );
}
 
const styles = StyleSheet.create({
  circle: { borderRadius: 999, overflow: "hidden", backgroundColor: "#e5e7eb" },
  image: { width: "100%", height: "100%" },
});

// src/entities/user/index.ts
export type { User } from "./model/types";
export { UserAvatar } from "./ui/UserAvatar";

// src/features/orders/ui/OrderRow.tsx
import { Pressable, StyleSheet, Text, View } from "react-native";
import { UserAvatar, type User } from "@/entities/user";
import type { Order } from "@/entities/order";
 
type Props = {
  order: Order;
  placedBy: User;
  onPress: (orderId: string) => void;
};
 
export function OrderRow({ order, placedBy, onPress }: Props) {
  return (
    <Pressable style={styles.row} onPress={() => onPress(order.id)}>
      <UserAvatar user={placedBy} size={36} />
      <View style={styles.meta}>
        <Text style={styles.title}>{order.title}</Text>
        <Text style={styles.sub}>{placedBy.displayName}</Text>
      </View>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  row: { flexDirection: "row", gap: 12, padding: 16 },
  meta: { flex: 1 },
  title: { fontSize: 16, fontWeight: "600" },
  sub: { fontSize: 14, color: "#6b7280" },
});

// src/features/orders/ui/OrdersScreen.tsx
import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native";
import { Screen } from "@/shared/ui/Screen";
import { useOrdersScreen } from "../model/useOrdersScreen";
import { OrderRow } from "./OrderRow";
 
export function OrdersScreen() {
  const { orders, usersById, loading, refresh, onOrderPress } = useOrdersScreen();
 
  return (
    <Screen>
      <FlatList
        data={orders}
        keyExtractor={(item) => item.id}
        refreshControl={<RefreshControl refreshing={loading} onRefresh={refresh} />}
        renderItem={({ item }) => (
          <OrderRow
            order={item}
            placedBy={usersById[item.placedById] ?? { id: "", displayName: "Unknown", avatarUrl: null }}
            onPress={onOrderPress}
          />
        )}
        ListEmptyComponent={<Text style={styles.empty}>No orders yet</Text>}
      />
    </Screen>
  );
}
 
const styles = StyleSheet.create({
  empty: { textAlign: "center", marginTop: 48, color: "#6b7280" },
});

// src/features/orders/index.ts - public API
export { OrdersScreen } from "./ui/OrdersScreen";

// app/(tabs)/orders/index.tsx
export { OrdersScreen as default } from "@/features/orders";

// tsconfig.json paths - mirror FSD layers
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@/features/*": ["./src/features/*"],
      "@/entities/*": ["./src/entities/*"],
      "@/shared/*": ["./src/shared/*"]
    }
  }
}

// eslint.config.js (excerpt) - block cross-feature deep imports
{
  rules: {
    "no-restricted-imports": ["error", {
      patterns: [
        {
          group: ["@/features/*/ui/*", "@/features/*/model/*", "@/features/*/api/*"],
          message: "Import from the feature public API (@/features/<name>) instead.",
        },
      ],
    }],
  },
}