diff --git a/Examples/UIExplorer/TextInputExample.js b/Examples/UIExplorer/TextInputExample.js
index 3369b41fb..b2a42ffeb 100644
--- a/Examples/UIExplorer/TextInputExample.js
+++ b/Examples/UIExplorer/TextInputExample.js
@@ -315,7 +315,7 @@ exports.examples = [
return (
-
+
);
@@ -332,11 +332,11 @@ exports.examples = [
);
@@ -383,7 +383,7 @@ exports.examples = [
@@ -391,7 +391,7 @@ exports.examples = [
diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
index d89291c37..01d6dbbfb 100644
--- a/Libraries/Components/TextInput/TextInput.js
+++ b/Libraries/Components/TextInput/TextInput.js
@@ -245,6 +245,12 @@ var TextInput = React.createClass({
* unwanted edits without flicker.
*/
value: PropTypes.string,
+ /**
+ * Provides an initial value that will change when the user starts typing.
+ * Useful for simple use-cases where you don't want to deal with listening
+ * to events and updating the value prop to keep the controlled state in sync.
+ */
+ defaultValue: PropTypes.string,
/**
* When the clear button should appear on the right side of the text view
*/
@@ -348,12 +354,17 @@ var TextInput = React.createClass({
}
},
+ _getText: function(): ?string {
+ return typeof this.props.value === 'string' ?
+ this.props.value :
+ this.props.defaultValue;
+ },
+
_renderIOS: function() {
var textContainer;
var props = Object.assign({}, this.props);
props.style = [styles.input, this.props.style];
-
if (!props.multiline) {
for (var propKey in onlyMultiline) {
if (props[propKey]) {
@@ -370,7 +381,7 @@ var TextInput = React.createClass({
onBlur={this._onBlur}
onChange={this._onChange}
onSelectionChangeShouldSetResponder={() => true}
- text={this.props.value}
+ text={this._getText()}
mostRecentEventCount={this.state.mostRecentEventCount}
/>;
} else {
@@ -407,7 +418,7 @@ var TextInput = React.createClass({
onSelectionChange={this._onSelectionChange}
onTextInput={this._onTextInput}
onSelectionChangeShouldSetResponder={emptyFunction.thatReturnsTrue}
- text={this.props.value}
+ text={this._getText()}
/>;
}
@@ -457,7 +468,7 @@ var TextInput = React.createClass({
password={this.props.password || this.props.secureTextEntry}
placeholder={this.props.placeholder}
placeholderTextColor={this.props.placeholderTextColor}
- text={this.props.value}
+ text={this._getText()}
underlineColorAndroid={this.props.underlineColorAndroid}
children={children}
/>;