Animated view height when keyboardDismissMode is interactive [react-native]

Question

I have a View and a keyboard is showing when I tap on an input, but when I drag down to hide the keyboard, the animation didn't trigger to resize the view.

The View with the animated

<Animated.View style={{ height: keyboardSpace }}>
  <ScrollView
    ref="addScrollView"
    keyboardShouldPersistTaps={ true }
    keyboardDismissMode="interactive"
  >
    {...}
  </ScrollView>
</Animated.View>

and the function to show and hide keyboard

  _keyboardWillShow(e) {
    const { keyboardSpace } = this.state;
    const newHeight = (height - HEADER_HEIGHT) - e.endCoordinates.height;

    Animated.timing(this.state.keyboardSpace, {
      easing: Easing.inOut(Easing.ease),
      duration: 250,
      toValue: newHeight
    }).start();
  },

  _keyboardWillHide() {
    const { keyboardSpace } = this.state;

    Animated.timing(keyboardSpace, {
      easing: Easing.inOut(Easing.ease),
      duration: 250,
      toValue: height - HEADER_HEIGHT
    }).start();
  },

Here is a little video to illustrate the problem here : https://vid.me/E3oU

You can find the source code here : https://github.com/statiks/statiks-react-native/blob/master/sources/add/index.js

Answer 1

Use the Keyboard module with the keyboardDidShow and keyboardDidHide events:

import {Keyboard} from 'react-native'

//...

componentDidMount() {
  Keyboard.addListener('keyboardDidShow', this.handleKeyboardShow)
  Keyboard.addListener('keyboardDidHide', this.handleKeyboardHide)
}