From 57e938089753687a3652886d03a63305a66cf082 Mon Sep 17 00:00:00 2001
From: Halil Bilir <hbilir@gmail.com>
Date: Tue, 26 Jul 2016 11:55:09 +0300
Subject: [PATCH] supporting controlled and uncontrolled TextInputs

---
 Example/TextInputEffectsExample.js | 1 +
 README.md                          | 3 ++-
 lib/BaseInput.js                   | 9 ++++++---
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/Example/TextInputEffectsExample.js b/Example/TextInputEffectsExample.js
index 5cf356a..5374b7b 100644
--- a/Example/TextInputEffectsExample.js
+++ b/Example/TextInputEffectsExample.js
@@ -34,6 +34,7 @@ export default class TextInputEffectsExample extends Component {
           <Text style={styles.title}>Kaede</Text>
           <Kaede
             label={'Website'}
+            defaultValue={'Github'}
           />
           <Kaede
             style={styles.input}
diff --git a/README.md b/README.md
index ca02474..16355d2 100644
--- a/README.md
+++ b/README.md
@@ -21,6 +21,8 @@ You also need to install [react-native-vector-icons](https://github.com/oblador/
 |**`style`**|View Style Object|Applied to the root container of the input.|
 |**`labelStyle`**|View Style Object|Applied to the container of the label view.|
 |**`inputStyle`**|Text Style Object|Applied to the TextInput component.|
+|**`value`**|String|This value will be applied to the TextInput and change it's state on every render. Use this prop if you want a [Controlled Component](https://facebook.github.io/react/docs/forms.html#controlled-components).|
+|**`defaultValue`**|String|If you want to initialize the component with a non-empty value, you can supply a defaultValue prop. This prop creates an [Uncontrolled Component](https://facebook.github.io/react/docs/forms.html#uncontrolled-components) and is only used during initial render.|
 
 You can also use [TextInput Props](https://facebook.github.io/react-native/docs/textinput.html#props). They'll be passed into TextInput component.
 
@@ -35,7 +37,6 @@ This component needs `Icon` component from `react-native-vector-icons` to operat
 |**`iconClass`**|Object|The Icon component class you've imported from react-native-vector-icons.|
 |**`iconName`**|String|Name of the icon that is passed to Icon component.|
 |**`iconColor`**|String|Applied to the container of the label view.|
-|**`inputStyle`**|Text Style Object|Applied to the TextInput component.|
 
 
 ## Example
diff --git a/lib/BaseInput.js b/lib/BaseInput.js
index d7624dc..20c000d 100644
--- a/lib/BaseInput.js
+++ b/lib/BaseInput.js
@@ -14,6 +14,7 @@ export default class BaseInput extends Component {
   static propTypes = {
     label: PropTypes.string,
     value: PropTypes.string,
+    defaultValue: PropTypes.string,
     style: View.propTypes.style,
     inputStyle: Text.propTypes.style,
     labelStyle: Text.propTypes.style,
@@ -37,15 +38,17 @@ export default class BaseInput extends Component {
     this._onFocus = this._onFocus.bind(this);
     this._focus = this._focus.bind(this);
 
+    const value = props.value || props.defaultValue;
+
     this.state = {
-      value: props.value,
-      focusedAnim: new Animated.Value(props.value ? 1 : 0),
+      value,
+      focusedAnim: new Animated.Value(value ? 1 : 0),
     };
   }
 
   componentWillReceiveProps(newProps) {
     const newValue = newProps.value;
-    if (newValue !== this.state.value) {
+    if (newProps.hasOwnProperty('value') && newValue !== this.state.value) {
       this.setState({
         value: newValue,
       });