git:20260720.7cc4fe8 to git:20260726.d6ae918

44 added, 52 removed. Audit A to A.

---

name: mobile-expo-expert

- description: "Expert guide for React Native and Expo development. Covers cross-platform mobile architecture, OTA updates, and native modules / Panduan ahli pengembangan React Native dan Expo untuk aplikasi mobile."

+ description: "Expert guide for React Native 0.76+ and Expo SDK 52+ development. Covers cross-platform mobile architecture, Expo Router v4, New Architecture, OTA updates, and native modules / Panduan ahli pengembangan React Native 0.76+ dan Expo SDK 52+ untuk aplikasi mobile."

author: "Roedy Rustam"

---

- # Mobile Expo Expert

+ # Mobile Expo Expert (SDK 52+ / RN 0.76+ Edition)

[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

---

## English

### Description

- This skill provides best practices for building production-ready, cross-platform mobile applications (iOS and Android) using **React Native** and the **Expo** framework. It bridges the gap between web development and native mobile architecture.

+ Best practices for building production-ready, cross-platform mobile applications (iOS, Android, Web) using **React Native (0.76+)** with **Expo SDK 52+**. Embraces the New Architecture (Fabric renderer & TurboModules enabled by default), Expo Router v4, and Expo Application Services (EAS).

### Trigger Conditions

- - Starting a new mobile app project using Expo.

- - Migrating a web app to a mobile app.

- - Implementing file-based routing with Expo Router.

- - Setting up Over-The-Air (OTA) updates (Expo EAS Update).

- - Building native modules via Expo Modules API.

- - Implementing Push Notifications.

+ - Starting or upgrading a mobile app project to Expo SDK 52+ / React Native 0.76+.

+ - Implementing file-based routing with Expo Router v4.

+ - Migrating to or troubleshooting React Native's New Architecture (Fabric/TurboModules).

+ - Setting up Over-The-Air (OTA) updates via EAS Update.

+ - Building custom native modules via Expo Modules API (Swift & Kotlin).

+ - Implementing push notifications, background tasks, and biometric auth.

### Core Architecture Guidelines

- #### 1. Routing (Expo Router)

- Always use **Expo Router** for navigation. It brings file-based routing (similar to Next.js App Router) to React Native.

- - Use `app/(tabs)` for tab-based navigation.

- - Use `_layout.tsx` to define shared headers or wrapping providers.

- - Use dynamic routes (e.g., `app/user/[id].tsx`) for deep linking. Deep linking works out of the box with Expo Router.

+ #### 1. React Native New Architecture (Default in Expo SDK 52+)

+ - The **New Architecture** (Fabric + TurboModules + C++ core) is enabled by default. Avoid legacy bridge-dependent packages.

+ - Use concurrent React features (`useTransition`, `useDeferredValue`) safely within native views.

- #### 2. Build & Deployment (EAS)

- Do not build locally using XCode/Android Studio unless absolutely necessary. Use **Expo Application Services (EAS)**:

- - **EAS Build**: Compiles your app in the cloud for both iOS and Android.

- - **EAS Update**: Enables Over-The-Air (OTA) updates to fix bugs instantly without going through App Store review processes (for JS/asset changes only).

- - **EAS Submit**: Automates submission to the App Store and Google Play.

+ #### 2. File-Based Routing (Expo Router v4)

+ - Use `app/(tabs)` for tab navigation and `app/(auth)` for auth flows.

+ - Use `_layout.tsx` to define shared headers, stacks, and context providers.

+ - Handle universal deep linking natively using dynamic route parameters (`app/user/[id].tsx`).

- #### 3. State Management & Data Fetching

- Mobile network connectivity is notoriously flaky.

- - Use **TanStack Query (React Query)** or **WatermelonDB** for data fetching and offline caching.

- - Ensure the app provides an "Offline First" experience (or at least graceful degradation when the network drops).

+ #### 3. Styling & Modern UI Systems

+ - **NativeWind (v4)**: Use Tailwind CSS utility tokens directly in React Native components.

+ - **Safe Area & Keyboard**: Wrap screens in `SafeAreaView` and use `KeyboardAvoidingView` or `react-native-keyboard-controller` to handle software keyboards smoothly.

- #### 4. Styling and UI

- - Use **NativeWind** (Tailwind CSS for React Native) to share design tokens between your web platform and mobile app.

- - Respect Safe Area Boundaries (`SafeAreaView`) to avoid notches, dynamic islands, and home indicators.

- - Use `KeyboardAvoidingView` to ensure input fields are not hidden by the on-screen keyboard.

+ #### 4. Build, Distribution & OTA Updates (EAS)

+ - **EAS Build**: Cross-compile native builds in the cloud.

+ - **EAS Update**: Ship instant JS/asset patches Over-The-Air without waiting for App Store / Play Store reviews.

+ - **EAS Submit**: Automate store submission pipelines.

---

## Bahasa Indonesia

### Deskripsi

- Skill ini memberikan praktik terbaik untuk membangun aplikasi *mobile cross-platform* (iOS dan Android) yang siap produksi menggunakan **React Native** dan kerangka kerja **Expo**. Skill ini menjembatani pengembangan web dengan arsitektur *native mobile*.

+ Praktik terbaik untuk membangun aplikasi seluler *cross-platform* (iOS, Android, Web) yang siap produksi menggunakan **React Native (0.76+)** dan **Expo SDK 52+**. Mengadopsi Arsitektur Baru (renderer Fabric & TurboModules yang aktif secara default), Expo Router v4, serta Expo Application Services (EAS).

### Kondisi Pemicu

- - Memulai proyek aplikasi seluler baru menggunakan Expo.

- - Memigrasikan aplikasi web menjadi aplikasi *mobile*.

- - Mengimplementasikan routing berbasis file dengan **Expo Router**.

- - Mengatur pembaruan langsung (*Over-The-Air* / OTA) via Expo EAS Update.

- - Membangun modul *native* via Expo Modules API.

- - Menerapkan *Push Notifications*.

+ - Memulai atau memperbarui proyek mobile ke Expo SDK 52+ / React Native 0.76+.

+ - Mengimplementasikan routing berbasis file dengan Expo Router v4.

+ - Mengkonfigurasi Arsitektur Baru React Native (Fabric / TurboModules).

+ - Mengatur pembaruan langsung (*Over-The-Air* / OTA) via EAS Update.

+ - Membangun modul native kustom via Expo Modules API (Swift & Kotlin).

+ - Menerapkan *push notifications*, *background tasks*, dan autentikasi biometrik.

### Panduan Arsitektur Inti

- #### 1. Perutean (Expo Router)

- Selalu gunakan **Expo Router** untuk navigasi. Alat ini membawa konsep *file-based routing* (seperti Next.js) ke ekosistem React Native.

- - Gunakan `app/(tabs)` untuk navigasi berbasis tab.

- - Gunakan `_layout.tsx` untuk mendefinisikan *header* bersama atau penyedia (*providers*).

- - Gunakan rute dinamis (mis., `app/user/[id].tsx`) untuk dukungan *deep linking* yang langsung aktif secara otomatis.

+ #### 1. Arsitektur Baru React Native (Default di Expo SDK 52+)

+ - **Arsitektur Baru** (Fabric + TurboModules) aktif secara otomatis. Hindari paket lama yang masih bergantung pada *legacy bridge*.

+ - Gunakan fitur konkurensi React (`useTransition`, `useDeferredValue`) dengan aman di komponen native.

- #### 2. Build & Deployment (EAS)

- Jangan melakukan *build* secara lokal menggunakan XCode/Android Studio kecuali terpaksa. Gunakan **Expo Application Services (EAS)**:

- - **EAS Build**: Mengkompilasi aplikasi Anda di *cloud* untuk iOS dan Android.

- - **EAS Update**: Memungkinkan pembaruan *Over-The-Air* (OTA) untuk memperbaiki bug secara instan tanpa perlu melewati proses peninjauan App Store (khusus untuk perubahan JS/aset).

- - **EAS Submit**: Mengotomatiskan pengiriman (*submission*) ke App Store dan Google Play.

+ #### 2. Perutean Berbasis File (Expo Router v4)

+ - Gunakan `app/(tabs)` untuk navigasi tab dan `app/(auth)` untuk alur autentikasi.

+ - Gunakan `_layout.tsx` untuk mendefinisikan *header* bersama, tumpukan navigasi (*stack*), dan penyedia konteks.

+ - Kelola *universal deep linking* secara otomatis via rute dinamis (`app/user/[id].tsx`).

- #### 3. Manajemen State & Pengambilan Data

- Konektivitas jaringan seluler sering kali tidak stabil.

- - Gunakan **TanStack Query (React Query)** atau **WatermelonDB** untuk pengambilan data dan *caching* offline.

- - Pastikan aplikasi memberikan pengalaman *"Offline First"* (atau setidaknya tidak *crash* dengan elegan saat koneksi jaringan terputus).

+ #### 3. Styling & UI System Modern

+ - **NativeWind (v4)**: Gunakan utilitas Tailwind CSS langsung di komponen React Native.

+ - **Area Aman & Keyboard**: Bungkus layar dengan `SafeAreaView` dan gunakan `KeyboardAvoidingView` agar bidang input tidak tertutup keyboard.

- #### 4. Styling dan Antarmuka (UI)

- - Gunakan **NativeWind** (Tailwind CSS untuk React Native) untuk menggunakan sistem desain yang sama antara web dan aplikasi mobile Anda.

- - Hormati Batas Area Aman (`SafeAreaView`) untuk menghindari potongan layar (*notches*), *dynamic islands*, dan indikator *home*.

- - Gunakan `KeyboardAvoidingView` untuk memastikan kolom input tidak tertutup oleh *keyboard* virtual.

+ #### 4. Build, Distribusi & OTA Updates (EAS)

+ - **EAS Build**: Kompilasi build native di *cloud*.

+ - **EAS Update**: Rilis perbaikan bug instan tanpa perlu menunggu proses tinjauan App Store / Google Play.

+ - **EAS Submit**: Otomatiskan alur pengiriman ke toko aplikasi.