karawaci.kode

2026-06-09 · 7 min

Expo Router vs React Navigation 7 di Aplikasi Indonesia

Klien fintech mid-size Jakarta minta saya rewrite mobile app mereka (~30k MAU, dipakai banyak user dengan device Samsung A12 / Xiaomi Redmi 9). React Navigation 6 mereka sudah outdated, butuh upgrade. Pilihan: Expo Router atau React Navigation 7. Saya prototype keduanya selama 2 minggu.

Setup

Device test (representative Indonesia low-end / mid-range):

  • Samsung Galaxy A12 (4GB RAM, 2020 release, masih dipakai banyak user)
  • Xiaomi Redmi 9 (3GB RAM)
  • iPhone SE 2 (untuk iOS baseline)
  • iPhone 13 (mid-range iOS)

App scope: 24 screen, tab + stack nested, deep link dari WA notification, OAuth callback.

Cold start (app launch to first interactive screen)

React Navigation 7 (linking config manual):

  • Samsung A12: 2.8 detik
  • Redmi 9: 3.4 detik
  • iPhone SE 2: 1.2 detik
  • iPhone 13: 0.8 detik

Expo Router (file-based, typed routes):

  • Samsung A12: 2.6 detik
  • Redmi 9: 3.1 detik
  • iPhone SE 2: 1.1 detik
  • iPhone 13: 0.7 detik

Expo Router ~8% lebih cepat di cold start. Source: less runtime config parsing, lebih banyak resolved at build time.

Untuk user A12 / Redmi 9 (~62% user app klien): 200-300ms saving cold start = perceived “less laggy”.

React Navigation 7:

  • Stack push P50: 95ms (A12), 38ms (iPhone 13)
  • Tab switch P50: 60ms (A12), 22ms (iPhone 13)

Expo Router:

  • Stack push P50: 102ms (A12), 41ms (iPhone 13)
  • Tab switch P50: 65ms (A12), 24ms (iPhone 13)

React Navigation 7 ~5% lebih cepat untuk in-app navigation. Source: less file-system route lookup overhead (Expo Router resolve via dynamic import).

Beda kecil. Untuk single navigation, user tidak feel. Tapi accumulate di session 30+ navigation: noticeable di device A12.

Bundle size

React Navigation 7:

  • JS bundle Android release: 4.2MB (gzipped)
  • IPA size iOS: 38MB

Expo Router:

  • JS bundle Android release: 4.6MB (gzipped, plus typed routes generation)
  • IPA size iOS: 41MB

Expo Router slightly bigger (~10%) karena typed-routes runtime helper + autolink helper. Untuk app di Play Store Indonesia (rata-rata download user 38MB karena banyak yang masih kuota terbatas): 400KB bukan trivial, tapi bukan dealbreaker.

DX (developer experience)

Expo Router menang besar di:

  • File-based routing: tambah screen = tambah file di app/. Otomatis ada di route.
  • Typed routes: TS autocomplete untuk router.push('/profile/[id]').
  • Layout via _layout.tsx: nested layout mudah.
  • Deep link gratis: link myapp://profile/123 otomatis match app/profile/[id].tsx.

React Navigation 7 menang di:

  • Config explicit: easier untuk team yang udah biasa dengan React Navigation philosophy.
  • Library ekosistem: lebih banyak community wrapper (drawer, material-top-tabs, dll).
  • Documentation matang, banyak Stack Overflow yang masih relevan.

Untuk junior dev: Expo Router lebih cepat ramp-up (~2 hari) vs React Navigation 7 (~5 hari). Saya test dengan 1 junior tim klien.

Deep linking & OAuth

Klien butuh OAuth callback dari Mandiri eMoney (Indonesia payment provider). Flow: app → browser OAuth → callback ke app.

Expo Router: setup di app.json scheme + file app/oauth-callback.tsx. Done. 30 menit.

React Navigation 7: setup linking config manual:

const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      OAuthCallback: 'oauth-callback',
    },
  },
};

Plus update di stack navigator. 90 menit. Works equally well, just more boilerplate.

Yang break

  1. Expo Router + reanimated: di Expo SDK 53 ada bug dengan shared element transition antar route. Fix di SDK 54 (saya pakai SDK 53 saat test). Workaround: nested Stack inside Expo Router.

  2. React Navigation 7 + lazy load: bug intermittent saat fast switch antar tab di Android. Tab content kadang blank, harus pull-to-refresh. Fix di 7.0.4.

  3. Build time: Expo Router rebuild typed routes setiap save. Saat hot reload heavy: ~600ms delay tambahan. Saya pakai env EXPO_ROUTER_IMPORT_MODE=lazy untuk dev.

Battery & memory di device low-end

Samsung A12 saat app jalan 30 menit (heavy navigation):

  • React Navigation 7: 12% baterai consumed, RAM peak 380MB
  • Expo Router: 13% baterai consumed, RAM peak 410MB

Expo Router 1-3% lebih demanding. Untuk user yang harian 4-6 jam di app: bisa relevant. Untuk app klien saya yang average session 8 menit: irrelevant.

Cost migration

React Navigation 6 → 7: kebanyakan straight upgrade. ~3 hari refactor untuk 24 screen.

React Navigation 6 → Expo Router: rewrite routing layer fully. Saya butuh 6 hari untuk 24 screen.

Klien fintech budget Rp 4jt/hari engineer rate: pilihan React Navigation 7 saving Rp 12jt di migrasi.

Verdict untuk klien fintech Jakarta

Saya rekomendasi React Navigation 7. Reasoning:

  1. Migration cost lebih murah (sudah pakai React Navigation 6).
  2. Navigate latency in-app lebih bagus di device A12 (60% target user).
  3. Library ekosistem yang klien sudah depend (custom drawer dari community lib) belum tested ke Expo Router pattern.

Klien setuju, kita commit React Navigation 7.

Kapan saya pilih Expo Router

Saya akan pilih Expo Router untuk:

  • Greenfield project full-Expo stack
  • Team junior heavy (DX gain lebih besar dari technical trade-off)
  • App dengan banyak deep link / sharing URL feature
  • Web + native (Expo Router support web routing serupa)

Untuk legacy migration dari React Navigation 6 + ekosistem custom: React Navigation 7 lebih praktis. Saya kasih klien data ini bukan opini personal.

Bukan magic — keduanya solid. Pilih berdasarkan context project + tim, bukan hype social media.

Ditulis oleh Reza Pradipta