Understanding the folder structure and files of a React Native project is essential for efficient development. Below is a typical layout of a React Native project created using npx react-native init MyApp (with the default CLI, not Expo).

📁 React Native Folder Structure

MyApp/
├── __tests__/              # Jest unit test files
├── android/                # Native Android code (Java/Kotlin)
├── ios/                    # Native iOS code (Objective-C/Swift)
├── node_modules/           # Project dependencies
├── src/                    # Your app’s main source code (custom folder)
│   ├── components/         # Reusable UI components
│   ├── screens/            # App screens or views
│   ├── navigation/         # Navigation setup (React Navigation etc.)
│   ├── assets/             # Images, fonts, icons, etc.
│   ├── utils/              # Helper functions or constants
│   └── App.js              # Or the entry point if using `src` directly
├── App.js                  # Main entry JS file
├── index.js                # App entry point for React Native
├── package.json            # Project dependencies and scripts
├── babel.config.js         # Babel compiler config
├── metro.config.js         # Metro bundler config (optional)
├── .watchmanconfig         # Watchman settings (for macOS dev)
├── .eslintrc.js            # ESLint config (optional)
└── README.md               # Project description

📂 Key Folders Explained

1. android/

• Contains all Android-specific native code.
• Structure resembles a standard Android project (with build.gradle, AndroidManifest.xml, etc.).
• You’ll touch this folder if integrating native modules or editing Gradle settings.

2. ios/

• iOS-specific code and Xcode project files (*.xcodeproj or *.xcworkspace).
• You use this folder to:
  • Set up app icons and splash screens
  • Add iOS native libraries
  • Open in Xcode for iOS-specific configurations

3. src/ (optional but recommended)

• Contains your actual app logic, like:
  • Components (buttons, headers)
  • Screens (Home, Login)
  • Navigation
  • APIs, hooks, etc.

You can rename or restructure this to suit your project size.

📄 Key Files Explained

File	Purpose
App.js	Main React component of the app. Often imports navigation and renders the first screen.
index.js	Entry point of the app for React Native. Registers the root component with AppRegistry.
package.json	Lists dependencies, scripts (e.g., start, android, ios), and metadata.
babel.config.js	Configures Babel (transpiler for React Native).
metro.config.js	(Optional) Configures the Metro bundler (e.g., for custom asset handling).
.eslintrc.js	Linting rules for JS/TS code (optional, but recommended).
tests/	Default folder for Jest test cases. Can be deleted or restructured.

---

✅ Tips

• Use src/ to keep your root clean and your code organized.
• Avoid putting all logic inside App.js—move components into src/components and pages to src/screens.
• Use TypeScript for better developer experience (npx react-native init MyApp --template react-native-template-typescript).

Happy Coding!