How to detect key press and keyboard shortcuts on the react-native-windows + macOS app?

[FahadMohammedFiroz]

How to detect key press and keyboard shortcuts on the react-native-windows + macOS app?

I need to detect when user presses certain keys like 'Enter', 'Esc', etc. and do some default actions on those for my rn-windows app.

[chrisglein]

I'm not finding a great single example (also requested by this issue: microsoft/react-native-windows-samples#388). But the APIs are here: https://microsoft.github.io/react-native-windows/docs/ikeyboardprops-api. There may be some working examples in this app as well: https://github.com/microsoft/react-native-gallery.

[FahadMohammedFiroz]

Hello @chrisglein, I have tried this approach, but it seems we are not able to listen to that event wherein we are detecting the keys. FYI, I have tried this on both windows and macos, and it didn't seem to work for me. I'm sharing a file to sow you how I'm trying to use this.

file: HomeScreen with keyboardEventListener

Edit: including snippet inline

function HomeScreen({colorScheme}) {
  const viewRef = useRef();
  const styles = themedStyles[colorScheme];

  const _onKeyDown = ({nativeEvent}) => {
    const {
      capsLockKey = false,
      shiftKey = false,
      controlKey = false,
      optionKey = false,
      commandKey = false,
      numericPadKey = false,
      helpKey = false,
      functionKey = false,
      leftArrowKey = false,
      rightArrowKey = false,
      upArrowKey = false,
      downArrowKey = false,
      key = '',
    } = nativeEvent ?? {};
    capsLockKey && console.log('Key Pressed: Caps Lock!');
    shiftKey && console.log('Key Pressed: Shift Key!');
    controlKey && console.log('Key Pressed: Control Key!');
    optionKey && console.log('Key Pressed: Option Key!');
    commandKey && console.log('Key Pressed: Command Key!');
    numericPadKey && console.log('Key Pressed: NumericPad Key!');
    helpKey && console.log('Key Pressed: Help Key!');
    functionKey && console.log('Key Pressed: Function Key!');
    leftArrowKey && console.log('Key Pressed: Left Arrow!');
    rightArrowKey && console.log('Key Pressed: Right Arrow!');
    upArrowKey && console.log('Key Pressed: Up Arrow!');
    downArrowKey && console.log('Key Pressed: Down Arrow!');
    console.log('Key Pressed: ', key);
  };

  useEffect(() => {
    viewRef?.current?.focus?.();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Home Screen</Text>
      <View style={styles.divider} />
      <View
        ref={viewRef}
        style={{flex: 1}}
        focusable
        enableFocusRing={true}
        validKeysDown={['Enter', 'Esc', 'rightArrow']}
        onKeyDown={_onKeyDown}>
        <Text style={styles.content}>Check the console for key pressed.</Text>
      </View>
    </View>
  );
}

[chrisglein]

If those steps didn't work for you can you open an issue so we can get the steps fixed?

[jbcullis]

I feel like we need a global listener for unhandled keystrokes.

Id even be ok with all keystrokes and filter on client side similar to Keyboard.Keydown on wpf.

There's an example here https://github.com/microsoft/react-native-windows/blob/6c871e6ba27888804c776e5deeefbc7064e181d0/packages/%40react-native-windows/tester/src/js/examples-win/Keyboard/KeyboardExtensionExample.windows.tsx

But I still couldn't get it to work, and decorating views as ViewWindiws is likely going to cause cross platform issues.

[Victor0814gui]

what I did for now was a TextInput container that can detect these events and send them to the View

[Qurishe]

@jbcullis did you come up with any solution? i want to use global shortcuts like the ones used in Whatsapp application.

[Victor0814gui]

@qurishé is already possible in version 0.71, but you need to define a View that encompasses the navigation container and implement the steps mentioned by @chrisglein using a context to receive the events.

[Qurishe]

@Victor0814gui will have a look at it.
Thank you

[jbcullis]

@Victor0814gui is there an example somewhere?

[jbcullis]

Finally got around to working on this -

`#pragma once

#include "NativeModules.h"
#include
#include <winrt/Windows.UI.Core.h>

namespace winrt::NAMESPACE::implementation
{
REACT_MODULE(RNShortcut, L"RNShortcut");
struct RNShortcut
{

    REACT_INIT(Initialize);
    void Initialize(const Microsoft::ReactNative::ReactContext& reactContext) noexcept
    {
        this->reactContext = reactContext;
        reactContext.UIDispatcher().Post([=]()
            {
                winrt::Windows::UI::Core::CoreWindow::GetForCurrentThread().KeyDown([=](Windows::UI::Core::CoreWindow sender, Windows::UI::Core::KeyEventArgs args)
                {
                    try {
                        auto virtualKeyCode = args.VirtualKey();
                        if (virtualKeyCode == Windows::System::VirtualKey::S) {
                            sKeyState = true;
                            if (ctrlKeyState == true) {
                                onShortcutDetected("Ctrl+S");
                            }
                        } else if (virtualKeyCode == Windows::System::VirtualKey::Control) {
                            ctrlKeyState = true;
                        }
                        else {
                            onShortcutDetected("Something Else...");
                        }
                    }
                    catch (exception ex) {
                        std::cout << ex.what();
                    }
                });
                winrt::Windows::UI::Core::CoreWindow::GetForCurrentThread().KeyUp([=](Windows::UI::Core::CoreWindow sender, Windows::UI::Core::KeyEventArgs args)
                    {
                        try {
                            auto virtualKeyCode = args.VirtualKey();
                            if (virtualKeyCode == Windows::System::VirtualKey::S)
                            {
                                sKeyState = false;
                            }
                            else if (virtualKeyCode == Windows::System::VirtualKey::Control)
                            {
                                ctrlKeyState = false;
                            }
                        }
                        catch (exception ex) {
                            std::cout << ex.what();
                        }
                    });
            }
        );
    }
    REACT_EVENT(onShortcutDetected);
    std::function<void(string)> onShortcutDetected;

private:
    Microsoft::ReactNative::ReactContext reactContext{ nullptr };
    bool ctrlKeyState = false; // Stores the state of the Ctrl key
    bool sKeyState = false;    // Stores the state of the S key
};

}`

[cyb0rg56]

Hi @jbcullis, did you get this working on react native windows on new architecture? I'm trying to get a native module for hotkeys working for windows.

[austinhallock]

I've played around with this a bit without a ton of luck so far. You can subclass the hwnd, but I haven't seen keyboard messages in that.

But in 0.77 you'll be able to get the ContentIsland and grab the keyboard events from that.

See #14136, #14173 and https://github.com/microsoft/react-native-windows/blob/b051774f5429ed49df69e0b85ae16cfae8c18922/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp#L230C27-L230C32 (and maybe comment on the issue if that'd fix your problem too :)

[cyb0rg56]

Thanks @austinhallock! It certainly seems like it does what I'm trying to achieve. I might tough it out and wait till 0.77. Will comment on the issue too. Appreciate the links to the relevant issues!

[austinhallock]

https://github.com/software-mansion/react-native-svg/blob/6042b89b6b5acd87c3e112b3faa6853b84f6d718/apps/fabric-windows-example/windows/FabricExample/FabricExample.cpp might be able to get you what you need in the short-term. Instead of using the appbuilder to build in your entry cpp file, you just manually build things so you have access to the island