React Native - Cara Buat Fungsi Hide/Show Password

Halo semuanya. Di postingkan kali ini, kita akan membuat cara agar bisa hide dan show inputan password. Fungsi hide dan show password tentunya lazim digunakan di aplikasi untuk membantu pengguna aplikasi agar dapat memeriksa ulang password atau data sensitif lainnya (misal pin) yang sudah diinput sebelum melakukan aksi selanjutnya.

Di tutorial ini, saya menggunakan react native versi 0.67.3. React native nya di compile menggunakan komputer dengan OS Windows 10. Dan menggunakan tambahan package react-native-vector-icons (versi 9.2.0) untuk icon. Kalian bisa lihat tentang cara pakai package tersebut di postingan React Native - Cara Pakai Vector Icons. 

Kita akan membuat sebuah inputan password. Di samping input tersebut akan terdapat icon mata yang berfungsi untuk melihat password. Ketika icon tersebut ditekan, maka icon mata akan berubah menjadi icon mata coret dan inputan password akan terlihat. Berikut adalah coding untuk mengimplementasikan hal tersebut.

import React from 'react';

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

import Icon from 'react-native-vector-icons/FontAwesome';

const App = () => {

 

  const [password, setPassword] = React.useState('');

  const [showPw, setShowPw] = React.useState(false);

  return (

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

      <Text>Password</Text>

      <View style={{

        flexDirection: 'row', borderColor: 'grey', borderWidth: 1,

        paddingLeft: 10, paddingRight: 10}}>

        <TextInput

          onChangeText={text => { setPassword(text) }}

          value={password}

          secureTextEntry={showPw ? false : true}

          autoCapitalize='none'

          style={{flex: 1}}

        />

        <Icon style={{paddingTop: 15, marginLeft: 15}}

          name={showPw ? "eye-slash" : "eye"}

          size={18}

          onPress={() => {setShowPw(!showPw)}}/>

      </View>

    </View>

  );

}

export default App;

 

Untuk melihat varian icon yang ada pada package react-native-vector-icons bisa cek di disini. Sekian tutorial cara membuat hide dan show input password. Semoga membantu. Selamat membaca dan mencoba.

Salam Share,

Funtastic Share