diff --git a/Examples/UIExplorer/TextInputExample.android.js b/Examples/UIExplorer/TextInputExample.android.js index 5ae1079f05..31156b50d5 100644 --- a/Examples/UIExplorer/TextInputExample.android.js +++ b/Examples/UIExplorer/TextInputExample.android.js @@ -78,15 +78,25 @@ class RewriteExample extends React.Component { this.state = {text: ''}; } render() { + var limit = 20; + var remainder = limit - this.state.text.length; + var remainderColor = remainder > 5 ? 'blue' : 'red'; return ( - { - text = text.replace(/ /g, '_'); - this.setState({text}); - }} - style={styles.singleLine} - value={this.state.text} - /> + + { + text = text.replace(/ /g, '_'); + this.setState({text}); + }} + style={styles.default} + value={this.state.text} + /> + + {remainder} + + ); } } diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js index 49ee8a9bd6..f511a38044 100644 --- a/Libraries/Components/TextInput/TextInput.js +++ b/Libraries/Components/TextInput/TextInput.js @@ -181,7 +181,6 @@ var TextInput = React.createClass({ /** * Limits the maximum number of characters that can be entered. Use this * instead of implementing the logic in JS to avoid flicker. - * @platform ios */ maxLength: PropTypes.number, /** @@ -501,6 +500,7 @@ var TextInput = React.createClass({ mostRecentEventCount={this.state.mostRecentEventCount} multiline={this.props.multiline} numberOfLines={this.props.numberOfLines} + maxLength={this.props.maxLength} onFocus={this._onFocus} onBlur={this._onBlur} onChange={this._onChange} diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java index 00b6dfb7be..190d9f1079 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java @@ -24,6 +24,7 @@ import android.view.KeyEvent; import android.view.View; import android.view.inputmethod.EditorInfo; import android.widget.TextView; +import android.text.InputFilter; import com.facebook.infer.annotation.Assertions; import com.facebook.react.bridge.JSApplicationCausedNativeException; @@ -53,6 +54,7 @@ public class ReactTextInputManager extends private static final String KEYBOARD_TYPE_EMAIL_ADDRESS = "email-address"; private static final String KEYBOARD_TYPE_NUMERIC = "numeric"; + private static final InputFilter[] EMPTY_FILTERS = new InputFilter[0]; @Override public String getName() { @@ -199,6 +201,17 @@ public class ReactTextInputManager extends view.setLines(numLines); } + @ReactProp(name = "maxLength") + public void setMaxLength(ReactEditText view, @Nullable Integer maxLength) { + if (maxLength == null) { + view.setFilters(EMPTY_FILTERS); + } else { + InputFilter[] filterArray = new InputFilter[1]; + filterArray[0] = new InputFilter.LengthFilter(maxLength); + view.setFilters(filterArray); + } + } + @ReactProp(name = "autoCorrect") public void setAutoCorrect(ReactEditText view, @Nullable Boolean autoCorrect) { // clear auto correct flags, set SUGGESTIONS or NO_SUGGESTIONS depending on value