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.
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'),
});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