diff --git a/README.md b/README.md
index 314cfb7d..b11b8fc0 100644
--- a/README.md
+++ b/README.md
@@ -147,7 +147,7 @@ React Native v0.55
| SwipeableListView | ✓ | |
| Switch | ✓ | |
| Text | ✓ | Missing `onLongPress` ([#1011](https://github.com/necolas/react-native-web/issues/1011)) and `numberOfLines` ([#13](https://github.com/necolas/react-native-web/issues/13)) support. |
-| TextInput | ✓ | Missing `onContentSizeChange` ([#793](https://github.com/necolas/react-native-web/issues/793)), rich text features ([#1023](https://github.com/necolas/react-native-web/issues/1023)), and auto-expanding behaviour ([#795](https://github.com/necolas/react-native-web/issues/795)). |
+| TextInput | ✓ | Missing rich text features ([#1023](https://github.com/necolas/react-native-web/issues/1023)), and auto-expanding behaviour ([#795](https://github.com/necolas/react-native-web/issues/795)). |
| Touchable | ✓ | Includes additional support for mouse and keyboard interactions. |
| TouchableHighlight | ✓ | |
| TouchableNativeFeedback | ✘ | Not started ([#1024](https://github.com/necolas/react-native-web/issues/1024)). |
diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js
index 8a344b48..c287ac0c 100644
--- a/packages/react-native-web/src/exports/TextInput/index.js
+++ b/packages/react-native-web/src/exports/TextInput/index.js
@@ -68,6 +68,8 @@ const setSelection = (node, selection) => {
class TextInput extends Component<*> {
_node: HTMLInputElement;
+ _nodeHeight: number;
+ _nodeWidth: number;
static displayName = 'TextInput';
@@ -288,9 +290,30 @@ class TextInput extends Component<*> {
}
};
+ _handleContentSizeChange = () => {
+ const { onContentSizeChange, multiline } = this.props;
+ if (multiline && onContentSizeChange) {
+ const newHeight = this._node.scrollHeight;
+ const newWidth = this._node.scrollWidth;
+ if (newHeight !== this._nodeHeight || newWidth !== this._nodeWidth) {
+ this._nodeHeight = newHeight;
+ this._nodeWidth = newWidth;
+ onContentSizeChange({
+ nativeEvent: {
+ contentSize: {
+ height: this._nodeHeight,
+ width: this._nodeWidth
+ }
+ }
+ });
+ }
+ }
+ };
+
_handleChange = e => {
const { onChange, onChangeText } = this.props;
const { text } = e.nativeEvent;
+ this._handleContentSizeChange();
if (onChange) {
onChange(e);
}
@@ -389,6 +412,9 @@ class TextInput extends Component<*> {
_setNode = component => {
this._node = findNodeHandle(component);
+ if (this._node) {
+ this._handleContentSizeChange();
+ }
};
}
diff --git a/packages/website/storybook/1-components/TextInput/TextInputScreen.js b/packages/website/storybook/1-components/TextInput/TextInputScreen.js
index c431186c..cd8dfcd9 100644
--- a/packages/website/storybook/1-components/TextInput/TextInputScreen.js
+++ b/packages/website/storybook/1-components/TextInput/TextInputScreen.js
@@ -206,6 +206,12 @@ const TextInputScreen = () => (
description="Callback that is called when the text input's text changes. The text is passed as an argument to the callback handler."
/>
+
+