Belajar React Native #5 : Tampilan Tambah Data

React Native

Tampilan Tambah Data

Pada part ke 5 ini saya akan membuat tampilan tambah data untuk persiapan dalam CRUD nanti.

1. Siapkan Bahan yg Diperlukan

Yg pertama kita lakukan adalah siapkan bahan  yg diperlukan untuk membuat sebuah tampilan. Disini saya membutuhkan sebuah button, form, icon/logo. Untuk button dan form kita dapat memanggil lagi function yg sudah kita buat sebelumnya pada component yaitu pada FormInput.js dan FormButton.js yg dapat kalian lihat lagi pada part #4. 

Setelah itu kita membutuhkan icon/logo untuk menunjang tampilan app kita, untuk itu kita perlu menginstall react-native-vector-icons pada project kita. Cara installnya dapat anda hanya tinggal npm i react-native-vector-icons apabila memakai npm atau yarn add react-native-vector-icons jika menggunakan yarn, seperti yg tertulis di halaman ini. Mengapa kita memakai react-native-vector-icons ini? Karena didalamnya sudah tersimpan juga banyak package icons yg tersedia, anda dapat melihatnya pada https://oblador.github.io/react-native-vector-icons/.

Jadi saya merubah beberapa coding untuk mengganti logo/icon pada function forminput saya seperti dibawah ini.

Jadi pada form input saya kali ini, saya memakai fontawesome5 karena memiliki banyak icon/logo yg dapat dipakai.

2. Ubah Tampilan HomeScreen

Lalu ubahlah  tampilan homescreen yg dulunya seperti gambar dibawah ini.

Menjadi seperti ini 

Disini saya memindahkan button logout ke header sebelah kanan dengan merubah coding pada AppStack.js seperti gambar dibawah ini

Disini saya menambahkan 2 import baru, yg pertama untuk navigate ke halaman tambah data nanti dan yg kedua untuk icon logout.

lalu saya juga memindahkan AuthContext logout yg ada di HomeScreen ke AppStack.js.

Lalu pada bagian stack navigator saya menambahkan beberapa coding seperti gambar diatas.

Setelah itu saya menampilkan dulu sementara pesan selamat datang dan user email yg login pada app yg nantinya mungkin akan dibutuhkan dan juga sebuah icon tambah untuk menampilkan form Tambah Data. Saya merubah HomeScreen.js saya menjadi seperti gambar dibawah ini.

3. Buat Tampilan Tambah Data

Buatlah sebuah file bernama AddScreen berisikan coding dibawah ini dan simpan pada folder screens.

untuk form diatas masih berupa sebuah tampilan karena nantinya saya akan membuat data yg dimasukan pada form diatas untuk disimpan pada database firebase. Dan untuk stylenya dapat disamakan seperti style pada SignUpScreen.js.

Jadi hasil outputnya akan seperti ini.

Terlihat disana ada sebuah data user berupa email yg telah login. Apabila ingin logout anda dapat menekan icon pada header sebelah kanan dan apabila anda ingin menambahkan data nantinya anda dapat menekan tombol plus dibawah kanan yg membawa anda ke halaman form seperti gambar dibawah ini.

Itu saja untuk part #5 yg merupakan pembuatan tampilan tambah data untuk persiapan crud firebase nantinya.

~ Terima Kasih sudah melihat konten ini semoga bermanfaat, maaf apabila ada kesalahan dan kekurangan. ~