Explain the React Native project structure (`ios/`, `android/`, `App.tsx`, `package.json`, `metro.config.js`).

Question

Accepted Answer

A bare React Native project (CLI or Expo prebuild) ships three top-level folders plus a handful of config files at the root. Top-level layout: App.tsx — entry component (your root React tree). index.js — registers the root component with AppRegistry . package.json — dependencies, scripts ( start , ios , android ). metro.config.js — Metro bundler configuration (asset extensions, transformers, resolver). babel.config.js — Babel presets/plugins (Reanimated plugin lives here). app.json — app display name, slug, Expo / EAS config. tsconfig.json — TypeScript compiler options. ios/ folder — native iOS project: YourApp.xcworkspace / YourApp.xcodeproj — open this in Xcode. YourApp/AppDelegate.swift (or .mm ) — native entry point. YourApp/Info.plist — permissions, URL schemes, bundle ID. Podfile — CocoaPods dependencies; Pods/ is generated, don't edit. android/ folder — native Android project: app/build.gradle — module-level Gradle config (versions, ABIs, signing). app/src/main/AndroidManifest.xml — permissions, intent filters, activities. app/src/main/java/.../MainActivity.kt + MainApplication.kt — native entry points. gradle.properties — feature flags ( newArchEnabled=true , hermesEnabled=true ). Don't list every file — show that you know which ones you'd actually edit and which are 'compiled output.' Editable: `App.tsx`, `package.json`, `app.json`, `metro.config.js`, `babel.config.js`, and platform-specific config inside `ios/` (Info.plist, AppDelegate) and `android/` (build.gradle, AndroidManifest.xml). Avoid the trap of treating `ios/Pods/` or `android/build/` as 'your code' — those are generated.