Memahami Struktur Proyek

The Root of Every Expo Project

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

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

// 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/

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.ts

package.json Deep Dive

// 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

// 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

# 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_Store

babel.config.js and Transpilation

// 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

# 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=1

ios/ and android/ Folders in Bare Workflow

# 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.gradle

Expo Router and the app/ Directory

// 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

Lesson Recap