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?