Permalink
Browse files

Fixed <TextInput>.onContentSizeChange on Android

Summary:
Previously <TextInput>'s onContentSizeChange event fires very rearly, usually just once after initial layout. This diff fixed that.
I also considered to a bunch of another things to get the native notification, but I found that overriding `onTextChanged` is the most reliable, easy and effitient way to implement this.

I tried/considered:
 * onLayout (does not fire)
 * OnPreDrawListener (fires to often)
 * OnGlobalLayoutListener (does not fire)
 * OnLayoutChangeListener (does not fire)
 * isLayoutRequested (too hacky)

(I also fixed the <AutoExpandingTextInput> demo to illustrate the fix.)

And just heads up, we will remove `contentSize` info from `onChange` event very soon.

GH issue: #11692

Reviewed By: achen1

Differential Revision: D5132589

fbshipit-source-id: e7edbd8dc5ae891a6f4a87b51d9450b8c6ce4a1e
  • Loading branch information...
shergin authored and facebook-github-bot committed May 26, 2017
1 parent 864c9f5 commit 35393524a94e2ea2668494eac7c89521f75266cf
@@ -49,6 +49,9 @@ class TextEventsExample extends React.Component {
onChange={(event) => this.updateText(
'onChange text: ' + event.nativeEvent.text
)}
onContentSizeChange={(event) => this.updateText(
'onContentSizeChange size: ' + event.nativeEvent.contentSize
)}
onEndEditing={(event) => this.updateText(
'onEndEditing text: ' + event.nativeEvent.text
)}
@@ -71,7 +74,6 @@ class AutoExpandingTextInput extends React.Component {
constructor(props) {
super(props);
this.state = {
text: 'React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.',
height: 0,
};
}
@@ -83,11 +85,7 @@ class AutoExpandingTextInput extends React.Component {
onContentSizeChange={(event) => {
this.setState({height: event.nativeEvent.contentSize.height});
}}
onChangeText={(text) => {
this.setState({text});
}}
style={[styles.default, {height: Math.max(35, this.state.height)}]}
value={this.state.text}
style={[styles.default, {height: Math.min(200, Math.max(35, this.state.height))}]}
/>
);
}
@@ -619,6 +617,7 @@ exports.examples = [
<View>
<AutoExpandingTextInput
placeholder="height increases with content"
defaultValue="React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native."
enablesReturnKeyAutomatically={true}
returnKeyType="done"
/>
@@ -629,6 +629,10 @@ public void onTextChanged(CharSequence s, int start, int before, int count) {
listener.onTextChanged(s, start, before, count);
}
}
if (mContentSizeWatcher != null) {
mContentSizeWatcher.onLayout();
}
}
@Override

1 comment on commit 3539352

@antoinerousseau

This comment has been minimized.

Show comment
Hide comment
@antoinerousseau

antoinerousseau Jun 1, 2017

Contributor

Thanks! \o/

Contributor

antoinerousseau commented on 3539352 Jun 1, 2017

Thanks! \o/

Please sign in to comment.