mobile-expo-expert

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.
author	Roedy Rustam

Mobile Expo Expert

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

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.

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.

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.

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

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.

---

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.

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.

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.

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.

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

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.