macOS Keyboard Support

Libraries/Components/Button.js

@@ -20,7 +20,7 @@ const View = require('./View/View');
 
 const invariant = require('invariant');
 
-import type {PressEvent} from '../Types/CoreEventTypes';
+import type {PressEvent, KeyEvent} from '../Types/CoreEventTypes';
 import type {FocusEvent, BlurEvent} from './TextInput/TextInput'; // TODO(OSS Candidate ISS#2710739)
 import type {ColorValue} from '../StyleSheet/StyleSheetTypes';
 
@@ -113,6 +113,28 @@ type ButtonProps = $ReadOnly<{|
    * Handler to be called when the button loses key focus
    */
   onFocus?: ?(e: FocusEvent) => void,
+
+  /**
+   * Handler to be called when a key down press is detected
+   */
+  onKeyDown?: ?(e: KeyEvent) => void,
+
+  /**
+   * Handler to be called when a key up press is detected
+   */
+  onKeyUp?: ?(e: KeyEvent) => void,
+
+  /*
+   * Array of keys to receive key down events for
+   * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow",
+   */
+  validKeysDown?: ?Array<string>,
+
+  /*
+   * Array of keys to receive key up events for
+   * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow",
+   */
+  validKeysUp?: ?Array<string>,
   // ]TODO(OSS Candidate ISS#2710739)
 |}>;
 
@@ -163,6 +185,10 @@ class Button extends React.Component<ButtonProps> {
       testID,
       onFocus, // TODO(OSS Candidate ISS#2710739)
       onBlur, // TODO(OSS Candidate ISS#2710739)
+      onKeyDown,
+      validKeysDown,
+      validKeysUp,
+      onKeyUp,
     } = this.props;
     const buttonStyles = [styles.button];
     const textStyles = [styles.text];
