DEV Community

sandatya widhi
sandatya widhi

Posted on

03. Struktur Folder React Native

#reactnative #tutorial #architecture #beginners

📁 Memahami Struktur Folder Expo di React Native

🚀 Pendahuluan

Ketika kamu menjalankan perintah berikut:

npx create-expo-app MyApp
Enter fullscreen mode Exit fullscreen mode

Expo akan otomatis membuat sebuah folder proyek bernama MyApp.
Di dalamnya terdapat berbagai folder dan file yang sudah diatur untuk memudahkan pengembangan aplikasi React Native.

Berikut contoh struktur folder yang terbentuk:

MyApp/
├── .expo/
├── .vscode/
├── app/
│   ├── (tabs)/
│   │   ├── _layout.tsx
│   │   ├── explore.tsx
│   │   ├── index.tsx
│   ├── _layout.tsx
│   ├── modal.tsx
├── assets/
│   └── images/
├── components/
│   ├── ui/
│   │   ├── external-link.tsx
│   │   ├── haptic-tab.tsx
│   │   ├── hello-wave.tsx
│   │   ├── parallax-scroll-view.tsx
│   │   ├── themed-text.tsx
│   │   ├── themed-view.tsx
├── constants/
│   ├── theme.ts
├── hooks/
│   ├── use-color-scheme.ts
│   ├── use-color-scheme.web.ts
│   ├── use-theme-color.ts
├── node_modules/
├── scripts/
│   ├── reset-project.js
├── .gitignore
├── app.json
Enter fullscreen mode Exit fullscreen mode

🧩 Penjelasan Tiap Folder dan File

1. .expo/

Berisi:

  • Cache proyek
  • Metadata hasil build
  • File konfigurasi sementara (misalnya data login Expo Go)

⚠️ Catatan: Folder ini dibuat otomatis oleh Expo dan tidak perlu diubah secara manual.

2. .vscode/

Menyimpan pengaturan untuk Visual Studio Code, seperti:

  • Format kode otomatis (settings.json)
  • Ekstensi bawaan proyek

Tujuannya agar semua anggota tim memiliki pengaturan editor yang seragam.

3. app/ 📱

Inti aplikasi yang berisi semua halaman (screen) dan komponen utama.

File penting di dalamnya:

  • _layout.tsx → Layout global aplikasi
  • index.tsx → Halaman utama (home screen)
  • modal.tsx → Halaman modal (pop-up)

Subfolder (tabs)/:
Berisi struktur navigasi tab aplikasi:

  • _layout.tsx → Layout khusus tab
  • explore.tsx → Halaman tab “Explore”
  • index.tsx → Halaman tab utama

4. assets/images/ 🖼️

Tempat menyimpan file gambar, ikon, atau media lain.

assets/images/logo.png
assets/images/background.jpg
Enter fullscreen mode Exit fullscreen mode

Contoh import di kode:

import logo from '../assets/images/logo.png';
Enter fullscreen mode Exit fullscreen mode

5. components/ ⚛️

Berisi komponen kustom yang digunakan berulang.

Contoh file:

  • hello-wave.tsx → Animasi sapaan
  • haptic-tab.tsx → Tab dengan efek getar
  • themed-text.tsx, themed-view.tsx → Mendukung tema terang/gelap

Subfolder ui/
Biasanya berisi elemen UI kecil seperti tombol atau link.

6. constants/

Berisi nilai tetap (konstanta) yang digunakan di seluruh aplikasi.

// constants/theme.ts
export const Colors = {
  light: "#ffffff",
  dark: "#000000",
};
Enter fullscreen mode Exit fullscreen mode

7. hooks/ 🔄

Berisi custom hooks — fungsi reusable dengan logika tertentu.

Contoh:

  • use-color-scheme.ts → Mendeteksi mode terang/gelap
  • use-theme-color.ts → Menentukan warna sesuai tema

Contoh penggunaan:

const theme = useThemeColor();
Enter fullscreen mode Exit fullscreen mode

8. node_modules/ 📦

Tempat semua dependensi npm disimpan.

⚠️ Jangan ubah folder ini secara manual.
Folder dibuat otomatis saat menjalankan npm install.

9. scripts/

Berisi skrip tambahan proyek.

// scripts/reset-project.js
// digunakan untuk menghapus cache dan reset konfigurasi Expo
Enter fullscreen mode Exit fullscreen mode

10. .gitignore

Berisi daftar file dan folder yang tidak disertakan dalam Git.

node_modules/
.vscode/
.expo/
Enter fullscreen mode Exit fullscreen mode

11. app.json ⚙️

File konfigurasi utama proyek Expo.

{
  "expo": {
    "name": "MyApp",
    "slug": "myapp",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png"
  }
}
Enter fullscreen mode Exit fullscreen mode

❓ Kenapa Folder (tabs) Menggunakan Tanda Kurung?

Expo (khususnya Expo Router) menggunakan tanda kurung ( ) untuk mengelompokkan routes tanpa memengaruhi URL.

Artinya:

  • Folder (tabs) tidak muncul di URL
  • Hanya berfungsi sebagai pengelompokan (grouping) 
app/
├── (tabs)/
│   ├── index.tsx
│   ├── explore.tsx
│   ├── _layout.tsx
├── settings.tsx
Enter fullscreen mode Exit fullscreen mode

Hasil URL:

File URL
index.tsx /
explore.tsx /explore
settings.tsx /settings

📘 Jadi, URL tidak akan menjadi /tabs/explore, karena (tabs) hanya untuk grouping.

🔄 Jika Tanpa Tanda Kurung 

app/
├── tabs/
│   ├── index.tsx
│   ├── explore.tsx
Enter fullscreen mode Exit fullscreen mode

Maka URL menjadi:

/tabs
/tabs/explore
Enter fullscreen mode Exit fullscreen mode

📊 Perbandingan

Folder Efek pada URL Kegunaan
(tabs) Tidak muncul di URL Untuk grouping rute
tabs Muncul di URL Untuk membuat path sebenarnya

Top comments (0)