Using navigator; going back loses event notifier

[rgoldiez]

I've been using this component for a couple months and noticed a strange issue. I have a navigator scene that allows keyboard input, and the spacer shows when the keyboard is displayed (as it should). However, that same scene allows the user to click on other touchable items to navigate to another scene (not unmounting this scene).

When the user navigates back, KeyboardSpacer no longer hears keyboard events and if the user touches the text input field, the spacer doesn't engage and is hidden behind the keyboard. I confirmed that the KeyboardSpacer does not unmount with some simple debug logging. Any idea what's going on?

[Andr3wHur5t]

Interesting, sounds like it should work.

Do you have any example code I can look at if not what navigator are you using?

[rgoldiez]

@Andr3wHur5t - I agree. Can't figure out why it won't work. I'll have to find some time to pull together a simple code example -- right now the navigator/router I'm using is in a far off component in my app relative to this component.

Interestingly, I found another keyboard spacer type slide of code that I dropped as a replacement into this component and it's working fine for me. I changed the keyboard event to WillShow from DidShow to get the spacer to respond sooner. See below.

/**
 * Created by andrewhurst on 10/5/15.
 */
var React = require('react-native');

var {
    DeviceEventEmitter,
   //  LayoutAnimation,
    Animated,
    View
} = React;

class KeyboardSpacer extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
           keyboardHeightAnim: new Animated.Value(0)
      };
   }

   componentWillMount() {
      this._registerEvents();
   }

   componentWillUnmount() {
      this._unRegisterEvents();
   }

   _registerEvents() {
      this._keyboardDidShowSubscription = DeviceEventEmitter.addListener("keyboardWillShow", e => this._keyboardDidShow(e));
      this._keyboardDidHideSubscription = DeviceEventEmitter.addListener("keyboardWillHide", e => this._keyboardDidHide(e));
   }

   _unRegisterEvents() {
      this._keyboardDidShowSubscription.remove();
      this._keyboardDidHideSubscription.remove();
   }

   _keyboardDidShow(e) {
      Animated.timing(this.state.keyboardHeightAnim, {
           toValue: e.endCoordinates.height,
           duration: 100,
      }).start();
   }

   _keyboardDidHide() {
      Animated.timing(this.state.keyboardHeightAnim, {
           toValue: 0,
           duration: 100,
      }).start();
   }

   render() {
      return <Animated.View style={{ height: this.state.keyboardHeightAnim }} />;
   }
}

module.exports = KeyboardSpacer;