CODEWITHSUNDEEP
androidiosreactjsreact-native
Janith Widarshana
Janith Widarshana

Reputation: 3483

React-native key board events

I am writing a react native app and need to implement keyboard events inside components.

I tried with following code and did not success.

import { DeviceEventEmitter } from 'react-native';

export default class KeyEvent {
  static onKeyDownListener(cb) {
    KeyEvent.removeKeyDownListener();
    console.log('Key Down');
    this.listenerKeyDown = DeviceEventEmitter.addListener('onKeyDown', cb);
  }

  static removeKeyDownListener() {
    if (this.listenerKeyDown) {
      this.listenerKeyDown.remove();
    }
  }

  static onKeyUpListener(cb) {
    console.log('Key up');
    KeyEvent.removeKeyUpListener();
    this.listenerKeyUp = DeviceEventEmitter.addListener('onKeyUp', cb);
  }

  static removeKeyUpListener() {
    if (this.listenerKeyUp) {
      this.listenerKeyUp.remove();
    }
  }
}

Call inside componentDidMount function relevant component as follows.

componentDidMount() {
    console.log('componentDidMount');
    // if you want to react to keyDown 
    KeyEvent.onKeyDownListener((keyCode) => {
      console.log(`Key code pressed: ${keyCode}`);
    });

    // if you want to react to keyUp 
    KeyEvent.onKeyUpListener((keyCode) => {
      console.log(`Key code pressed: ${keyCode}`);
    });
  }

  componentWillUnmount() {
      console.log('componentWillUnmount');
    // if you are listening to keyDown 
    KeyEvent.removeKeyDownListener();

     // if you are listening to keyUp 
    KeyEvent.removeKeyUpListener();
  }

Can anyone help me to fix this or suggest any other way of doing this. I need to press a button on enter key down.

Upvotes: 4

Views: 16432

Answers (1)

Irfan Ali
Irfan Ali

Reputation: 2258

As per react native doc, you can attach below events to keyboard.

keyboardWillShow
keyboardDidShow
keyboardWillHide
keyboardDidHide
keyboardWillChangeFrame
keyboardDidChangeFrame

So if you want pressed key event then you need to attach event to input field like below.

<TextInput
    onKeyPress={this.handleKeyDown}
    placeholder="Enter text here..."
/>

handleKeyDown: function(e) {
    if(e.nativeEvent.key == "Enter"){
        dismissKeyboard();
    }
},

Upvotes: 3

Related Questions