GALIH L. PRAKOSO

Tentunya untuk membangun sebuah aplikasi kita butuh component yang berguna untuk menerima input dari pengguna. Nah, kali ini aku akan menggunakan salah satu dari component yang memungkinkan pengguna untuk dapat memasukkan input berupa teks. Kita akan menggunakan salah satu component bawaan React Native yaitu TextInput.

Kita menambahkan TextInput yang nantinya bisa kita gunakan untuk menambahkan data pahlawan yang sudah kita buat sebelumnya. Namun pada tutorial kali ini kita hanya akan fokus untuk membahas TextInput-nya saja.

Seperti biasa, langsung saja buka file App.js dan ubah kodenya menjadi seperti di bawah ini. Perhatikan secara detail karena pada bagian kali ini banyak sekali perubahan yang harus di lakukan. Aku udah sertakan komentar yang berisi penjelasan mengenai baris kode yang ditambahkan.

Pada tutorial kali ini kita menggunakan beberapa komponen baru yaitu FlatList, TextInput, TouchableOpacity dan KeyboardAvoidingView.

FlatList berguna untuk menampilkan list data. Pada tutorial kali ini FlatList kita gunakan untuk menampilkan data pahlawan yang kita simpan di dalam state.

TextInput berguna untuk menampilkan input berupa teks dimana pengguna dapat memasukkan input untuk menambahkan nama dan asal pahlawan.

TouchableOpacity berguna untuk membuat tombol yang ketika di tekan akan mengeksekusi fungsi untuk menambahkan data pahlawan ke dalam daftar pahlawan yang kita simpan di dalam state. TouchableOpacity sebenarnya adalah component yang ketika ditekan akan memberikan efek menghilang. atau opacity nya berkurang. Sehingga pengguna tahu bahwa tombol yang dia tekan bekerja dengan baik karena tombol tersebut memberikan feedback ketika ditekan. Banyak Touchable lain dalam React Native yang dapat kita gunakan sesuai kebutuhan kita.

KeyboardAvoidingView berguna untuk menghindari soft keyboard ketika pengguna mengetikkan input ke dalam TextInput. Jika tidak menggunakan component ini maka mungkin TextInput kita akan tertutup oleh Keyboard ketika pengguna menginputkan nama dan asal pahlawan.

Wow!, tidak terasa kita sudah hampir menyelesaikan rangkaian Tutorial React Native Dasar ini. Tinggal yang terakhir yaitu bagaimana cara untuk melakukan build agar aplikasi bisa di install di Android atau IOS. Gimana caranya? Silahkan menuju ke tutorial selanjutnya 😁👇

Tutorial React Native Dasar - Bahasa Indonesia - #10 Build