From 35393524a94e2ea2668494eac7c89521f75266cf Mon Sep 17 00:00:00 2001 From: Valentin Shergin Date: Thu, 25 May 2017 19:18:23 -0700 Subject: [PATCH] Fixed .onContentSizeChange on Android Summary: Previously '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 demo to illustrate the fix.) And just heads up, we will remove `contentSize` info from `onChange` event very soon. GH issue: https://github.com/facebook/react-native/issues/11692 Reviewed By: achen1 Differential Revision: D5132589 fbshipit-source-id: e7edbd8dc5ae891a6f4a87b51d9450b8c6ce4a1e --- RNTester/js/TextInputExample.android.js | 11 +++++------ .../facebook/react/views/textinput/ReactEditText.java | 4 ++++ 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/RNTester/js/TextInputExample.android.js b/RNTester/js/TextInputExample.android.js index 83a4ac124..35208c6cb 100644 --- a/RNTester/js/TextInputExample.android.js +++ b/RNTester/js/TextInputExample.android.js @@ -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 = [ diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java index 1665bba19..bf318a0dc 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java @@ -629,6 +629,10 @@ public class ReactEditText extends EditText { listener.onTextChanged(s, start, before, count); } } + + if (mContentSizeWatcher != null) { + mContentSizeWatcher.onLayout(); + } } @Override