Enable hooking state on the stock Pressable component #863

JasonVMo · 2021-08-06T18:47:37Z

Platforms Impacted

Description of changes

When we were on a version <0.63 I ported a bunch of the Pressability and Pressable code from core react-native into our repo. This was done because the libraries were not yet available but actually worked fine against the earlier versions. Now that we have a baseline of >0.63 the Pressable component is now available.

The Pressable component will internally create a PressabilityConfig and do all the gesture management. It also has the android_ripple capabilities which we do not have. As such we should sunset much of the code. This change has a few parts:

Use Base Types (where possible)

This changes a bunch of the types to match what is exposed via PressableProps. This is done to allow the helper hook functions useHoverHelper, useFocusHelper, and usePressHelper to work with either the existing code or the new hook function.

**usePressableState hook

This is a new function that does the appropriate prop decoration to get the current state (and prompt state changes at the parent level) that useAsPressable does. This one simply works against the stock Pressable component instead of a View. This leverages the fact that the stock Pressable internally will manage the PressabilityConfig object.

Verification

This was done as part of me reworking experimental button. (Hopefully a PR for that will be out later today). I split this out into a separate PR. I did this first though and switched experimental button to use a Pressable internally then verified it worked in the tester.

Before	After
Screenshot or description before this change	Screenshot or description with this change

Pull request checklist

This PR has considered (when applicable):

Saadnajmi · 2021-08-06T19:08:36Z

Thanks for this change @JasonVMo ! I was about to ask what I should do here now that we're on 0.63 and people want to use Pressable =) I'll review this when I can later today

Saadnajmi · 2021-08-06T19:17:34Z

packages/utils/interactive-hooks/src/Pressability/Pressability.types.ts

+  onPress?: PressableProps['onPress'];

  /**
-   * Duration (in addition to `delayPressIn`) after which a press gesture is
-   * considered a long press gesture. Defaults to 500 (milliseconds).
+   * Called when the press is activated to provide visual feedback.
   */
-  delayLongPress?: number;
+  onPressIn?: PressableProps['onPressIn'];

  /**
-   * Duration to wait after press down before calling `onPressIn`.
+   * Called when the press is deactivated to undo visual feedback.
   */
-  delayPressIn?: number;
+  onPressOut?: PressableProps['onPressOut'];

  /**
-   * Duration to wait after letting up before calling `onPressOut`.
+   * Called when a long press gesture has been triggered.
   */
-  delayPressOut?: number;
+  onLongPress?: PressableProps['onLongPress'];
+};


Why do we still need these extra props? Are they not in core?

Think of the stock Pressable component as a thin shim around the Pressability library in react-native. The code I brought in before in the /Pressability directory was a port of that code to our project (and to TypeScript). I'm mostly leaving this part unchanged for now. Also PressabilityConfig is not quite the same as PressableProps, they intersect but aren't equal.

The long term plan would be:

Get this change in

Switch all components that use useAsPressable() on View components to usePressableState on Pressable components.

Remove these old files along with the useAsPressable hook.

The long term plan helps me understand the whole port of the Pressability library is going away, thank you. That explains to me why we still have these types.

Saadnajmi · 2021-08-06T19:18:10Z

packages/utils/interactive-hooks/src/Pressability/Pressability.types.ts