@@ -207,6 +233,10 @@ class Button extends React.Component<ButtonProps> {
         onPress={onPress}
         onFocus={onFocus} // TODO(OSS Candidate ISS#2710739)
         onBlur={onBlur} // TODO(OSS Candidate ISS#2710739)
+        onKeyDown={onKeyDown}
+        onKeyUp={onKeyUp}
+        validKeysDown={validKeysDown}
+        validKeysUp={validKeysUp}
         touchSoundDisabled={touchSoundDisabled}>
         <View style={buttonStyles}>
           <Text style={textStyles} disabled={disabled}>

Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap

@@ -9,6 +9,8 @@ exports[`<Pressable /> should render as expected: should deep render when mocked
   onBlur={[Function]}
   onClick={[Function]}
   onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -29,6 +31,8 @@ exports[`<Pressable /> should render as expected: should deep render when not mo
   onBlur={[Function]}
   onClick={[Function]}
   onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}

Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap

@@ -13,6 +13,8 @@ exports[`TextInput tests should render as expected: should deep render when mock
   onChange={[Function]}
   onClick={[Function]}
   onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -42,6 +44,8 @@ exports[`TextInput tests should render as expected: should deep render when not
   onChange={[Function]}
   onClick={[Function]}
   onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}

Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -82,6 +82,18 @@ type Props = $ReadOnly<{|
    */
   nextFocusUp?: ?number,
 
+  /*
+   * Array of keys to receive key down events for
+   * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow",
+   */
+  validKeysDown?: ?Array<string>,
+
+  /*
+   * Array of keys to receive key up events for
+   * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow",
+   */
+  validKeysUp?: ?Array<string>,
+
   /**
    * Set to true to add the ripple effect to the foreground of the view, instead
    * of the background. This is useful if one of your child views has a
@@ -297,6 +309,8 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         nextFocusUp: this.props.nextFocusUp,
         onLayout: this.props.onLayout,
         testID: this.props.testID,
+        validKeysDown: this.props.validKeysDown,
+        validKeysUp: this.props.validKeysUp,
       },
       ...children,
     );

Libraries/Components/Touchable/TouchableOpacity.js

@@ -40,6 +40,17 @@ type Props = $ReadOnly<{|
   style?: ?ViewStyleProp,
 
   hostRef: React.Ref<typeof Animated.View>,
+  /*
+   * Array of keys to receive key down events for
+   * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow",
+   */
+  validKeysDown?: ?Array<string>,
+
+  /*
+   * Array of keys to receive key up events for
+   * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow",
+   */
+  validKeysUp?: ?Array<string>,
 |}>;
 
 type State = $ReadOnly<{|
@@ -165,6 +176,18 @@ class TouchableOpacity extends React.Component<Props, State> {
           this.props.onFocus(event);
         }
       },
+      onKeyDown: event => {
+        if (this.props.onKeyDown != null) {
+          this.props.onKeyDown(event);
+        }
+      },
+      onKeyUp: event => {
+        if (this.props.onKeyUp != null) {
+          this.props.onKeyUp(event);
+        }
+      },
+      validKeysDown: this.props.validKeysDown,
+      validKeysUp: this.props.validKeysUp,
       onLongPress: this.props.onLongPress,
       onPress: this.props.onPress,
       onPressIn: event => {
@@ -279,6 +302,10 @@ class TouchableOpacity extends React.Component<Props, State> {
         onDrop={this.props.onDrop}
         onFocus={this.props.onFocus}
         onBlur={this.props.onBlur}
+        onKeyDown={this.props.onKeyDown}
+        onKeyUp={this.props.onKeyUp}
+        validKeysDown={this.props.validKeysDown}
+        validKeysUp={this.props.validKeysUp}
         draggedTypes={this.props.draggedTypes} // ]TODO(macOS ISS#2323203)
         ref={this.props.hostRef}
         {...eventHandlersWithoutBlurAndFocus}>

Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -26,6 +26,7 @@ import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {
   BlurEvent,
   FocusEvent,
+  KeyEvent,
   LayoutEvent,
   PressEvent,
   MouseEvent, // TODO(macOS ISS#2323203)
@@ -64,6 +65,10 @@ type Props = $ReadOnly<{|
   onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
   onBlur?: ?(event: BlurEvent) => mixed,
   onFocus?: ?(event: FocusEvent) => mixed,
+  onKeyDown?: ?(event: KeyEvent) => mixed,
+  onKeyUp?: ?(event: KeyEvent) => mixed,
+  validKeysDown?: ?Array<string>,
+  validKeysUp?: ?Array<string>,
   onLayout?: ?(event: LayoutEvent) => mixed,
   onLongPress?: ?(event: PressEvent) => mixed,
   onPress?: ?(event: PressEvent) => mixed,
@@ -106,6 +111,10 @@ const PASSTHROUGH_PROPS = [
   'onAccessibilityAction',
   'onBlur',
   'onFocus',
+  'onKeyDown',
+  'onKeyUp',
+  'validKeysDown',
+  'validKeysUp',
   'onLayout',
   'onMouseEnter', // [TODO(macOS ISS#2323203)
   'onMouseLeave',
@@ -227,6 +236,10 @@ function createPressabilityConfig(props: Props): PressabilityConfig {
     android_disableSound: props.touchSoundDisabled,
     onBlur: props.onBlur,
     onFocus: props.onFocus,
+    onKeyDown: props.onKeyDown,
+    onKeyUp: props.onKeyUp,
+    validKeysDown: props.validKeysDown,
+    validKeysUp: props.validKeysUp,
     onLongPress: props.onLongPress,
     onPress: props.onPress,
     onPressIn: props.onPressIn,

Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap

@@ -7,6 +7,8 @@ exports[`TouchableHighlight renders correctly 1`] = `
   enableFocusRing={true}
   focusable={false}
   onClick={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}

Libraries/Components/View/ReactNativeViewAttributes.js

@@ -42,6 +42,10 @@ const UIView = {
   onDragEnter: true,
   onDragLeave: true,
   onDrop: true,
+  onKeyDown: true,
+  onKeyUp: true,
+  validKeysDown: true,
+  validKeysUp: true,
   draggedTypes: true, // ]TODO(macOS ISS#2323203)
   style: ReactNativeStyleAttributes,
 };

Libraries/Components/View/ReactNativeViewViewConfig.js

@@ -45,6 +45,18 @@ const ReactNativeViewConfig = {
         captured: 'onFocusCapture',
       },
     },
+    topKeyUp: {
+      phasedRegistrationNames: {
+        bubbled: 'onKeyUp',
+        captured: 'onKeyUpCapture',
+      },
+    },
+    topKeyDown: {
+      phasedRegistrationNames: {
+        bubbled: 'onKeyDown',
+        captured: 'onKeyDownCapture',
+      },
+    },
     topKeyPress: {
       phasedRegistrationNames: {
         bubbled: 'onKeyPress',
@@ -343,6 +355,8 @@ const ReactNativeViewConfig = {
       : {process: require('../../StyleSheet/processTransform')}): any),
     translateX: true,
     translateY: true,
+    validKeysDown: true,
+    validKeysUp: true,
     width: true,
     zIndex: true,
   },

Libraries/Components/View/ReactNativeViewViewConfigMacOS.js

@@ -47,6 +47,10 @@ const ReactNativeViewViewConfigMacOS = {
     onDragLeave: true,
     onDrop: true,
     onFocus: true,
+    onKeyDown: true,
+    onKeyUp: true,
+    validKeysDown: true,
+    validKeysUp: true,
     onMouseEnter: true,
     onMouseLeave: true,
     tooltip: true,

Libraries/Components/View/ViewPropTypes.js

@@ -18,6 +18,7 @@ import type {
   Layout,
   LayoutEvent,
   ScrollEvent, // TODO(macOS ISS#2323203)
+  KeyEvent,
 } from '../../Types/CoreEventTypes';
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {Node} from 'react';
@@ -33,6 +34,8 @@ import type {
 
 // [TODO(macOS ISS#2323203)
 import type {DraggedTypesType} from '../View/DraggedType';
+//$FlowFixMe
+import {array} from 'yargs';
 // ]TODO(macOS ISS#2323203)
 
 export type ViewLayout = Layout;
@@ -41,6 +44,8 @@ export type ViewLayoutEvent = LayoutEvent;
 type BubblingEventProps = $ReadOnly<{|
   onBlur?: ?(event: BlurEvent) => mixed,
   onFocus?: ?(event: FocusEvent) => mixed,
+  onKeyDown?: ?(event: KeyEvent) => mixed,
+  onKeyUp?: ?(event: KeyEvent) => mixed,
 |}>;
 
 type DirectEventProps = $ReadOnly<{|
@@ -599,6 +604,18 @@ export type ViewProps = $ReadOnly<{|
    */
   enableFocusRing?: ?boolean, // TODO(macOS ISS#2323203)
 
+  /*
+   * Array of keys to receive key down events for
+   * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow",
+   */
+  validKeysDown?: ?array<string>,
+
+  /*
+   * Array of keys to receive key up events for
+   * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow",
+   */
+  validKeysUp?: ?array<string>,
+
   /**
    * Enables Dran'n'Drop Support for certain types of dragged types
    *

Libraries/Pressability/Pressability.js

@@ -17,6 +17,7 @@ import {normalizeRect, type RectOrSize} from '../StyleSheet/Rect';
 import type {
   BlurEvent,
   FocusEvent,
+  KeyEvent,
   PressEvent,
   MouseEvent,
 } from '../Types/CoreEventTypes';
@@ -93,6 +94,28 @@ export type PressabilityConfig = $ReadOnly<{|
    */
   onFocus?: ?(event: FocusEvent) => mixed,
 
+  /*
+   * Called after a key down event is detected.
+   */
+  onKeyDown?: ?(event: KeyEvent) => mixed,
+
+  /*
+   * Called after a key up event is detected.
+   */
+  onKeyUp?: ?(event: KeyEvent) => mixed,
+
+  /*
+   * Array of keys to receive key down events for
+   * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow",
+   */
+  validKeysDown?: ?Array<string>,
+
+  /*
+   * Array of keys to receive key up events for
+   * For arrow keys, add "leftArrow", "rightArrow", "upArrow", "downArrow",
+   */
+  validKeysUp?: ?Array<string>,
+
   /**
    * Called when the hover is activated to provide visual feedback.
    */
@@ -156,6 +179,8 @@ export type EventHandlers = $ReadOnly<{|
   onBlur: (event: BlurEvent) => void,
   onClick: (event: PressEvent) => void,
   onFocus: (event: FocusEvent) => void,
+  onKeyDown: (event: KeyEvent) => void,
+  onKeyUp: (event: KeyEvent) => void,
   onMouseEnter?: (event: MouseEvent) => void,
   onMouseLeave?: (event: MouseEvent) => void,
   onResponderGrant: (event: PressEvent) => void,
@@ -446,6 +471,21 @@ export default class Pressability {
       },
     };
 
+    const keyEventHandlers = {
+      onKeyDown: (event: KeyEvent): void => {
+        const {onKeyDown} = this._config;
+        if (onKeyDown != null) {
+          onKeyDown(event);
+        }
+      },
+      onKeyUp: (event: KeyEvent): void => {
+        const {onKeyUp} = this._config;
+        if (onKeyUp != null) {
+          onKeyUp(event);
+        }
+      },
+    };
+
     const responderEventHandlers = {
       onStartShouldSetResponder: (): boolean => {
         const {disabled} = this._config;
@@ -602,6 +642,7 @@ export default class Pressability {
       ...focusEventHandlers,
       ...responderEventHandlers,
       ...mouseEventHandlers,
+      ...keyEventHandlers,
     };
   }