Latar Belakang

Sistem navigasi adalah kerangka yang menghubungkan semua layar dalam aplikasi menjadi satu kesatuan yang kohesif. Navigasi yang diimplementasikan dengan baik memastikan pengguna dapat berpindah antar layar secara intuitif dan efisien, sementara navigasi yang buruk dapat membuat pengguna tersesat dan frustrasi.
Pada aplikasi NexusPay, sistem navigasi harus mampu menangani berbagai skenario kompleks, mulai dari navigasi normal antar fitur, deep linking untuk membuka layar tertentu dari notifikasi, hingga penanganan navigasi saat proses autentikasi belum selesai. React Navigation adalah library yang digunakan untuk mengimplementasikan semua kebutuhan navigasi ini.

Pengertian dan Konsep

React Navigation adalah library navigasi yang paling banyak digunakan dalam ekosistem React Native. Library ini menyediakan berbagai jenis navigator yang dapat dikombinasikan untuk membangun sistem navigasi yang kompleks.
Stack Navigator adalah navigator yang mengelola tumpukan layar. Saat pengguna berpindah ke layar baru, layar tersebut ditambahkan ke atas tumpukan. Tombol kembali akan menghapus layar teratas dan menampilkan layar di bawahnya.
Bottom Tab Navigator adalah navigator yang menampilkan menu tab di bagian bawah layar. Setiap tab memiliki stack navigasinya sendiri sehingga pengguna dapat berpindah antar tab tanpa kehilangan posisi navigasi di setiap tab.
Drawer Navigator adalah navigator yang menampilkan menu samping yang dapat ditarik dari tepi layar. Biasanya digunakan untuk fitur-fitur sekunder yang tidak memerlukan akses cepat.
Modal Presentation adalah teknik menampilkan layar sebagai overlay di atas layar aktif, biasanya digunakan untuk dialog konfirmasi, form sederhana, atau pesan penting.
Deep Linking adalah kemampuan aplikasi untuk membuka layar tertentu langsung dari URL eksternal, seperti link dalam notifikasi push atau pesan SMS.

Pembahasan

Arsitektur navigasi NexusPay distrukturkan dalam beberapa lapisan. Lapisan terluar adalah Root Navigator yang menentukan apakah pengguna diarahkan ke Auth Navigator atau Main Navigator berdasarkan status autentikasi.
Auth Navigator menggunakan Stack Navigator yang mencakup layar Splash Screen, Onboarding, Login, Register, dan Verifikasi OTP. Setelah autentikasi berhasil, pengguna diarahkan ke Main Navigator dan Auth Navigator dihapus dari tumpukan sehingga pengguna tidak bisa kembali ke layar login dengan tombol kembali.
Main Navigator menggunakan Bottom Tab Navigator dengan lima tab yaitu Beranda, Bayar, Riwayat, Dompet, dan Profil. Setiap tab memiliki Stack Navigator-nya sendiri untuk mengelola navigasi di dalam tab tersebut.
Tab Bayar memiliki Stack Navigator dengan alur yang lebih kompleks yaitu Home Payment, pilih jumlah, konfirmasi, NFC aktif, dan hasil. Layar NFC aktif dikonfigurasi untuk menonaktifkan gestur swipe back guna mencegah pengguna membatalkan proses tap secara tidak sengaja.
Implementasi navigasi menggunakan TypeScript dengan mendefinisikan tipe untuk setiap stack navigator. Ini memastikan bahwa saat berpindah ke layar tertentu, parameter yang dibutuhkan layar tersebut harus dikirimkan dengan tipe yang benar, mencegah bug tipe data pada runtime.
Animasi transisi antara layar dikonfigurasi menggunakan cardStyleInterpolator dari library React Navigation. Transisi default yang digunakan adalah slide from right untuk Stack Navigator dan fade untuk Modal. Transisi yang konsisten menciptakan pengalaman yang mulus dan profesional.
Header navigasi dikustomisasi untuk setiap stack menggunakan properti screenOptions. Header custom dibuat sebagai komponen terpisah yang mendukung judul, tombol kembali dengan ikon kustom, dan ikon aksi di sisi kanan.

Dokumentasi Pembelajaran

Pembelajaran berfokus pada dokumentasi resmi React Navigation dan pemahaman tentang perbedaan versi library tersebut. Dipelajari pula konsep navigation state yang merupakan objek yang merepresentasikan kondisi navigasi saat ini, termasuk tab aktif, layar dalam tumpukan, dan parameter setiap layar.
Konsep navigation lifecycle dipelajari untuk memahami kapan komponen layar di-mount dan di-unmount saat navigasi terjadi. Ini penting untuk mengelola side effects seperti pembacaan data yang harus dilakukan saat layar menjadi aktif.
Implementasi deep linking dikonfigurasi dalam file linking.ts yang mendefinisikan pemetaan antara URL eksternal dan layar yang harus ditampilkan.

Dokumentasi Pengerjaan Desain

Diagram arsitektur navigasi dibuat menggunakan figma untuk mendokumentasikan struktur navigator secara visual. Diagram ini menjadi referensi bersama antara tim desain dan tim pengembang.
Setiap transisi navigasi diuji pada emulator iOS dan Android untuk memastikan animasi berjalan mulus di kedua platform. Penyesuaian dilakukan untuk beberapa transisi yang terlihat berbeda antara platform.

Kesimpulan

Sistem navigasi NexusPay yang dibangun menggunakan React Navigation dengan arsitektur berlapis berhasil menangani semua skenario navigasi yang dibutuhkan, dari alur autentikasi hingga alur pembayaran NFC yang kompleks. Penggunaan TypeScript dalam konfigurasi navigasi meningkatkan keandalan kode dengan memberikan keamanan tipe yang mencegah bug navigasi yang umum terjadi.

Daftar Pustaka

React Navigation. (2023). React Navigation Documentation v6. https://reactnavigation.org/docs/getting-started
React Native. (2023). Navigation Fundamentals. https://reactnative.dev/docs/navigation
Masiello, E., & Friedmann, J. (2017). Mastering React Native. Packt Publishing.
React Navigation. (2023). Deep Linking Guide. https://reactnavigation.org/docs/deep-linking
Expo Inc. (2023). Expo Router Documentation. https://expo.github.io/router/