🚀 React Native CLI Modular Boilerplate

Boilerplate React Native CLI modern berbasis TypeScript yang siap pakai dengan Feature-Driven & Clean Architecture, performa tinggi, linter kilat (Oxlint), integrasi WSA (Windows Subsystem for Android), dan developer experience yang bersih tanpa konfigurasi yang berbelit-belit.

---

🛠️ Tech Stack & Ekosistem

Kategori	Teknologi / Library	Keterangan
Core Framework	React Native 0.87 + React 19	Pure React Native CLI (Non-Expo)
Bahasa	TypeScript	Full type safety & auto-completion
Linter	Oxlint (Rust-based)	Sub-second super fast linting
Arsitektur	Feature-Driven & Clean Slices	UI Module terisolasi, central Services & Schemas
State Management	Zustand	State ringan, reaktif, & auto AsyncStorage persist
Data Fetching	TanStack Query v5 (React Query)	Auto-caching, retry, optimistic updates
HTTP Client	Axios	Interceptor token, centralized error handling
Form Validation	Zod + React Hook Form	Type-safe schema validation
Styling	NativeWind (Tailwind CSS)	Utility-first styling + Dark/Light theme ready
Navigasi	React Navigation v7	Type-safe Root, Auth Stack, Main Tabs & App Stack
Local Storage	@react-native-async-storage/async-storage	Penyimpanan lokal persisten yang aman
Logger	react-native-logs	Structured colorful logging & dynamic namespace factory
Path Aliasing	babel-plugin-module-resolver	Import bersih (@/*, @services/*, @schemas/*)

---

📁 Struktur Folder Proyek

src/
├── assets/                      # 🖼️ Aset statis (images, icons, fonts)
│   └── images/
├── components/                  # 🧩 Shared / Global UI components (lintas module)
│   ├── common/                  # Button, Input, Card, Header, Badge, ScreenWrapper, DeviceFrame
│   └── feedback/                # LoadingSpinner, EmptyState
├── constants/                   # ⚙️ Konfigurasi global, palet warna, & endpoints
│   ├── colors.ts                # Palette design tokens
│   ├── config.ts                # API Base URL, timeouts, storage keys
│   ├── routes.ts                # Enum / Konstanta route navigasi
│   ├── endpoints.ts             # Daftar URL endpoints API
│   └── theme.ts                 # Definisi token tema
├── hooks/                       # 🪝 Custom hooks global (useTheme, useDebounce)
├── navigation/                  # 🧭 Konfigurasi navigasi aplikasi (React Navigation)
│   ├── RootNavigator.tsx        # Switcher Auth vs Main App
│   ├── AuthNavigator.tsx        # Stack Login & Register
│   ├── TabNavigator.tsx         # Bottom Tabs (Home, Explore, Profile, Settings)
│   └── AppNavigator.tsx         # Stack Main App (Tabs + Detail Screens)
├── schemas/                     # 🛡️ Validasi Form & Zod Schemas terpusat
│   └── authSchema.ts            # Skema validasi Login & Register
├── services/                    # 🌐 Lapisan API & Data Fetching terpusat
│   ├── authService.ts           # Layanan autentikasi & profil
│   └── postService.ts           # Layanan API & hooks TanStack Query
├── store/                       # 🧠 Zustand Global Stores
│   ├── useAuthStore.ts          # User session & token (auto AsyncStorage persist)
│   └── useAppStore.ts           # App preferences, theme mode, global counters
├── types/                       # 🏷️ Definisi interface TypeScript global
│   ├── api.ts                   # Model data (User, Post, ApiResponse)
│   ├── navigation.ts            # ParamList untuk setiap stack navigasi
│   └── global.d.ts              # Deklarasi modul global
├── utils/                       # 🛠️ Helper functions & core utilities
│   ├── api.ts                   # Axios HTTP client, token interceptor, logger
│   ├── storage.ts               # AsyncStorage wrapper
│   ├── formatters.ts            # Format mata uang & tanggal
│   └── logger.ts                # react-native-logs factory
│
└── modules/                     # 📦 FEATURE / MODULE SLICES (UI Screens & Modules)
    ├── auth/                    # Modul Autentikasi (LoginScreen, RegisterScreen)
    ├── home/                    # Modul Dashboard (HomeScreen)
    ├── explore/                 # Modul Explore / Feed (ExploreScreen, DetailScreen)
    ├── profile/                 # Modul Profil Pengguna (ProfileScreen)
    └── settings/                # Modul Pengaturan Aplikasi (SettingsScreen)

---

🚀 Memulai Proyek (Getting Started)

1. Prasyarat Lingkungan

• Node.js: >= 22.11.0
• Android: Android SDK (API 34+) + JDK 17
• WSA / Emulator: Windows Subsystem for Android atau Android Studio AVD

2. Menjalankan di WSA (Windows Subsystem for Android)

1. Aktifkan Developer Mode di WSA Settings.
2. Buka terminal dan hubungkan ADB ke WSA:

   adb connect 127.0.0.1:58526

3. Hubungkan port Metro Bundler:

   adb -s 127.0.0.1:58526 reverse tcp:8081 tcp:8081

4. Jalankan aplikasi:

   npm run android

3. Perintah Utama (Scripts)

Perintah	Fungsi
npm start	Menjalankan Metro bundler
npm run start:reset	Menjalankan Metro bundler dengan reset cache
npm run android	Mengompilasi dan menginstal aplikasi ke Android / WSA
npm run ios	Menjalankan aplikasi di iOS Simulator (macOS)
npm run lint	Menjalankan Oxlint super cepat (0.2 detik)
npm run typecheck	Menjalankan pemeriksaan tipe TypeScript (tsc --noEmit)

---

📖 Panduan Penggunaan & Path Aliasing

1. Flat Imports

Gunakan alias yang sudah dikonfigurasi di tsconfig.json & babel.config.js:

// UI & Layout
import { Button } from '@/components/common/Button';
import { ScreenWrapper } from '@/components/common/ScreenWrapper';

// Schemas & Services
import { loginSchema, LoginFormData } from '@/schemas/authSchema';
import { usePosts } from '@/services/postService';
import { authService } from '@/services/authService';

// State & Utilities
import { useAuthStore } from '@/store/useAuthStore';
import { getLogger } from '@/utils/logger';

const logger = getLogger('PaymentModule');

---

2. Validasi Form dengan Zod & Hook Form

import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { loginSchema, LoginFormData } from '@/schemas/authSchema';

const { control, handleSubmit, formState: { errors } } = useForm<LoginFormData>({
  resolver: zodResolver(loginSchema),
});

const onSubmit = (data: LoginFormData) => {
  console.log('Validated Data:', data);
};

---

3. Structured Logging dengan react-native-logs

import { log, getLogger } from '@/utils/logger';

// 1. Root log
log.info('Aplikasi dimulai');

// 2. Custom namespace log untuk module apa saja
const checkoutLogger = getLogger('CHECKOUT');
checkoutLogger.info('Transaksi berhasil', { orderId: 'TRX-123' });
checkoutLogger.error('Pembayaran gagal', { reason: 'insufficient_funds' });

---

🛡️ Keunggulan Arsitektur:

• ✅ Clean Separation of Concerns: Folder schemas/ dan services/ terpusat, mempermudah integrasi API dan reuse validasi di seluruh aplikasi.
• ✅ Lightning-Fast Tooling: Menggunakan Oxlint berbasis Rust untuk pemeriksaan kode instan.
• ✅ Zero Barrel Overhead: Performa Metro bundler lebih cepat dan bebas circular dependency.
• ✅ Strict Type Checking: TypeScript 100% tervalidasi bebas error.