React Native - Cara Pakai Switch

Halo semuanya, di posting kali ini kita akan belajar lagi menggunakan react native. Kali ini, kita akan menggunakan switch sebagai salah satu pilihan user input.

Switch adalah komponen yang berbentuk seperti saklar. Komponen ini memungkinkan user untuk mengubah nilai tertentu secara mudah. Nilai yang bisa didapatkan dari komponen ini bertipe data boolean, atau true/false. Switch merupakan komponen salah satu core component yang ada di react native.

Sebelum masuk ke codingnya, saya akan jelaskan secara singkat environment yang saya gunakan. Di project kali ini, saya akan menggunakan react native versi 0.67.3. React native nya di compile menggunakan komputer dengan OS Windows 10.

Untuk dapat menggunakan switch, caranya cukup mudah, kita bisa tambahkan snippet dibawah ini di coding kita. Untuk bagian import switch, letakkan di bagian atas. Sedangkan untuk komponen switch, kita bisa langsung letakkan di tempat yang dibutuhkan. Untuk penjelasan lengkap tentang switch, bisa langsung liat di dokumentasi officialnya aja ya. Linknya disini.

import { Switch } from 'react-native';

 

<Switch

  trackColor={{ false: "#767577", true: "#81b0ff" }}

  thumbColor={flag ? "#f5dd4b" : "#f4f3f4"}

  ios_backgroundColor="#3e3e3e"

  onValueChange={() => {

    setFlag(previousState => !previousState)

  }}

  value={flag}

/>

Berikut ini adalah project sederhana dan penampakan dari tombol switch yang kita buat.

import React, { useState } from 'react';

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

const App = () => {

  const [flag, setFlag] = useState(false);

  return (

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

      <Text style={{paddingTop: 50, fontWeight: '500'}}>

        Sudah cukup umur?

      </Text>

      <Switch

        trackColor={{ false: "#767577", true: "#81b0ff" }}

        thumbColor={flag ? "#f5dd4b" : "#f4f3f4"}

        ios_backgroundColor="#3e3e3e"

        onValueChange={() => {

          setFlag(previousState => !previousState)

        }}

        value={flag}

      />

      <Text style={{paddingTop: 50}}>{flag.toString()}</Text>

    </View>

  );

}

export default App;

Hasilnya bisa dilihat seperti:

Sekian posting kali ini, tentang cara pakai switch. Mudah banget kan? Semoga teman-teman bisa terbantu dengan postingan kali ini. Selamat membaca dan mencoba.

Salam Share,

Funtastic Share