@@ -64,7 +34,9 @@ export type PressabilityConfig = Readonly<{
   * Called after the element is focused.
   */
  onFocus?: (event: FocusEvent) => any;


Note: I think it's an open action item that we need to add onFocus/onBlur to RN-macOS pressable. I'm not sure how that affects FURN downstream.

Likely the events never trigger but we should make sure that is on the 0.64 list.

Saadnajmi · 2021-08-06T19:19:17Z

packages/utils/interactive-hooks/src/Pressability/Pressability.types.ts

+export type PressableHoverEventProps = {
+  /**
+   * While the user API is onHoverIn the View event is onMouseEnter
+   */
+  onMouseEnter?: (event: MouseEvent) => any;
+
+  /**
+   * While the user API is onHoverOut the View event is onMouseLeave
+   */
+  onMouseLeave?: (event: MouseEvent) => any;
+};


Where is this ViewEvent coming from? From RNW/win32/macOS?

That's correct, though on 0.64 it may get an implementation on core at some point. The Pressability library has routing code for it, so the events are handled and work, this is simply the name of the events that get view implements.

Saadnajmi · 2021-08-06T19:20:11Z

packages/utils/interactive-hooks/src/Pressability/Pressability.types.ts

+export type PressabilityConfig = Readonly<
+  PressablePressProps &
+    PressableFocusProps &
+    PressableHoverProps & {


Is this not a flow type that will not get read by typescript? That's where I thought ReadOnly<> decorators came from.

Is there any chance of this config getting out of sync with RN-Core in a future version? I.E is this something we could just import from RN-Core?

TypeScript has a Readonly concept as well. I put it in to PressabilityConfig when I did the port for consistency and am just staying consistent with what I had before here. In terms of getting out of sync, most of the types in here are not exposed and are on the inner Pressability library, not Pressable. As we get rid of the old code the interfaces should shift to be based off of what is exposed on PressableProps as much as possible.

packages/utils/interactive-hooks/src/useAsPressable.ts

Saadnajmi · 2021-08-06T19:25:45Z

packages/utils/interactive-hooks/src/useAsPressable.types.ts

+ * Similarly the focus methods exist at the View level but are not exposed on pressable props in 0.63. As a result they
+ * need a similar treatment


Is this true for windows as well? I know it's not for macOS but I thought it was for windows?

JasonVMo added 2 commits August 6, 2021 11:26

enable usePressableState with stock Pressable component

74d2aed

Change files

8d08a82

JasonVMo requested review from rurikoaraki, PPatBoyd, Saadnajmi and FalseLobster August 6, 2021 18:47

JasonVMo added 2 commits August 6, 2021 11:50

fix spacing issues in Pressability.ts

42ea4d6

more spacing fixes

d3a82c0

Saadnajmi reviewed Aug 6, 2021

View reviewed changes

Saadnajmi approved these changes Aug 6, 2021

View reviewed changes

address review feedback

339bc73

rurikoaraki approved these changes Aug 6, 2021

View reviewed changes

JasonVMo merged commit e506337 into microsoft:master Aug 6, 2021

JasonVMo deleted the stock-pressability branch August 6, 2021 23:24

Saadnajmi mentioned this pull request Aug 16, 2021

Add useAsPressable implementation for Android/iOS #116

Closed

Saadnajmi mentioned this pull request Sep 27, 2021

Replace uses of "UseAsPressable" with "usePressableState" #1035

Closed

This was referenced Oct 12, 2021

Support onPress/onLongPress in usePressableState #1061

Merged

[Draft] Switch Button, Checkbox, and RadioButton from View to Pressable #1070

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Enable hooking state on the stock Pressable component #863

Enable hooking state on the stock Pressable component #863

Uh oh!

JasonVMo commented Aug 6, 2021

Uh oh!

Saadnajmi commented Aug 6, 2021

Uh oh!

Saadnajmi Aug 6, 2021

Uh oh!

JasonVMo Aug 6, 2021

Uh oh!

Saadnajmi Aug 6, 2021

Uh oh!

Saadnajmi Aug 6, 2021

Uh oh!

JasonVMo Aug 6, 2021

Uh oh!

Saadnajmi Aug 6, 2021

Uh oh!

JasonVMo Aug 6, 2021

Uh oh!

Saadnajmi Aug 6, 2021

Uh oh!

Saadnajmi Aug 6, 2021

Uh oh!

JasonVMo Aug 6, 2021

Uh oh!

Uh oh!

Uh oh!

Saadnajmi Aug 6, 2021

Uh oh!

Uh oh!

		* Similarly the focus methods exist at the View level but are not exposed on pressable props in 0.63. As a result they
		* need a similar treatment

Enable hooking state on the stock Pressable component #863

Enable hooking state on the stock Pressable component #863

Uh oh!

Conversation

JasonVMo commented Aug 6, 2021

Platforms Impacted

Description of changes

Verification

Pull request checklist

Uh oh!

Saadnajmi commented Aug 6, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!