diff --git a/README.md b/README.md index 781eca4..ff8f2e0 100644 --- a/README.md +++ b/README.md @@ -78,6 +78,9 @@ multiline | bool | `false` | If true, it will allow multiline text input height | number | `undefined` | A number representing the initial height of the textInput autoGrow | bool | `false` | If true enables autogrow of the textInput underlineColorAndroid | string | `rgba(0,0,0,0)` | This sets the default underline color on Android to transparent ([Issue #1](https://github.com/evblurbs/react-native-md-textinput/issues/1)). +secureTextAllowUnmask | bool | `false` | This allows the secure password area to be unmasked. +secureTextAllowUnmaskIconOn | element | `false` | This is the icon that is displayed when secureTextAllowUnmask is true +secureTextAllowUnmaskIconOff | element | `false` | This is the icon that is displayed when secureTextAllowUnmask is true and the user has clicked the secureTextAllowUnmaskIconOn element ### Style Overrides diff --git a/lib/TextField.js b/lib/TextField.js index d42523a..060b991 100644 --- a/lib/TextField.js +++ b/lib/TextField.js @@ -1,6 +1,6 @@ 'use strict'; import React, {Component, PropTypes} from "react"; -import {View, TextInput, StyleSheet} from "react-native"; +import {View, TouchableWithoutFeedback, TextInput, Text, StyleSheet} from "react-native"; import Underline from './Underline'; import FloatingLabel from './FloatingLabel'; @@ -11,7 +11,8 @@ export default class TextField extends Component { this.state = { isFocused: false, text: props.value, - height: props.height + height: props.height, + isUnmasked: false }; } focus() { @@ -37,6 +38,9 @@ export default class TextField extends Component { this.setState({height: nextProps.height}); } } + toggleSecureMask(){ + this.setState({'isUnmasked': !this.state.isUnmasked}) + } render() { let { label, @@ -59,18 +63,32 @@ export default class TextField extends Component { height, autoGrow, multiline, + secureTextEntry, + secureTextAllowUnmask, + secureTextAllowUnmaskIconOn, + secureTextAllowUnmaskIconOff, ...props } = this.props; + + const textInputComposedStyles = [dense ? styles.denseTextInput : styles.textInput, { + color: textColor + }, (this.state.isFocused && textFocusColor) ? { + color: textFocusColor + } : {}, (!this.state.isFocused && textBlurColor) ? { + color: textBlurColor + } : {}, inputStyle, this.state.height ? {height: this.state.height} : {}] + return ( + + { + this.props.symbol && this.props.value ? + {this.props.symbol} + : null + } + { this.setState({isFocused: true}); @@ -96,8 +114,18 @@ export default class TextField extends Component { }} ref="input" value={this.state.text} + secureTextEntry={secureTextEntry && secureTextAllowUnmask ? !this.state.isUnmasked : props.secureTextEntry} {...props} /> + + { + secureTextEntry && secureTextAllowUnmask ? + + {!this.state.isUnmasked ? secureTextAllowUnmaskIconOn : secureTextAllowUnmaskIconOff} + + : null + } +