"Password Input show hide react native"
Bootstrap 4.1.1 Snippet by RachnaKhatnawlia

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
//import liraries
import React, { useState } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
import colors from '../styles/colors';
import fontFamily from '../styles/fontFamily';
import { moderateScale, moderateScaleVertical, textScale } from '../styles/responsiveSize';
// create a component
const PasswordInput = ({
placeholderTxt,
inputContainer,
input,
onChangeTxt,
value
}) => {
//--------------------Handle Password Visibility using Eye Button----------------
const [passwordVisible, setPasswordVisible] = useState(true)
function handlePasswordEye() {
if (passwordVisible) {
setPasswordVisible(false)
} else {
setPasswordVisible(true)
}
}
return (
<View style={{
...styles.inputContainer,
...inputContainer
}}>
<TextInput
style={{...styles.input,...input}}
placeholder={placeholderTxt}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
<PasswordInput
placeholderTxt='Password'
onChangeTxt={(password) => updateState({ password })}
/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: