supporting controlled and uncontrolled TextInputs

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}

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

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,
       });