Project Structure & Metro Bundler

Key folders in a bare React Native project

• App.tsx / index.js — JavaScript entry point registered with AppRegistry.
• src/ — your components, screens, hooks, services (convention, not required).
• android/ — Gradle project, AndroidManifest.xml, native Java/Kotlin code.
• ios/ — Xcode workspace, Info.plist, native Swift/Objective-C code.
• node_modules/ — npm dependencies.
• metro.config.js — bundler configuration (assets, transformers).

Metro Bundler explained

Metro is React Native's JavaScript bundler (like webpack for web). It transforms JSX/TypeScript, resolves imports, and serves the bundle to the app in development. In production, a single optimized bundle is embedded in the app.

Fast Refresh preserves component state when you edit code — essential for rapid UI iteration.

import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";

AppRegistry.registerComponent(appName, () => App);

Recommended src/ structure

src/
  components/     # reusable UI (Button, Card)
  screens/        # full pages (HomeScreen, LoginScreen)
  navigation/     # React Navigation config
  hooks/          # custom hooks (useAuth, useFetch)
  services/       # API clients, storage helpers
  context/        # React Context providers
  types/          # TypeScript interfaces
  utils/          # formatters, validators