react-native-hide-show-password-input
react-native-hide-show-password-input copied to clipboard
invertVisibilityIcon prop addition
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch [email protected]
for the project I'm working on.
As my Mobile PM wanted to have the crossed eye icon when the password is shown, i have introduced new invertVisibilityIcon property (false by default to follow initial behavior).
Feel free to do what You want with this suggestion.
Regards, Guillaume.
Here is the diff that solved my problem:
diff --git a/node_modules/react-native-hide-show-password-input/src/component/passwordInput.js b/node_modules/react-native-hide-show-password-input/src/component/passwordInput.js
index fbe863d..47f7686 100755
--- a/node_modules/react-native-hide-show-password-input/src/component/passwordInput.js
+++ b/node_modules/react-native-hide-show-password-input/src/component/passwordInput.js
@@ -7,16 +7,21 @@ import { TextField } from "react-native-material-textfield";
const PasswordInputText = ({
iconSize,
iconColor,
+ invertVisibilityIcon,
label,
style,
getRef,
...rest
}) => {
- const [eyeIcon, setEyeIcon] = useState("visibility-off");
+ const getVisibilityIcon = (isPassword) => isPassword ?
+ ( invertVisibilityIcon ? "visibility-off" : "visibility") :
+ ( invertVisibilityIcon ? "visibility" : "visibility-off") ;
+
+ const [eyeIcon, setEyeIcon] = useState(getVisibilityIcon(false));
const [isPassword, setIsPassword] = useState(true);
const changePwdType = () => {
- setEyeIcon(isPassword ? "visibility" : "visibility-off");
+ setEyeIcon(getVisibilityIcon(isPassword));
setIsPassword((prevState) => !prevState);
};
@@ -53,12 +58,14 @@ const styles = StyleSheet.create({
PasswordInputText.defaultProps = {
iconSize: 25,
+ invertVisibilityIcon: false,
label: "Password",
iconColor: "#222222",
};
PasswordInputText.propTypes = {
iconSize: PropTypes.number,
+ invertVisibilityIcon: PropTypes.bool,
label: PropTypes.string,
iconColor: PropTypes.string,
};
This issue body was partially generated by patch-package.