From 09fbe85d10b8e12b74e282c0d44fff7a53a472f6 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Mon, 29 Mar 2021 13:33:55 -0700
Subject: [PATCH] [fix] Pressable supports onKeyDown prop

Fix #1950
Close #1951
---
 packages/examples/pages/pressable/index.js    |  3 ++
 .../src/exports/Pressable/index.js            | 48 +++++++++++++++----
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/packages/examples/pages/pressable/index.js b/packages/examples/pages/pressable/index.js
index 25b8648b..d8a82018 100644
--- a/packages/examples/pages/pressable/index.js
+++ b/packages/examples/pages/pressable/index.js
@@ -29,6 +29,9 @@ export default function PressablePage() {
           disabled={disabled}
           onHoverIn={handleEvent('onHoverIn')}
           onHoverOut={handleEvent('onHoverOut')}
+          onKeyDown={(e) => {
+            console.log(e.key);
+          }}
           onLongPress={handleEvent('onLongPress - 750ms delay')}
           onPress={handleEvent(`onPress - ${delay}ms delay`)}
           onPressIn={handleEvent(`onPressIn - ${delay}ms delay`)}
diff --git a/packages/react-native-web/src/exports/Pressable/index.js b/packages/react-native-web/src/exports/Pressable/index.js
index c1b773f9..4bcccccc 100644
--- a/packages/react-native-web/src/exports/Pressable/index.js
+++ b/packages/react-native-web/src/exports/Pressable/index.js
@@ -81,6 +81,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     onFocus,
     onHoverIn,
     onHoverOut,
+    onKeyDown,
     onLongPress,
     onPress,
     onPressMove,
@@ -127,6 +128,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
   );
 
   const pressEventHandlers = usePressEvents(hostRef, pressConfig);
+  const { onKeyDown: onKeyDownPress } = pressEventHandlers;
 
   useHover(hostRef, {
     contain: true,
@@ -138,16 +140,41 @@ function Pressable(props: Props, forwardedRef): React.Node {
 
   const interactionState = { hovered, focused, pressed };
 
-  function createFocusHandler(callback, value) {
-    return function (event) {
-      if (event.nativeEvent.target === hostRef.current) {
-        setFocused(value);
-        if (callback != null) {
-          callback(event);
+  const blurHandler = React.useCallback(
+    (e) => {
+      if (e.nativeEvent.target === hostRef.current) {
+        setFocused(false);
+        if (onBlur != null) {
+          onBlur(e);
         }
       }
-    };
-  }
+    },
+    [hostRef, setFocused, onBlur]
+  );
+
+  const focusHandler = React.useCallback(
+    (e) => {
+      if (e.nativeEvent.target === hostRef.current) {
+        setFocused(true);
+        if (onFocus != null) {
+          onFocus(e);
+        }
+      }
+    },
+    [hostRef, setFocused, onFocus]
+  );
+
+  const keyDownHandler = React.useCallback(
+    (e) => {
+      if (onKeyDownPress != null) {
+        onKeyDownPress(e);
+      }
+      if (onKeyDown != null) {
+        onKeyDown(e);
+      }
+    },
+    [onKeyDown, onKeyDownPress]
+  );
 
   return (
     <View
@@ -155,8 +182,9 @@ function Pressable(props: Props, forwardedRef): React.Node {
       {...pressEventHandlers}
       accessibilityDisabled={disabled}
       focusable={!disabled && focusable !== false}
-      onBlur={createFocusHandler(onBlur, false)}
-      onFocus={createFocusHandler(onFocus, true)}
+      onBlur={blurHandler}
+      onFocus={focusHandler}
+      onKeyDown={keyDownHandler}
       ref={setRef}
       style={[
         !disabled && styles.root,