Relleno automático React Native TextInput muestra el texto final

Relleno automático React Native TextInput muestra el texto final

Estoy tratando de completar automáticamente un TextInput con un texto más grande que necesita más espacio para renderizarse completamente que el espacio disponible. Todo funciona bien, pero el texto es visible desde el final. ¿Qué debo hacer para que el texto sea visible desde el principio?

ingrese la descripción de la imagen aquí

Mostrar la mejor respuesta

@zvona Estoy buscando una solución en la que pueda mostrar el texto desde el principio, sin importar si el texto final está visible o no. Estoy tratando de encontrar la posibilidad de mostrar el texto desde el principio en lugar del final sin cambiar las dimensiones de TextInput; no importa si el texto no es completamente visible.

Realmente depende de cómo apliques estilo a TextInput. Envuelva TextInput en una Vista y asígnele flex 1 y también View flex 1. Luego, asegúrese de que otros componentes en la misma fila no tengan flex 1. Eso le dará el espacio restante a TextInput.

Te hice un ejemplo de expandir las dimensiones (ancho) basado en onContentSizeChange: https://snack.expo.io/@zvona/expanding-textinput

Si tiene alguna pregunta sobre el código, no dude en comentar.

He encontrado una solución y la publicación para que alguien que busque pueda encontrarla y ahorrar tiempo.

Utilicé la propiedad de selección de TextInput http://facebook. github.io/react-native/docs/textinput.html#selection

Utilicé el evento onBlur y onFocus para establecer la selección (posición del cursor)

Aquí está el código de muestra (no el código completo):

    constructor(props) {
    super(props);
    this.state = {
        text: '',
        selection: {
            start: 0,
            end: 0
        }
    }
    render() {
         return <TextInput
                    value={this.state.text}
                    onChangeText={(text) => this.setState({ text })}
                    style={{
                        width: 100,
                        height: 40
                    }}
                    onBlur={() => {
                        this.setState({
                            selection: {
                                start: 0,
                                end: 0
                            }
                        })
                    }}
                    onFocus={() => {
                        this.setState({
                            selection: {
                                start: this.state.text.length,
                                end: this.state.text.length
                            }
                        }, () => {
                            this.setState({ selection: null })
                        })
                    }}
                    selection={this.state.selection}
                />
    }

Explicación: Cuando los componentes se montan, la posición inicial permanece (0, 0) y cuando el usuario comienza a escribir, eso es onFocus. Primero establezco la posición al final, que es la longitud del texto (para que el usuario no tenga que saltar manualmente de principio a fin) y luego restablezca a nulo; de lo contrario, el cursor siempre permanecerá en la posición donde lo habíamos configurado (texto.longitud antes de que el usuario comenzara a escribir).

ingrese la descripción de la imagen aquí