Animer une valeur de hauteur pour la saisie de texte

Question

Donc j'utilise react-native-autogrow-textinput pour avoir un document éditable visible dans mon application. J'essaye actuellement de travailler autour du clavier afin d'ajuster la taille de la boîte de saisie de texte, de sorte que tout le texte soit visible. J'ai trouvé le code suivant pour le faire

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}) 
} 

Cependant, le résultat que je reçois est: Lorsque le clavier est anime hors de l'écran, la hauteur du textinput reste le même, let newSize = Dimensions.get('window').height- e.endCoordinates.height - 150, jusqu'à ce que le clavier a fini coulissant hors écran.

La hauteur s'ajuste ensuite pour remplir à nouveau tout l'écran, à l'exception de la sorte qui apparaît dans la nouvelle hauteur. Comment puis-je obtenir la valeur de cette hauteur pour grandir progressivement, il semble donc qu'il s'étend simplement pour s'adapter à l'ensemble de l'écran? Je poste mon code Autogrow TextInput ci-dessous également. Toute aide serait très appréciée.

<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

J'ai trouvé la réponse moi-même, après avoir exploré certains fichiers de bibliothèque.

La solution consiste à utiliser un écouteur d'événements keyboardWillHide au lieu de keyboardDidHide.

Ceci se déclenchera avant que le clavier ne commence son animation outro. J'ai mis le code ci-dessous.

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}) 
}