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/2] 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/2] 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';