Cara Membuat Tombol Select Pada React Native Menggunakan Picker

 

*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


Comments

Video Baru!