 | |||
| *Picker |
Pada postingan kali ini kita akan membuat dropdown list atau select pada React Native. Dalam pembuatanya, ternyata tidak semudah memberikan tag tag tertentu seperti HTML. Ada package yang harus kita instal yaitu React Native Picker
Kalian bisa melihat dokumentasi seputar React Native Picker ini disini
Syntax
Props
Ada beberapa props dalam React Native Picker yang bisa kita manfaatkan. Props ini hanya bisa digunakan pada tag <Picker/>. Selebihnya kalian bisa melihat di dokumentasi yang sudah disematkan yaa
- enabled. Jika bernilai false maka pengguna tidak bisa memilih
- itemStyle. Untuk mengubah tampilan pada label
- mode. Untuk menentukan manakan item yang bisa ditampilkan
- onValueChanged. Sebuah callback function ketika dipilih maka Select akan menampilkan nilai yang kita pilih
- prompt. Judul dari dialog box dan hanya berfungsi pada Android
- selectedValue. Nilai yang ditampilkan
- style. Untuk mengubah tampilan dari Picker kita
- testID. Digunakan untuk melokasikan tampilan dalam end-to-end test
Ayo Kita Mulai!
Biasanya saya akan membuat Select ini ke dalam component tersendiri yang disebut atoms. Ini merupakan penerapan dari prinsip Atomic Design yang pernah saya jelaskan disini
Install packagenya terlebih dahulu
npm install @react-native-picker/picker --save
Langkah 1: Buat folder Select berisi index.js. Lalu tulis kode berikut.
Kalian bisa meng-copy sebagian kode diatas dari dokumentasinya dari Github.
Untuk versi terbarunya ini (karena course yang saya ikuti masih menggunakan react-native-community), jangan lupa tambahkan useState. Untuk menginisiasi value pertama dari semua pilihan kita dari SelectBox kita.
Isikan useState dengan value yang sudah ada. Agar ia bisa ditampilkan sebagai data pertama kali yang muncul dari Picker
Langkah 2: Gunakan Select dengan mengimportnya. Disana tertulis import ke dalam ../../components karena saya sudah menerapkan prinsip Atomic Design
Sebenarnya kalian juga bisa mengimportnya langsung dari file index.js
Baca Juga: Berkenalan Terlebih Dahulu Apa Itu Atomic Design Sebelum Membuat Aplikasi Mobile Dengan React Native
Hasilnya
Kalian bisa menambahkan nilai nilai/pilihan pilihan dalam Select Box ini.
Ikuti Serial Belajar React Native Di Sini!
Kesimpulan
Diperlukan sedikit pemahaman State Management menggunakan useState untuk menggunakan Picker. Agar setiap data yang kita pilih bisa muncul dalam sebuah Picker. Oiya, dalam pembuatanya pun ternyata dibutuhkan package tersendiri bernama react-native-picker
