show/hide password on icon touch

expo-community · Sep 6, 2019 · 96a6845 · 96a6845
1 parent e6b70b1
commit 96a6845
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 5 deletions.
diff --git a/screens/Login.js b/screens/Login.js
@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react'
-import { StyleSheet, SafeAreaView, View } from 'react-native'
+import { StyleSheet, SafeAreaView, View, TouchableOpacity } from 'react-native'
 import { Button } from 'react-native-elements'
+import { Ionicons } from '@expo/vector-icons'
 import { Formik } from 'formik'
 import * as Yup from 'yup'
 import { HideWithKeyboard } from 'react-native-hide-with-keyboard'
@@ -21,6 +22,11 @@ const validationSchema = Yup.object().shape({
 })
 
 export default class Login extends Component {
+  state = {
+    passwordVisibility: true,
+    rightIcon: 'ios-eye'
+  }
+
   goToSignup = () => this.props.navigation.navigate('Signup')
 
   handleSubmit = values => {
@@ -31,7 +37,15 @@ export default class Login extends Component {
     }
   }
 
+  handlePasswordVisibility = () => {
+    this.setState(prevState => ({
+      rightIcon: prevState.rightIcon === 'ios-eye' ? 'ios-eye-off' : 'ios-eye',
+      passwordVisibility: !prevState.passwordVisibility
+    }))
+  }
+
   render() {
+    const { passwordVisibility, rightIcon } = this.state
     return (
       <SafeAreaView style={styles.container}>
         <HideWithKeyboard style={styles.logoContainer}>
@@ -70,10 +84,15 @@ export default class Login extends Component {
                 value={values.password}
                 onChangeText={handleChange('password')}
                 placeholder='Enter password'
-                secureTextEntry
+                secureTextEntry={passwordVisibility}
                 iconName='ios-lock'
                 iconColor='#2C384A'
                 onBlur={handleBlur('password')}
+                rightIcon={
+                  <TouchableOpacity onPress={this.handlePasswordVisibility}>
+                    <Ionicons name={rightIcon} size={24} color='grey' />
+                  </TouchableOpacity>
+                }
               />
               <ErrorMessage errorValue={touched.password && errors.password} />
               <View style={styles.buttonContainer}>

diff --git a/screens/Signup.js b/screens/Signup.js
@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react'
-import { StyleSheet, SafeAreaView, View } from 'react-native'
+import { StyleSheet, SafeAreaView, View, TouchableOpacity } from 'react-native'
 import { Button, CheckBox } from 'react-native-elements'
+import { Ionicons } from '@expo/vector-icons'
 import { Formik } from 'formik'
 import * as Yup from 'yup'
 import FormInput from '../components/FormInput'
@@ -27,6 +28,13 @@ const validationSchema = Yup.object().shape({
 })
 
 export default class Signup extends Component {
+  state = {
+    passwordVisibility: true,
+    confirmPasswordVisibility: true,
+    passwordIcon: 'ios-eye',
+    confirmPasswordIcon: 'ios-eye'
+  }
+
   goToLogin = () => this.props.navigation.navigate('Login')
 
   handleSubmit = values => {
@@ -37,7 +45,29 @@ export default class Signup extends Component {
     }
   }
 
+  handlePasswordVisibility = () => {
+    this.setState(prevState => ({
+      passwordIcon:
+        prevState.passwordIcon === 'ios-eye' ? 'ios-eye-off' : 'ios-eye',
+      passwordVisibility: !prevState.passwordVisibility
+    }))
+  }
+
+  handleConfirmPasswordVisibility = () => {
+    this.setState(prevState => ({
+      confirmPasswordIcon:
+        prevState.confirmPasswordIcon === 'ios-eye' ? 'ios-eye-off' : 'ios-eye',
+      confirmPasswordVisibility: !prevState.confirmPasswordVisibility
+    }))
+  }
+
   render() {
+    const {
+      passwordVisibility,
+      confirmPasswordVisibility,
+      passwordIcon,
+      confirmPasswordIcon
+    } = this.state
     return (
       <SafeAreaView style={styles.container}>
         <Formik
@@ -90,21 +120,36 @@ export default class Signup extends Component {
                 value={values.password}
                 onChangeText={handleChange('password')}
                 placeholder='Enter password'
-                secureTextEntry
                 iconName='ios-lock'
                 iconColor='#2C384A'
                 onBlur={handleBlur('password')}
+                secureTextEntry={passwordVisibility}
+                rightIcon={
+                  <TouchableOpacity onPress={this.handlePasswordVisibility}>
+                    <Ionicons name={passwordIcon} size={28} color='grey' />
+                  </TouchableOpacity>
+                }
               />
               <ErrorMessage errorValue={touched.password && errors.password} />
               <FormInput
                 name='password'
                 value={values.confirmPassword}
                 onChangeText={handleChange('confirmPassword')}
                 placeholder='Confirm password'
-                secureTextEntry
                 iconName='ios-lock'
                 iconColor='#2C384A'
                 onBlur={handleBlur('confirmPassword')}
+                secureTextEntry={confirmPasswordVisibility}
+                rightIcon={
+                  <TouchableOpacity
+                    onPress={this.handleConfirmPasswordVisibility}>
+                    <Ionicons
+                      name={confirmPasswordIcon}
+                      size={28}
+                      color='grey'
+                    />
+                  </TouchableOpacity>
+                }
               />
               <ErrorMessage
                 errorValue={touched.confirmPassword && errors.confirmPassword}