Understanding the Project Structure
Walk through the folder layout of an Expo project, learn the roles of app.json, package.json, and the App component, and make your first code change.
Understanding the Project Structure is a free React Native Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Native Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The Root of Every Expo Project
Every Expo project has a tidy layout that splits config, code, assets, and dependencies. Config files sit at the root, your code in App.js or src/, and packages in node_modules/.
MyFirstApp/
├── App.js # Entry component
├── app.json # Expo configuration
├── package.json # Dependencies + scripts
├── package-lock.json # Locked dependency tree
├── babel.config.js # Transpiler config
├── .gitignore # Files to exclude from git
├── assets/ # Static files
│ ├── icon.png
│ ├── splash.png
│ └── adaptive-icon.png
└── node_modules/ # Installed packages (auto-managed)The assets/ Folder
The assets/ folder holds static files bundled with your app — images, fonts, audio. Reference a local image with require(), and Expo optimizes it during the build. See the code.
import { Image } from 'react-native';
// Referencing a local asset
<Image source={require('./assets/icon.png')} />
// Referencing a remote image
<Image source={{ uri: 'https://example.com/photo.jpg' }} />
// Loading a font from assets/
import * as Font from 'expo-font';
await Font.loadAsync({
'Roboto-Bold': require('./assets/fonts/Roboto-Bold.ttf'),
});App.js as the Entry Point
React Native needs one entry point: App.js, which must export a default component. As your app grows, App.js becomes a thin shell wiring up navigation, state, and themes.
// A typical App.js as the project grows
import { NavigationContainer } from '@react-navigation/native';
import { Provider } from 'react-redux';
import { ThemeProvider } from './context/ThemeContext';
import RootNavigator from './navigation/RootNavigator';
import store from './store';
export default function App() {
return (
<Provider store={store}>
<ThemeProvider>
<NavigationContainer>
<RootNavigator />
</NavigationContainer>
</ThemeProvider>
</Provider>
);
}Organizing Source Files in src/
Small apps live at the root, but as yours grows, add a src/ folder. Common subfolders: screens/, components/, navigation/, hooks/, and services/. It keeps things easy to find.
src/
├── screens/
│ ├── HomeScreen.tsx
│ ├── ProfileScreen.tsx
│ └── SettingsScreen.tsx
├── components/
│ ├── Button.tsx
│ ├── Card.tsx
│ └── Avatar.tsx
├── navigation/
│ └── RootNavigator.tsx
├── hooks/
│ └── useFetchUser.ts
├── services/
│ └── api.ts
└── utils/
└── formatDate.tspackage.json Deep Dive
package.json is your project manifest: dependencies for runtime, devDependencies for tooling, and scripts for shortcuts. Never edit node_modules — npm install rebuilds it.
// package.json structure
{
'name': 'my-first-app',
'version': '1.0.0',
'main': 'node_modules/expo/AppEntry.js',
'scripts': {
'start': 'expo start',
'test': 'jest',
'lint': 'eslint .'
},
'dependencies': {
'expo': '~50.0.0',
'react': '18.2.0',
'react-native': '0.73.6'
},
'devDependencies': {
'@types/react': '~18.2.0',
'typescript': '^5.1.3',
'jest': '^29.0.0'
}
}app.json vs app.config.js
Need dynamic config — like reading env variables at build time? Swap app.json for app.config.js, a JS file that exports your config using process.env.
// app.config.js (dynamic configuration)
export default {
name: 'My App',
slug: 'my-app',
version: '1.0.0',
extra: {
apiUrl: process.env.API_URL || 'https://api.myapp.com',
environment: process.env.APP_ENV || 'production',
},
ios: {
bundleIdentifier: 'com.mycompany.myapp',
},
android: {
package: 'com.mycompany.myapp',
},
};.gitignore and What to Exclude
The .gitignore file tells Git what to skip. Always exclude node_modules/ (npm rebuilds it), .expo/, and any secret files like .env. Committing node_modules bloats your repo.
# Default .gitignore for Expo
node_modules/
.expo/
dist/
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/
# Environment files with secrets
.env
.env.local
.env.production
# macOS
.DS_Storebabel.config.js and Transpilation
The babel.config.js file controls how Babel transpiles your code. The babel-preset-expo preset covers the basics; you extend it with plugins like path aliases.
// babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
// Path aliases: @/components → src/components
['module-resolver', {
root: ['./src'],
alias: { '@': './src' },
}],
// Reanimated plugin MUST be last
'react-native-reanimated/plugin',
],
};
};The node_modules Directory
node_modules/ holds every package you depend on — often hundreds of megabytes. Never edit it directly. If things break, the classic fix is delete it and run npm install.
# If things break, a clean install often fixes it:
rm -rf node_modules
npm install
# Also clear the Metro cache
npx expo start --clear
# Check how many packages are installed
ls node_modules | wc -l
# See the dependency tree
npm list --depth=1ios/ and android/ Folders in Bare Workflow
The managed workflow hides the ios/ and android/ folders — Expo handles native code. Run expo prebuild to generate them: the Xcode project and the Gradle build files.
# Generate native folders (bare workflow)
npx expo prebuild
# This creates:
ios/
├── MyApp/
│ ├── AppDelegate.swift
│ ├── Info.plist
│ └── Images.xcassets/
└── MyApp.xcodeproj/
android/
├── app/
│ ├── src/main/
│ │ ├── AndroidManifest.xml
│ │ └── java/.../MainApplication.kt
│ └── build.gradle
└── build.gradleExpo Router and the app/ Directory
Newer projects use Expo Router, file-based routing like Next.js. Each file in app/ becomes a route — index.tsx is /, profile.tsx is /profile. No manual navigator needed.
// With Expo Router, file structure = routes:
app/
├── _layout.tsx // Root layout (NavigationContainer)
├── index.tsx // Screen at route '/'
├── profile.tsx // Screen at route '/profile'
└── settings/
├── _layout.tsx // Settings-section layout
└── index.tsx // Screen at '/settings'
// app/index.tsx
import { Text, View } from 'react-native';
export default function HomeScreen() {
return <View><Text>Home</Text></View>;
}Quick Check
Test your understanding of React Native Mobile Development concepts from this lesson.
Lesson Recap
You mapped the project: assets/ holds media, app.json controls config, and src/screens and src/components organize your growing code. Next: the View component! 📦
Frequently asked questions
Is the “Understanding the Project Structure” lesson free?
Yes — the full text of “Understanding the Project Structure” is free to read here on the web, and the React Native Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Native Academy course, upgrade to CoddyKit PRO.
What will I learn in “Understanding the Project Structure”?
Walk through the folder layout of an Expo project, learn the roles of app.json, package.json, and the App component, and make your first code change. You practise React Native Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Native Academy?
No prior experience is required. React Native Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Understanding the Project Structure” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Native Academy lesson?
Yes. Every React Native Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Installing Node, Expo CLI, and Simulators
- Creating Your First Expo Project
- Running on Device and Emulator
- Understanding the Project Structure