A Simple Todo List App Using React Native Expo, Firebase Authentication & Cloud Firestore (Part 2 – Splash Screen Setup)

Created by: Anisa Damayanti, S.Kom.
For Study Purpose Only!

Setelah project React Native Expo berhasil dibuat dan dikonfigurasi pada Part 1, pada bagian ini kita akan mulai membuat tampilan awal aplikasi My Todolist Gue.

Ketika sebuah aplikasi dibuka, biasanya terdapat tampilan yang muncul beberapa saat sebelum pengguna masuk ke halaman utama. Tampilan tersebut disebut Splash Screen.

Pada tutorial kali ini, kita akan membuat Splash Screen sederhana menggunakan logo aplikasi dan animasi sederhana. Splash Screen akan ditampilkan ketika aplikasi pertama kali dijalankan, kemudian setelah beberapa detik aplikasi akan melanjutkan ke halaman berikutnya.

A. Persiapan Tools

• Pada VSCode pastikan sudah membuka folder project yang sudah berhasil diinstall sebelumnya

• Pastikan pada Terminal VSCode sudah mengarahkan root folder project my-todolist-gue

B. Langkah-langkah Pengaturan Halaman Splash

Persiapan Assets, Components, & Apps

Assets

• Bukalah folder assets
• Persiapkan 1 file gambar logo dan masukkan ke dalam folder assets

• Buatlah file baru bernama styles.js di dalam folder assets

• Kemudian isi file styles.js dengan paragraf script berikut lalu simpan

Components

• Buatlah folder baru bernama components di dalam folder my-todolist-gue
• Kemudian buatlah file baru bernama SplashScreen.js di dalam folder components

• Kemudian isi file SplashScreen.js dengan paragraf script berikut lalu simpan

Apps

• Bukalah file bernama Apps.js di dalam folder my-todolist-gue
• Kemudian ubah isi file Apps.js

• Selanjutnya me-running project dengan menjalankan perintah: npx expo start -c, lalu tekan Enter

• Kemudian buka aplikasi Expo Go di device Android/iOS, disarankan untuk login dengan akun Expo yang sama seperti login di terminal dan menggunakan sinyal internet yang sama antara komputer/laptop dengan device

• Pada Web Browser seperti Chrome, Chrome Developer, Mozilla Firefox ataupun Microsoft Edge membuka url berikut: http://localhost:8081