onKeyPress method on TextInput for Android

Question

I've been trying to catch the keyboard's events within a TextInput in react-native.

By reading the component's doc (https://facebook.github.io/react-native/docs/textinput.html) I noticed the onKeyPress function which fits perfectly what I need. But it is labelled as ios only. I haven't found anything about an android workaround except this issue (https://github.com/facebook/react-native/issues/1882) which has been inactive for a couple months now ...

What I'd need to do is calling a specific method when Backspace is pressed and it looks like it can only be done for ios for now ...

Do you guys know any workaround for this ?

Thanks in advance :)

Allene

Answer 1

onKeyPress is now supported on Android.

From version v0.55.2 (commit)

Note hat the hardware keyboard inputs are not supported on Android, only the soft keyboard inputs.

Meaning, if you test this on an Android emulator and you type on your computer keyboard, those inputs are not be handled. So, go ahead and press the soft keyboard on the emulator with the mouse.

Levinson

Thanks for this info ! Great answer :) – Allene

Answer 2

I've come across this problem, too. I can tell you, what I did. It's not elegant, but it will do the job, until it's implemented for Android too.

In Android you can handle key events in Activity. Also, you can send events to JavaScript. That's everything you need.

In js file (e.g. componentDidMount) add listener.

DeviceEventEmitter.addListener('onKeyPressed', yourFunction)

In your MainActivity add something like this.

public boolean onKeyUp(int keyCode, KeyEvent event) {
   WritableMap params;
   // params.put something
   // filter only Backspace events if you wish etc.
   reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                           .emit("onKeyPressed", params);
}

It will be send every time a key was pressed. Don't forget to remove listener (e.g. componentDidUnmount or whenever you don't need it anymore). Also, if you have multiple TextInput, keep track of what is focused, so you don't mix it up.

Hope this helps.

Strobila

How do you obtain the reactContext? – Quickwitted

within activity getReactNativeHost().getReactInstanceManager().getCurrentReactContext() – Strobila

This only works for hardware keyboard events. It does not fire for me when the backspace key is pressed on an on-screen keyboard. – Dight

@Strobila your line with code contains unreadable symbols, please fix it <code>getReactNativeHost().getReactInstanceManager().getCurrentRea&zwnj;&#8203;ctContext()</code> – Gaulish

It doesn't fire for backspace in simulator, but works fine on real device (just tested). And this package implements this method btw github.com/kevinejohn/react-native-keyevent – Synonymy

Answer 3

You can use onChangeText of TextInput and inside the function supplied to onChangeText, you can check if the last entered text has One character less than the earlier text in the TextInput. If it has, then it means user pressed backspace and you can trigger/call your specific method.

 class SearchScreenBase extends Component {

  constructor(props) {
    super(props);
    this.state = { lastText: '',
    };
    // Bind callback methods to make `this` the correct context.
    this._onChange = this._onChange.bind(this);
   }
   _onChange(newText) {
      var oldText = this.state.lastText;
      if(newText.length === (oldText.length-1)){
         //INSERT TRIGGER FUNCTION HERE
      }
      this.setState({
               lastText: newText
      });
   }
   render() {
    return (
      <TextInput
        onChangeText = {this._onChange}
        editable = {true}
        maxLength = {40}
      />
    );
  }
}

It worked for me pretty well.

Masbate

Answer 4

Add this in your MainActivity.java

import com.facebook.react.modules.core.DeviceEventManagerModule;
import android.view.KeyEvent;

...

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
    getReactNativeHost().getReactInstanceManager().getCurrentReactContext().getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("onKeyPressed", keyCode);
    return super.onKeyUp(keyCode, event);
}

Now this will return the keyCode corresponding to the button pressed

Add this to your component to listen to the emitted keyCode, for e.g. I am adding the listener in componentWillMount

componentWillMount = () => {
    this.keyPressedListener = DeviceEventEmitter.addListener('onKeyPressed', yourFunction);
}

Handle yourFunction according to your requirements and don't forget to remove the listener afterward.

Expository