React Native - Cara Ubah Posisi Switch

Halo semuanya, kali ini kita akan mengetahui cara menggeser atau mengubah posisi switch pada react native. Bagi kalian yang belum bisa pakai switch, kalian bisa ikutin cara pakainya di postingan React Native - Cara Pakai Switch atau bisa langsung aja cek dokumentasi officialnya di link ini.

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. Secara default, posisi switch berada di sebelah kanan layar.

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 mengubah posisi switch, yang defaulnya ada di kanan layar, dan akan kita ubah jadi di kiri layar, caranya cukup mudah, yaitu dengan menambahkan komponen view dengan style arah flex baris di luar komponen switch.

<View style={{flexDirection: 'row', marginTop: 15}}>

  <Switch />

</View>

Penampakan coding sederhananya bisa dilihat di bawah

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>

      <View style={{flexDirection: 'row', marginTop: 15}}>

        <Switch

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

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

          ios_backgroundColor="#3e3e3e"

          onValueChange={() => {

            setFlag(previousState => !previousState)

          }}

          value={flag}

        />

      </View>

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

    </View>

  );

}

export default App;

Untuk hasilnya akan tertampilkan seperti berikut:

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