Pressing the center button on Android TV Remote does not work.

[silencer07]

Context: bamlab/react-tv-space-navigation#39 (comment)

Basically I am using this together with the linked library above. Seems that the center button on Android TV Remote (Is this what is called a D-pad?) is not working. Up, Down, Left and Right all works.

I am testing it against Xiaomi TV Box 2nd Gen, which has the latest Google TV installed (Based on android 12 I believe)

[silencer07]

Additional information:

I did some troubleshooting. Since I was not able to use debugger, I just used good ol' toast to see if there is a registered event for center button press

public void onKeyDownEvent(int keyCode, KeyEvent keyEvent) {
  int duration = Toast.LENGTH_SHORT;
  Toast toast = Toast.makeText(mReactContext.getCurrentActivity(), 
      "keyCode: " + keyCode + " keyEvent: " + keyEvent.toString(), duration);
   toast.show();
        ...

And no toast is showing. Up, Down, Left and Right shows the toast message

---

Update: seems that doing a long press actually registers ENTER. but what I need is not a long press but a short press

---

Another update: Seems that user needs to interact with a system dialog to make the short press work. in my case when I finished asking the user to grant location, I do not need to long press anymore!

[manjunath-nuveb]

@silencer07 I was facing this issue with hot reload only. is it the same for you or is Select never working for you?

[silencer07]

The center button never worked unless user interacted with a system dialog for some reason

[0n3byt3]

see this: #52

[silencer07]

hi @0n3byt3,

I am using expo so I modified the react-native-keyevent-expo-config-plugin instead and tested it out in my tv.

basically I used this snippet:

@Override
  public boolean dispatchKeyEvent(KeyEvent event) {
    if (event.getKeyCode() == KeyEvent.KEYCODE_ENTER && event.getAction() == KeyEvent.ACTION_DOWN) {
      KeyEventModule.getInstance().onKeyDownEvent(event.getKeyCode(), event);
      return false;
    }
    return super.dispatchKeyEvent(event);
  }

In my case I modified `withReactNativeKeyevent.js:

const withAndroidMainActivityBody = (config) => {
    // @ts-ignore
    const newConfig = (0, config_plugins_1.withMainActivity)(config, (config) => {
        const newSrc = [
            // ... code omitted, the below lines is what I added
            '@Override',
            'public boolean dispatchKeyEvent(KeyEvent event) {',
            '    if (event.getKeyCode() == KeyEvent.KEYCODE_ENTER && event.getAction() == KeyEvent.ACTION_DOWN) {',
            '        KeyEventModule.getInstance().onKeyDownEvent(event.getKeyCode(), event);',
            '        return false;',
            '    }',
            '    return super.dispatchKeyEvent(event);',
            '}',
        ];
// .... rest of code

still, short press does not work. I still have to use long press to make the center button of remote work. up, left, right and down still works

[0n3byt3]

hello @silencer07
I had your same issue but with react native(not expo) & google android tv simulator, but after overriding dispatchKeyEvent it worked for me; if you can log the key events in the dispatchKeyEvent function, you can see if the Enter event will reach this function or not; if not then there should be another main function that handles key events in expo(or your project) that you should apply the snippet.

[0n3byt3]

@silencer07
in case you or anyone still have problem with ENTER key on tv remote, I've wanted to share some update so maybe it helps someon :
after I've tested my app on real device, I had your same problem, so after digging more I've managed to solve it for now:
first I've added focusable={true} on my View where I need to listen to key events, then I've edited the snippet to this:
... if ((event.keyCode == KeyEvent.KEYCODE_ENTER || event.keyCode == **KeyEvent.KEYCODE_DPAD_CENTER**) && event.action == KeyEvent.ACTION_DOWN) ...
as you can see, my remote(and I think most tv remotes) actually don't send ENTER, but DPAD_CENTER event ;

[silencer07]

Nice! I will be trying this later on when I came back to tv development. I will report back after I tried

[silencer07]

@0n3byt3

I can confirm that in my case this works after following what you have suggested. in my case I will need to have a patched-package of react-native-keyevent-expo-config-plugin.

const withAndroidMainActivityBody = (config) => {
    // @ts-ignore
    const newConfig = (0, config_plugins_1.withMainActivity)(config, (config) => {
        const newSrc = [
            // ... code omitted, the below lines is what I added
            '@Override',
            'public boolean dispatchKeyEvent(KeyEvent event) {',
            '    if ((event.keyCode == KeyEvent.KEYCODE_ENTER || event.keyCode == KeyEvent.KEYCODE_DPAD_CENTER) && event.getAction() == KeyEvent.ACTION_DOWN) {',
            '        KeyEventModule.getInstance().onKeyDownEvent(event.getKeyCode(), event);',
            '        return false;',
            '    }',
            '    return super.dispatchKeyEvent(event);',
            '}',
        ];
// .... rest of code

I will close this ticket since there is a fix on hand. Thanks