React Native App File Structure

This guide explains the folder structure used by Instamobile React Native CLI apps after you download a product from the marketplace.

Quick Answer

Start from the app folder that contains package.json, ios/, android/, and src/. That is the mobile app you build and run. Use src/ for app screens and configuration, src/core/ for reusable Instamobile modules, ios/ and android/ for native settings, and firebase/ when the product ships backend Functions, Rules, or seed data.

If your package contains more than one app folder, each app should be treated as its own React Native project.

Common Folder Layout

Most Instamobile React Native CLI apps follow this shape:

ReactNativeApp/
  android/
  ios/
  src/
    App.tsx
    AppContent.tsx
    assets/
    components/
    config/
    core/
    navigators/
    screens/
    theme/
    translations/
  app.json
  babel.config.js
  index.js
  index.ts
  metro.config.js
  package.json
  react-native.config.js
  tsconfig.json
  yarn.lock

firebase/
  functions/
    index.ts
    package.json
    tsconfig.json
  firestore.rules
  storage.rules
  firestore.indexes.json

Not every product includes every folder. For example, a simple UI app may not include firebase/, while a marketplace, chat, social, or AI app often does.

Mobile App Folders

Path	What it contains	When you edit it
`src/App.tsx`	The React Native app root component.	Change top-level providers, root layout, or app-level wrappers.
`src/AppContent.tsx`	Main app composition used by many products.	Adjust app-wide runtime composition when the product includes this file.
`src/screens/`	App screens and feature views.	Change product-specific UI and flows.
`src/navigation/` or `src/navigators/`	Stack, tab, drawer, and route configuration.	Add, remove, or reorder screens.
`src/config/`	Public app config, feature flags, copy, theme inputs, API URLs, and service placeholders.	Connect services and adjust runtime behavior.
`src/theme/` or `src/config/styles`	Colors, typography, spacing, and visual settings.	White-label the app.
`src/core/`	Reusable Instamobile modules such as auth, chat, media, profile, payments, and location.	Customize shared module behavior carefully.
`assets/` or image folders	Icons, splash assets, images, fonts, and placeholders.	Replace branding and product assets.

Treat src/core/ with more care than app screens. Core modules are reused across many products, so changing them can affect authentication, chat, media upload, payments, or profile flows.

Native Project Folders

Path	What it contains	Common tasks
`ios/`	Xcode project, Podfile, iOS native config, bundle identifier, entitlements, permissions, Firebase plist.	Change bundle id, install pods, configure Apple Sign In, push notifications, maps, payments.
`android/`	Gradle project, package id, flavors, Android permissions, Firebase JSON, signing config.	Change package name, configure Google services, signing, permissions, maps, push notifications.

Use the native folders when you need to change app identity, permissions, service configuration, signing, or platform-specific behavior.

Backend Folder

Products with Firebase support usually include a firebase/ folder next to the mobile app folder.

Path	What it contains
`firebase/functions/`	Firebase Cloud Functions backend code.
`firebase/functions/index.ts`	TypeScript entrypoint for Firebase Cloud Functions when backend code is included.
`firebase/functions/tsconfig.json`	TypeScript compiler settings for Firebase Functions.
`firebase/firestore.rules`	Firestore security rules.
`firebase/storage.rules`	Firebase Storage security rules.
`firebase/firestore.indexes.json`	Firestore indexes required by complex queries.
`firebase/dataSeed/` or seed folders	Optional JSON seed data for demo tables.

Backend files are not automatically connected to your Firebase account. You must create your own Firebase project, replace mobile config files, configure secrets, and deploy Functions or Rules from your own account.

Configuration Files

File	Purpose
`package.json`	JavaScript dependencies and commands such as `corepack yarn ios`, `corepack yarn android`, and `corepack yarn start`.
`yarn.lock`	Locked dependency versions. Keep it committed.
`tsconfig.json`	TypeScript compiler settings for the React Native app.
`app.json`	App metadata used by React Native and Expo modules.
`index.js`	React Native CLI bootstrap file. In current TypeScript apps it usually imports `index.ts`.
`index.ts`	TypeScript app entrypoint that registers the React Native app and app-level native integrations.
`metro.config.js`	Metro bundler configuration.
`babel.config.js`	Babel transforms and plugins.
`react-native.config.js`	React Native autolinking and asset configuration.
`ios/Podfile`	CocoaPods dependency configuration for iOS.
`android/build.gradle` and `android/app/build.gradle`	Android build and app configuration.

Where To Make Common Changes

Goal	Files or folders to check
Change app display name	`app.json`, `ios/`, `android/`
Change iOS bundle identifier	Xcode project under `ios/`
Change Android package name	`android/app/build.gradle`, Android source package folders
Replace Firebase iOS config	`ios/<AppName>/GoogleService-Info.plist`
Replace Firebase Android config	`android/app/google-services.json`
Change colors and typography	`src/theme/`, `src/config/`, product-specific style files
Add a new screen	`src/screens/` and `src/navigation/` or `src/navigators/`
Update Firebase Functions	`firebase/functions/index.ts` and related files under `firebase/functions/`
Update Firestore or Storage rules	`firebase/firestore.rules`, `firebase/storage.rules`
Configure payments	Payment docs, `src/config/`, native platform files, backend functions
Configure push notifications	Push docs, Firebase config, iOS entitlements, Android notification settings

First Files To Open

When you start a new app package, inspect these files first:

README.md included with the app package, if present.
package.json inside the React Native app folder.
src/App.tsx and src/AppContent.tsx, if present.
src/config/.
src/navigation/ or src/navigators/.
index.ts for app registration and app-level native integrations.
ios/Podfile.
android/app/build.gradle.
firebase/, if the app package includes it.

Verification

After you understand the structure, confirm that the app can install dependencies and start Metro:

corepack enable
corepack yarn install --immutable
corepack yarn start

For iOS:

bundle install
bundle exec pod install --project-directory=ios
corepack yarn ios

For Android:

corepack yarn android

FAQ

Which folder do I run commands from?

Run mobile commands from the React Native app folder that contains package.json, ios/, android/, and src/.

Should I edit files inside `ios/` and `android/`?

Yes, when you need native configuration such as bundle identifiers, package names, permissions, signing, Firebase config, maps, push notifications, or payments.

Can I delete `src/core/`?

No. src/core/ contains reusable modules used by the app. You can customize it, but deleting it will break features that depend on those modules.

Why do some apps include a `firebase/` folder?

Apps with backend features ship Firebase Functions, Rules, indexes, and sometimes seed data. You still need to connect them to your own Firebase project.

What if my package includes multiple app folders?

Treat each app folder as a separate React Native project. Install dependencies, configure native files, and run verification from inside the app you are working on.

Quick Answer​

Common Folder Layout​

Mobile App Folders​

Native Project Folders​

Backend Folder​

Configuration Files​

Where To Make Common Changes​

First Files To Open​

Verification​

FAQ​

Which folder do I run commands from?​

Should I edit files inside ios/ and android/?​

Can I delete src/core/?​

Why do some apps include a firebase/ folder?​

What if my package includes multiple app folders?​

Next Steps​