FAQ

pertanyaan 1 : ketika saya menjalankan perintah npx-create-expo-app maka secara otomatis saya akan dibuatkan folder (tabs) yang terdapat pada folder app, dimana isi folder (tabs) tersebut adalah file index.tsx, _layout.tsx dan explore.tsx. sementara pada folder app otomatis akan terdapat file _layout.tsx dan not-found.tsx. pertanyaan ? apa fungsi folder (tabs) dan apa bedanya _layout.tsx pada folder app dengan pada folder (tabs)?

jawaban :
Fungsi Folder (tabs) dalam Expo Router
Ketika menjalankan perintah:

npx create-expo-app myApp

Expo Router secara otomatis membuat folder (tabs) di dalam folder app, yang berisi file index.tsx, _layout.tsx, dan explore.tsx.

📌 Apa fungsi folder (tabs)?

Folder (tabs) digunakan untuk mengelompokkan navigasi berbasis Tab.
Nama folder dalam tanda kurung ()` menandakan bahwa folder ini adalah grup layout (bukan bagian dari URL).
Semua file dalam (tabs) akan otomatis menjadi bagian dari Tab Navigation.

Perbedaan _layout.tsx dalam app/ vs app/(tabs)/
Expo Router memungkinkan penggunaan nested layout, dan perbedaan utama adalah sebagai berikut:

📌 app/_layout.tsx (Layout Global - Root Layout)

Digunakan untuk mendefinisikan layout utama aplikasi, seperti Stack Navigation yang membungkus semua halaman.
Layout ini diterapkan ke seluruh aplikasi, termasuk halaman di dalam (tabs).
Biasanya berisi konfigurasi seperti Stack atau Drawer Navigation.
Contoh app/_layout.tsx:

`import { Stack } from "expo-router";

export default function RootLayout() {
return (




);
}
`

🎯 Hasil:
Semua halaman di dalam aplikasi akan menggunakan Stack Navigation.
Navigasi berbasis tab di dalam (tabs) tetap ada, tetapi dibungkus dalam stack ini.

📌 app/(tabs)/_layout.tsx (Layout Spesifik untuk Tab Navigation)
Hanya berlaku untuk halaman dalam folder (tabs).
Digunakan untuk mendefinisikan Tab Navigation khusus.
Tidak mempengaruhi halaman lain di luar folder (tabs).

Contoh app/(tabs)/_layout.tsx:

`
import { Tabs } from "expo-router";

export default function TabsLayout() {
return (




);
}
`

🎯 Hasil:

Hanya halaman di dalam folder (tabs) yang mendapatkan Tab Navigation.
Halaman lain di luar (tabs), misalnya profile.tsx, tidak memiliki tab karena tidak termasuk dalam layout ini.

1. Kesimpulan

• File app/_layout.tsx memiliki fungsi sebagai Layout utama untuk seluruh aplikasi, biasanya menggunakan Stack Navigation.
• File app/(tabs)/_layout.tsx memiliki fungsi sebagai Layout khusus untuk Tab Navigation, hanya berlaku untuk halaman di dalam (tabs).

📌 Ilustrasi Struktur Navigasi

/app
├── _layout.tsx # Root Layout (Stack Navigation)
├── not-found.tsx # Halaman untuk 404
├── profile.tsx # Halaman terpisah dari tab
├── (tabs)/ # Grup Tab Navigation
│ ├── _layout.tsx # Layout untuk Tab Navigation
│ ├── index.tsx # Tab "Home"
│ ├── explore.tsx # Tab "Explore"

Bagaimana ini bekerja?
✅ Saat user membuka /profile, hanya app/_layout.tsx yang berlaku.
✅ Saat user membuka / atau /explore, Expo Router akan menggunakan tab navigation dari (tabs)/_layout.tsx.

🎯 Kesimpulan Utama:

• app/_layout.tsx → Layout global untuk semua halaman dalam aplikasi (misalnya Stack Navigation).
• app/(tabs)/_layout.tsx → Layout khusus untuk Tab Navigation, hanya berlaku untuk halaman dalam (tabs).
• Folder (tabs) adalah grup layout yang berfungsi sebagai wrapper untuk navigasi berbasis tab.

Jadi, Expo Router memungkinkan kita menggabungkan Stack Navigation dan Tab Navigation dengan cara yang lebih terstruktur!

pertanyaan 2 : kemudian jika saya hendak membuat folder baru dalam app apakah wajib penamaannya seperti (tabs) . misal saya ingin buat folder setting, apakah setting tersebut wajib diisi dengan tanda kurung seperti tabs?
jawabannya :
Tidak, penamaan folder dalam app/ tidak wajib menggunakan tanda kurung ( ... ), kecuali jika ingin membuat layout grup.

Kapan Harus Menggunakan Tanda Kurung ( ... )?
Dalam Expo Router, tanda kurung () digunakan untuk grup layout. Artinya, folder tersebut tidak mempengaruhi URL.

Contoh:
Jika ada struktur berikut:
/app
├── (tabs)/

│ ├── _layout.tsx # Layout untuk Tab Navigation
│ ├── index.tsx # Home Tab
│ ├── explore.tsx # Explore Tab
├── profile.tsx # Halaman profile

📌 URL yang dihasilkan:
/ → index.tsx dalam (tabs)
/explore → explore.tsx dalam (tabs)
/profile → profile.tsx (karena ada langsung di app/)
📌 Folder (tabs) tidak muncul di URL, karena tanda kurung menunjukkan bahwa itu hanya grup navigasi.

Jika Saya Membuat Folder settings/, Apakah Harus (settings)?
❌ Tidak wajib menggunakan (settings), kecuali jika ingin menjadikannya grup layout.

Contoh tanpa tanda kurung:
/app
├── settings/
│ ├── index.tsx # Halaman "/settings"
│ ├── profile.tsx # Halaman "/settings/profile"

📌 URL yang dihasilkan:

/settings → settings/index.tsx
/settings/profile → settings/profile.tsx

Jika settings/ Menggunakan (settings)/
Jika menggunakan (settings)/, maka folder tersebut tidak akan muncul di URL, tetapi tetap berfungsi untuk mengelompokkan navigasi.

Contoh dengan tanda kurung:
/app
├── (settings)/
│ ├── _layout.tsx # Layout khusus untuk grup ini
│ ├── index.tsx # Halaman "/"
│ ├── profile.tsx # Halaman "/profile"

📌 URL yang dihasilkan:
/ → index.tsx dalam (settings)
/profile → profile.tsx dalam (settings), bukan /settings/profile

Kapan Sebaiknya Menggunakan ( ... )?
Gunakan tanda kurung ( ... ) jika:
✅ Ingin mengelompokkan halaman tanpa menambah path di URL.
✅ Ingin membuat layout khusus untuk grup halaman tertentu.

Contoh:
Misalnya kita ingin membuat layout terpisah untuk halaman pengaturan tanpa menampilkan /settings/ di URL.

`
// app/(settings)/_layout.tsx
import { Stack } from "expo-router";

export default function SettingsLayout() {
return (




);
}
`

Kesimpulan

✅ Gunakan settings/ jika ingin URL menjadi /settings dan /settings/profile.
✅ Gunakan (settings)/ jika ingin menyembunyikan settings dari URL, tetapi tetap mengelompokkan navigasi.

Jadi, tanda kurung tidak wajib kecuali jika ingin membuat grup navigasi tanpa mengubah struktur URL!