add hide/show password

components/InputField.js

@@ -12,10 +12,12 @@ const InputField = ({
 	placeholder,
 	errors, // this array prop is automatically passed down to this component from <Form />
 	isPass,
+	passVisible,
+	onPressEye,
 }) => {
 	return (
 		<View>
-			<View>
+			<View style={theme.inputContainer}>
 				<TextInput
 					value={value && value}
 					onChangeText={onChangeText ? val => onChangeText(val) : null}
@@ -23,8 +25,16 @@ const InputField = ({
 					placeholderTextColor={color.grey2}
 					disabled={disabled}
 					style={customStyle ? customStyle : {}}
-					secureTextEntry={isPass}
+					secureTextEntry={!passVisible}
+				/>
+				<View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
+					{isPass && (
+						<Icon
+							onPress={onPressEye}
+							name={passVisible ? 'eye' : 'eye-off'}
+							style={[theme.inputPassVisible]}
 						/>
+					)}
 
 					{errors &&
 						errors.length > 0 &&
@@ -34,6 +44,7 @@ const InputField = ({
 							) : null
 						)}
 				</View>
+			</View>
 			{errors &&
 				errors.length > 0 &&
 				errors.map((item, index) =>

constants/Styles.js

@@ -26,10 +26,10 @@ export const theme = StyleSheet.create({
 		marginBottom: 10,
 	},
 	inputContainer: {
-		flex: 1,
+		borderBottomWidth: 1,
 		flexDirection: 'row',
-		alignItems: 'flex-end',
-		justifyContent: 'center',
+		justifyContent: 'space-between',
+		borderBottomColor: color.inputBorder,
 	},
 	container: {
 		flex: 1,
@@ -49,9 +49,9 @@ export const theme = StyleSheet.create({
 		marginTop: 25,
 		paddingBottom: 5,
 		color: color.grey1,
-		borderBottomWidth: 1,
+		// borderBottomWidth: 1,
 		fontFamily: 'Avenir-Roman',
-		borderBottomColor: color.inputBorder,
+		// borderBottomColor: color.inputBorder,
 	},
 	inputErrText: {
 		bottom: -15,
@@ -76,10 +76,14 @@ export const theme = StyleSheet.create({
 		alignItems: 'center',
 	},
 	inputErrIcon: {
-		right: 5,
-		bottom: 0,
+		marginBottom: 5,
+		marginLeft: 10,
 		fontSize: 20,
 		color: color.red1,
-		position: 'absolute',
+	},
+	inputPassVisible: {
+		marginBottom: 5,
+		fontSize: 20,
+		color: '#d8d8d8',
 	},
 });

screens/Public/LoginScreen.js

@@ -29,6 +29,8 @@ const styles = StyleSheet.create({
 export default class LoginScreen extends Component {
 	state = {
 		isCheck: false,
+		pass: '',
+		passVisible: false,
 	};
 
 	submitForm() {
@@ -90,6 +92,8 @@ export default class LoginScreen extends Component {
 							customStyle={theme.input}
 							placeholder="Password"
 							isPass={true}
+							passVisible={this.state.passVisible}
+							onPressEye={() => this.setState({ passVisible: !this.state.passVisible })}
 						/>
 					</Form>
 					<Row style={{ marginTop: 30 }}>

screens/Public/RegisterScreen.js

@@ -26,6 +26,8 @@ export default class RegisterScreen extends Component {
 		password: '',
 		cfPassword: '',
 		phoneNum: '',
+		passVisible: false,
+		cfPassVisible: false,
 	};
 
 	submitForm() {
@@ -117,6 +119,8 @@ export default class RegisterScreen extends Component {
 							customStyle={theme.input}
 							placeholder="Password"
 							isPass={true}
+							passVisible={this.state.passVisible}
+							onPressEye={() => this.setState({ passVisible: !this.state.passVisible })}
 						/>
 						{/* ---cf password--- */}
 						<Field
@@ -129,6 +133,8 @@ export default class RegisterScreen extends Component {
 							customStyle={theme.input}
 							placeholder="Confirm password"
 							isPass={true}
+							passVisible={this.state.cfPassVisible}
+							onPressEye={() => this.setState({ cfPassVisible: !this.state.cfPassVisible })}
 						/>
 						{/* ---phone no--- */}
 						<Field