Feature‑Based Folder Structure for Scalable React Native Apps

Insight

Instead of the classic "screens / components / utils" hierarchy, group everything a feature needs—screens, hooks, styles, and tests—under a single folder. This mirrors how the app is used, reduces cross‑feature imports, and plays nicely with a Yarn‑workspace monorepo where shared UI primitives live in a packages/ui package. When a new feature is added, you drop a folder and the build system picks it up automatically.

Example

// src/features/profile/
// ├─ ProfileScreen.tsx
// ├─ useProfile.ts
// ├─ profile.styles.ts
// └─ __tests__/ProfileScreen.test.tsx

// ProfileScreen.tsx
import {useProfile} from './useProfile';
import {styles} from './profile.styles';

export const ProfileScreen = () => {
  const {data, isLoading} = useProfile();
  if (isLoading) return <Loading />;
  return <View style={styles.container}>/* UI */</View>;
};

Takeaway

Adopt a feature‑first folder layout and keep shared code in a separate package; you’ll get clearer boundaries, faster onboarding, and easier scaling as your app grows.