status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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: https://github.com/facebook/react-native/issues/11692

Reviewed By: achen1

Differential Revision: D5132589

fbshipit-source-id: e7edbd8dc5ae891a6f4a87b51d9450b8c6ce4a1e
This commit is contained in:
Valentin Shergin 2017-05-25 19:18:23 -07:00 committed by Facebook Github Bot
parent 864c9f5248
commit 35393524a9
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
RNTester/js/TextInputExample.android.js
View File

@ -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"
/>

4
ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java
View File

@ -629,6 +629,10 @@ public class ReactEditText extends EditText {
listener.onTextChanged(s, start, before, count);
}
}
if (mContentSizeWatcher != null) {
mContentSizeWatcher.onLayout();
}
}
@Override