Анимация значения высоты для ввода текста

Question

Поэтому я использую реагировать-родной-autogrow-textinput для того, чтобы редактируемый документ можно было просматривать в моем приложении. В настоящее время я пытаюсь обойти клавиатуру, чтобы отрегулировать высоту поля ввода текста, чтобы весь текст был виден. Я нашел следующий код, чтобы сделать это

componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide.bind(this));
}

componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
}

keyboardDidShow(e){
    let newSize = Dimensions.get('window').height- e.endCoordinates.height - 150;
    console.log(e.endCoordinates);
    this.setState({docViewHeight: newSize});
}

keyboardDidHide(e){
    let newSize = Dimensions.get('window').height - 170;
    this.setState({docViewHeight: newSize})
}

Тем не менее, результат, который я получаю: Когда клавиатура анимируется за пределами экрана, высота ввода текста остается той же, let newSize = Dimensions.get('window').height- e.endCoordinates.height - 150, пока клавиатура не соскользнула с экрана.

Затем высота корректируется, чтобы снова заполнить весь экран, за исключением того, что он как бы "всплывает" на новую высоту. Как сделать так, чтобы значение этой высоты постепенно увеличивалось, чтобы она выглядела так, будто она просто растягивается на весь экран? Я также опубликую свой текстовый код AutoGrow ниже. Любая помощь приветствуется.

<AutoGrowingTextInput
                    ref="editText"
                    editable = {this.state.editting}
                    style = {{fontSize: fontProperties.fontSize+3, marginLeft: 18, marginRight: 18, marginTop: 15}}
/*animate this*/    minHeight = {this.state.docViewHeight}
                    animation = {{animated: true, duration: 300}}
                    //has some other confidential props here for onChange etc
</AutoGrowingTextInput>

Answer 1

Сам нашел ответ, покопавшись в некоторых библиотеках.

Решение состоит в том, чтобы использовать keyboardWillHide слушатель событий вместо keyboardDidHide,

Это сработает до того, как клавиатура начнет свою анимацию. Я положил код ниже.

componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow.bind(this));
    this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide.bind(this));
}

componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardWillHideListener.remove();
}

keyboardWillHide(e){
    let newSize = Dimensions.get('window').height - 170;
    this.setState({docViewHeight: newSize})
}