react-native - props - textinput react native

¿Cómo aumentaría la altura de<TextInput> al ajustar el texto?

Question

<TextInput> crear un <TextInput> que puede crecer en altura cuando el texto se ajusta a la siguiente línea, de forma similar a cómo crece la entrada de mensajes de Slack con el texto hasta un punto.

Tengo el conjunto de utilería multiline , así que está envolviendo, pero los documentos no parecen mencionar ningún evento relacionado con el envoltorio, y lo único que se me ocurre es una estrategia realmente hacky para contar los personajes para averiguar cuándo aumentar la altura del entrada. ¿Cómo podría lograr esto? https://facebook.github.io/react-native/docs/textinput.html

Answer 1

Debería establecer una propiedad maxHeight en el style :

<TextInput multiline style={{maxHeight: 80}} />

Answer 2

Desde React Native 0.46.1 :

La propiedad contentSize se eliminó del evento TextInput.onChange

Si usa esta versión, puede manejar onContentSizeChange prop

De la respuesta de Jérémy , tenemos

class AutoExpandingTextInput extends React.Component {
constructor(props) {
super(props);
this.state = {
text: '''',
height: 0
};
}
render() {
return (
<TextInput
{...this.props}
multiline={true}
onChangeText={(text) => {
this.setState({ text })
}}
onContentSizeChange={(event) => {
this.setState({ height: event.nativeEvent.contentSize.height })
}}
style={[styles.default, {height: Math.max(35, this.state.height)}]}
value={this.state.text}
/>
);
}
}

Answer 3

Gracias a react-native doc: https://facebook.github.io/react-native/docs/textinput.html

Puedes hacer algo como eso:

class AutoExpandingTextInput extends React.Component {
state: any;
constructor(props) {
super(props);
this.state = {text: '''', height: 0};
}
render() {
return (
<TextInput
{...this.props}
multiline={true}
onChange={(event) => {
this.setState({
text: event.nativeEvent.text,
height: event.nativeEvent.contentSize.height,
});
}}
style={[styles.default, {height: Math.max(35, this.state.height)}]}
value={this.state.text}
/>
);
}
}

0.46.1 o superior: (según lo explica Nicolas de Chevigné)

class AutoExpandingTextInput extends React.Component {
constructor(props) {
super(props);
this.state = {text: '''', height: 0};
}
render() {
return (
<TextInput
{...this.props}
multiline={true}
onChangeText={(text) => {
this.setState({ text })
}}
onContentSizeChange={(event) => {
this.setState({ height: event.nativeEvent.contentSize.height })
}}
style={[styles.default, {height: Math.max(35, this.state.height)}]}
value={this.state.text}
/>
);
}
}

Answer 4

Mi respuesta es usar onContentSizeChange y numberOfLines props en TextInput, por supuesto activar multiline , esta es mi solución:

let numOfLinesCompany = 0;
<TextInput
...
multiline={true}
numberOfLines={numOfLinesCompany}
onContentSizeChange={(e) => {
numOfLinesCompany = e.nativeEvent.contentSize.height / 18;
}}
/>

18 es la altura del texto, depende de fontSize