React Native - Cara Pakai Checkbox

Halo semuanya... Di postingan kali ini, kita akan menggunakan komponen checkbox. Checkbox merupakan salah satu input yang bisa digunakan oleh user untuk memberikan nilai boolean (iya atau tidak). Group checkbox biasanya digunakan untuk pilihan yang bisa lebih dari satu dan boleh tidak diisi.

Sebelum masuk ke codingnya, saya akan menjelaskan singkat tentang alat yang dipakai. Aplikasi yang akan dibuat adalah aplikasi android. Aplikasi dibuat menggunakan React Native dengan versi 0.67.3. Dependencies yang digunakan untuk membuat checkbox adalah @react-native-community/checkbox (versi yang digunakan 0.5.16). Program di compile menggunakan PC dengan OS Windows 10.

Untuk menginstall dependencies checkbox, lakukan command berikut:

npm install @react-native-community/checkbox --save

Kita akan membuat tiga buah checkbox yang memberikan informasi pendidikan yang sudah ditempuh dan menampilkan hasil checkbox di bawahnya. Langsung aja lanjut ke coding cara menggunakan checkbox.

import React from 'react';

import { View, Text } from 'react-native';

import CheckBox from '@react-native-community/checkbox';

const App = () => {

 

  const [sd, setSd] = React.useState(false);

  const [smp, setSmp] = React.useState(false);

  const [sma, setSma] = React.useState(false);

  return (

    <View style={{marginRight: 10, marginLeft: 10, marginTop: 25}}>

      <Text>Jalur pendidikan yang sudah ditempuh:</Text>

      <View style={{flexDirection: 'row'}}>

        <CheckBox value={sd} onValueChange={(newValue) => setSd(newValue)}/>

        <Text style={{paddingTop: 5}}>SD</Text>

      </View>

      <View style={{flexDirection: 'row'}}>

        <CheckBox value={smp} onValueChange={(newValue) => setSmp(newValue)} />

        <Text style={{paddingTop: 5}}>SMP</Text>

      </View>

      <View style={{flexDirection: 'row'}}>

        <CheckBox value={sma} onValueChange={(newValue) => setSma(newValue)} />

        <Text style={{paddingTop: 5}}>SMA</Text>

      </View>

      <View style={{marginTop: 25}}>

        <Text>Selesai SD: {sd ? 'Iya' : 'Tidak'}</Text>

        <Text>Selesai SMP: {smp ? 'Iya' : 'Tidak'}</Text>

        <Text>Selesai SMA: {sma ? 'Iya' : 'Tidak'}</Text>

      </View>

    </View>

  );

}

export default App;

Berikut adalah tampilan hasilnya:

 

Secara default, penggunaan checkbox adalah seperti diatas. Tentunya ketika kita membuat aplikasi aslinya, akan terdapat proteksi-proteksi tambahan, misalnya seperti tidak boleh pilih lebih dari satu atau lain sebagainya. Mengenai hal ini, dependencies yang digunakan ini belum support untuk  kebutuhan tersebut. Sehingga masih harus di kelola secara manual. Untuk contoh penambahan proteksi checkbox group bisa dilihat di postingan React Native - Cara Tambah Proteksi Checkbox Group.

Sekian untuk postingan kali ini. Mudah sekali kan cara menggunakan checkbox di React Native. Semoga kalian semua terbantu dengan tutorial ini. Selamat membaca dan mencoba.

Salam Share,

Funtastic Share