AutoExpandingInput.js
917 Bytes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React, {Component} from "react";
import {StyleSheet, TextInput} from "react-native";
export default class AutoExpandingInput extends Component {
constructor(props) {
super(props);
this.state = {
height: 20
};
this.onChange = this._onChange.bind(this);
}
onContentSizeChange(event) {
this.setState({ height: event.nativeEvent.contentSize.height });
}
_onChange(changeText) {
this.props.onTextChange(changeText);
}
render() {
const{style} = this.props;
return (
<TextInput
{...this.props}
multiline={true}
onChangeText={this.onChange}
underlineColorAndroid="transparent"
onContentSizeChange={this.onContentSizeChange.bind(this)}
style={[style, { height: Math.max(20, this.state.height) }]}
/>
);
}
}
const styles = StyleSheet.create({
inputStyle: {
textAlignVertical: "top"
}
});