Calling a function inside react-native keyboardDidHide

Question

I am building an app using create-react-native-app and Expo and I would like to call a search function when the on-screen keyboard closes.

class SearchPage extends Component {
  state = {
    modalVisible: false
  };
  componentDidMount() {
    this.keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      this._keyboardDidHide
    );
  }

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

  _keyboardDidHide() {
    this.onSearchButtonPress();
  }
  onSearchButtonPress() {
    this.props.searchCatalog(
      this.props.search,
      this.props.begins,
      this.props.makes
    );
  }
...
}

I have tried calling this.props.searchCatalog(...) directly inside of _keyboardDidHide() but every time I get the same sort of error:

"this.onSearchButtonPress is not a function. (In `this.onSearchButtonPress()', 'this.onSearchButtonPress' is undefined)

Ultimately, all I want to do is call this.props.searchCatalog(...) when the on-screen keyboard closes.

Answer 1

You lost 'this' context. You can fix that using arrow functions:

this.keyboardDidHideListener = Keyboard.addListener(
  'keyboardDidHide',
  () => this.onSearchButtonPress()
);