From 033558afee89ae60c50b84d131355cebb1c24c76 Mon Sep 17 00:00:00 2001
From: Matt Labrum <matt@labrum.me>
Date: Thu, 1 Sep 2016 12:20:28 +0930
Subject: [PATCH 1/3] Add support for symbols to be shown on the left hand side

---
 lib/TextField.js | 42 ++++++++++++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/lib/TextField.js b/lib/TextField.js
index d42523a..7a2153d 100644
--- a/lib/TextField.js
+++ b/lib/TextField.js
@@ -61,16 +61,26 @@ export default class TextField extends Component {
       multiline,
       ...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 (
       <View style={[dense ? styles.denseWrapper : styles.wrapper, this.state.height ? {height: undefined}: {}, wrapperStyle]} ref="wrapper">
+        <View style={[styles.row, styles.flex]}>
+          {
+            this.props.symbol && this.props.value ?
+              <Text style={[textInputComposedStyles, styles.symbol]}>{this.props.symbol}</Text>
+            : null
+          }
+        <View style={styles.flex}>
         <TextInput
-          style={[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} : {}]}
+          style={[textInputComposedStyles]}
           multiline={multiline}
           onFocus={() => {
             this.setState({isFocused: true});
@@ -98,6 +108,8 @@ export default class TextField extends Component {
           value={this.state.text}
           {...props}
         />
+      </View>
+    </View>
         <Underline
           ref="underline"
           highlightColor={highlightColor}
@@ -141,7 +153,8 @@ TextField.propTypes = {
   labelStyle: PropTypes.object,
   multiline: PropTypes.bool,
   autoGrow: PropTypes.bool,
-  height: PropTypes.oneOfType([PropTypes.oneOf(undefined), PropTypes.number])
+  height: PropTypes.oneOfType([PropTypes.oneOf(undefined), PropTypes.number]),
+  symbol: PropTypes.string
 };
 
 TextField.defaultProps = {
@@ -158,6 +171,12 @@ TextField.defaultProps = {
 };
 
 const styles = StyleSheet.create({
+  flex: {
+    flex: 1
+  },
+  row: {
+    flexDirection: 'row'
+  },
   wrapper: {
     height: 72,
     paddingTop: 30,
@@ -182,5 +201,12 @@ const styles = StyleSheet.create({
     lineHeight: 24,
     paddingBottom: 3,
     textAlignVertical: 'top'
+  },
+  symbol: {
+    textAlignVertical: 'auto',
+    lineHeight: undefined,
+    height: undefined,
+    position: 'relative',
+    bottom: -10
   }
 });

From a32aac6a2693eb5c7e39fc6a2f7fe55f385a2829 Mon Sep 17 00:00:00 2001
From: Matt Labrum <matt@labrum.me>
Date: Fri, 2 Sep 2016 11:00:09 +0930
Subject: [PATCH 2/3] Add missing import

---
 lib/TextField.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/TextField.js b/lib/TextField.js
index 7a2153d..56d765e 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, TextInput, Text, StyleSheet} from "react-native";
 
 import Underline from './Underline';
 import FloatingLabel from './FloatingLabel';

From 7ddaa512a67bd8de30e42e04a156e5b608a3f035 Mon Sep 17 00:00:00 2001
From: Matt Labrum <mattl@mybudget.com.au>
Date: Fri, 16 Sep 2016 14:29:59 +0930
Subject: [PATCH 3/3] Add unmask password input

---
 README.md        |  3 +++
 lib/TextField.js | 28 ++++++++++++++++++++++++----
 2 files changed, 27 insertions(+), 4 deletions(-)

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 56d765e..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, Text, 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,6 +63,10 @@ export default class TextField extends Component {
       height,
       autoGrow,
       multiline,
+      secureTextEntry,
+      secureTextAllowUnmask,
+      secureTextAllowUnmaskIconOn,
+      secureTextAllowUnmaskIconOff,
       ...props
     } = this.props;
 
@@ -106,9 +114,17 @@ export default class TextField extends Component {
           }}
           ref="input"
           value={this.state.text}
+          secureTextEntry={secureTextEntry && secureTextAllowUnmask ? !this.state.isUnmasked : props.secureTextEntry}
           {...props}
         />
       </View>
+        {
+          secureTextEntry && secureTextAllowUnmask ?
+              <TouchableWithoutFeedback onPress={this.toggleSecureMask.bind(this)}>
+                <View style={{opacity: !this.state.text.length ? 0.38 : 0.54}}>{!this.state.isUnmasked ? secureTextAllowUnmaskIconOn : secureTextAllowUnmaskIconOff}</View>
+              </TouchableWithoutFeedback >
+              : null
+        }
     </View>
         <Underline
           ref="underline"
@@ -154,7 +170,10 @@ TextField.propTypes = {
   multiline: PropTypes.bool,
   autoGrow: PropTypes.bool,
   height: PropTypes.oneOfType([PropTypes.oneOf(undefined), PropTypes.number]),
-  symbol: PropTypes.string
+  symbol: PropTypes.string,
+  secureTextAllowUnmask: PropTypes.bool,
+  secureTextAllowUnmaskIconOn: PropTypes.element,
+  secureTextAllowUnmaskIconOff: PropTypes.element
 };
 
 TextField.defaultProps = {
@@ -167,7 +186,8 @@ TextField.defaultProps = {
   underlineColorAndroid: 'rgba(0,0,0,0)',
   multiline: false,
   autoGrow: false,
-  height: undefined
+  height: undefined,
+  secureTextIsUnmasked: false
 };
 
 const styles = StyleSheet.create({