[FlowCleanup] Add flow types to PanResponder #21291

empyrical · 2018-09-24T16:09:55Z

This PR adds flow types to the PanResponder module. It is part of my effort to flowtype the Swipable* classes.

A new touchHistory field had to be added to SyntheticEvent as well.

Test Plan:

Flow check and running the whole jest test suite showed no signs of regressions.

Release Notes:

[GENERAL] [ENHANCEMENT] [Libraries/Interaction/PanResponder.js] - Added flow type annotations, and exported the GestureState type which is used by callbacks.
[GENERAL] [ENHANCEMENT] [Libraries/Experimental/SwipeableRow/SwipeableRow.js] - Flow typed SwipableRow's use of PanResponder
[GENERAL] [ENHANCEMENT] [Libraries/Types/CoreEventTypes.js] - Added a new touchHistory field to SyntheticEvent

empyrical · 2018-09-24T16:13:23Z

Looks like tests are failing because I rebased it against master after Metro was bumped, and that version of Metro's not on NPM yet. Will need to rerun these when that's resolved.

TheSavior · 2018-09-24T16:56:12Z

Libraries/Interaction/PanResponder.js

-  _updateGestureStateOnMove: function(gestureState, touchHistory) {
+  _updateGestureStateOnMove(
+    gestureState: GestureState,
+    touchHistory: $PropertyType<PressEvent, 'touchHistory'>,


😉 ❤️

TheSavior · 2018-09-24T16:59:24Z

Libraries/Types/CoreEventTypes.js

@@ -26,6 +26,12 @@ export type SyntheticEvent<T> = $ReadOnly<{|
  persist: () => void,
  target: ?number,
  timeStamp: number,
+  touchHistory: $ReadOnly<{|


Is this always set? Like, does View's onLayout callback include touchHistory?

I am not sure - I tried a few events out, and they all seemed to have it - but those were all touch-related, so that it probably why. I will make it nullable, but will require some more modifications to panresponder

Looks like this is where it is set:

react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js

Lines 1629 to 1638 in 5491c3f

/**

* `touchHistory` isn't actually on the native event, but putting it in the

* interface will ensure that it is cleaned up when pooled/destroyed. The

* `ResponderEventPlugin` will populate it appropriately.

*/

var ResponderSyntheticEvent = SyntheticEvent.extend({

touchHistory: function(nativeEvent) {

return null; // Actually doesn't even look at the native event.

}

});

Want to add a matching ResponderSyntheticEvent to CoreEventTypes?

export type ResponderSyntheticEvent<T> = $ReadOnly<{| ...SyntheticEvent<T> // touchHistory... |}>

Tried that, and it works great! 👍

TheSavior · 2018-09-24T17:02:47Z

This is amazing, thank you so much for taking on Flow typing PanResponder. This will be a great win for type safety!

facebook-github-bot

TheSavior has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

TheSavior · 2018-09-24T19:39:17Z

Libraries/Interaction/PanResponder.js

    const panHandlers = {
-      onStartShouldSetResponder: function(e) {
-        return config.onStartShouldSetPanResponder === undefined
+      onStartShouldSetResponder(event: PressEvent) {


If you type this as returning a boolean I think you'll find that the flow type for onStartShouldSetPanResponder is not correct.

Same with onStartShouldSetResponderCapture and onResponderTerminationRequest

👍 will take a look at this. Also I realize that the type for touchHistory.touchBank is wrong, so I will fix that too.

empyrical · 2018-09-25T01:12:27Z

Added return types to everything in panHandlers. Also, I made two different callback types - ActiveCallback, which returns a boolean, and PassiveCallback which is mixed. Curious about feedback on the naming of them/if they're okay.

RSNara

On the whole, this is really awesome! What do you think of the comments I left?

RSNara · 2018-09-25T02:49:09Z

Libraries/Interaction/PanResponder.js

@@ -121,6 +124,81 @@ const currentCentroidY = TouchHistoryMath.currentCentroidY;
 * [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/master/RNTester/js/PanResponderExample.js)
 */

+export type GestureState = {|


Are we missing a $ReadOnly here?

Several places in PanResponder change the values of gestureState, so setting this to $ReadOnly raises many errors

RSNara · 2018-09-25T02:51:13Z

Libraries/Interaction/PanResponder.js

+   * ID of the gestureState - persisted as long as there at least one touch on screen
+   */
+  stateID: number,
+  /**


nit: I think it'd be a good idea to space out the comment from the property above it. It visually groups the comment with the property, which makes it easier (for at least me) to read this type.

Spaced them out

RSNara · 2018-09-25T02:51:45Z

Libraries/Interaction/PanResponder.js

+   */
+  numberActiveTouches: number,
+  /**
+   * @private


I think you forgot to put a description here.

RSNara · 2018-09-25T02:59:57Z

Libraries/Interaction/PanResponder.js

    const panHandlers = {
-      onStartShouldSetResponder: function(e) {
-        return config.onStartShouldSetPanResponder === undefined
+      onStartShouldSetResponder(event: PressEvent): boolean {


I wonder if it's better to add the type annotation to panHandlers instead:

const panHandlers: {[key: string]: (event: PressEvent) => boolean} = { onStartShouldSetResponder(event) { // ... } }

With this approach, you only have to type once for the whole map, as opposed to once per every function in it. Also, if someone adds a function to this map that doesn't conform to the panHandler signature, flow will raise an error.

Not all of the functions have the same signature (see the types in PanResponderConfig) so this wouldn't work (unless I had it be a type like: {[key: string]: ActiveCallback | PassiveCallback})

facebook-github-bot

rsnara has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

react-native-bot · 2018-09-27T21:25:04Z

@empyrical merged commit 3f79b2a into facebook:master.

Once this commit is added to a release, you will see the corresponding version tag below the description at 3f79b2a. If the commit has a single master tag, it is not yet part of a release.

Summary: This PR adds flow types to the `PanResponder` module. It is part of my effort to flowtype the `Swipable*` classes. A new `touchHistory` field had to be added to `SyntheticEvent` as well. Pull Request resolved: facebook#21291 Reviewed By: TheSavior Differential Revision: D10013265 Pulled By: RSNara fbshipit-source-id: 3cd65a0eae41c756d1605e6771588d820f040e2a

Add flow types to PanResponder

436eccc

empyrical requested a review from TheSavior September 24, 2018 16:13

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Sep 24, 2018

TheSavior reviewed Sep 24, 2018

View reviewed changes

react-native-bot added API: PanResponder 🔶APIs labels Sep 24, 2018

Only show on Responder-related events

69c87f4

facebook-github-bot reviewed Sep 24, 2018

View reviewed changes

TheSavior reviewed Sep 24, 2018

View reviewed changes

Clean up and add more types

d0d348f

RSNara reviewed Sep 25, 2018

View reviewed changes

Clean up documentation comments for GestureState

c5095bf

facebook-github-bot reviewed Sep 25, 2018

View reviewed changes

facebook-github-bot closed this in 3f79b2a Sep 27, 2018

facebook locked as resolved and limited conversation to collaborators Sep 27, 2018

react-native-bot added the Merged This PR has been merged. label Sep 27, 2018

hramos changed the title ~~Add flow types to PanResponder~~ [FlowCleanup] Add flow types to PanResponder Oct 1, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FlowCleanup] Add flow types to PanResponder #21291

[FlowCleanup] Add flow types to PanResponder #21291

empyrical commented Sep 24, 2018

empyrical commented Sep 24, 2018

TheSavior Sep 24, 2018

TheSavior Sep 24, 2018

empyrical Sep 24, 2018

TheSavior Sep 24, 2018

TheSavior Sep 24, 2018

empyrical Sep 24, 2018

TheSavior commented Sep 24, 2018

facebook-github-bot left a comment

TheSavior Sep 24, 2018

empyrical Sep 24, 2018

empyrical commented Sep 25, 2018

RSNara left a comment

RSNara Sep 25, 2018

empyrical Sep 25, 2018 •

edited

Loading

RSNara Sep 25, 2018 •

edited

Loading

empyrical Sep 25, 2018

RSNara Sep 25, 2018

empyrical Sep 25, 2018

RSNara Sep 25, 2018

empyrical Sep 25, 2018

facebook-github-bot left a comment

react-native-bot commented Sep 27, 2018

	/**
	* `touchHistory` isn't actually on the native event, but putting it in the
	* interface will ensure that it is cleaned up when pooled/destroyed. The
	* `ResponderEventPlugin` will populate it appropriately.
	*/
	var ResponderSyntheticEvent = SyntheticEvent.extend({
	touchHistory: function(nativeEvent) {
	return null; // Actually doesn't even look at the native event.
	}
	});

[FlowCleanup] Add flow types to PanResponder #21291

[FlowCleanup] Add flow types to PanResponder #21291

Conversation

empyrical commented Sep 24, 2018

Test Plan:

Release Notes:

empyrical commented Sep 24, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TheSavior commented Sep 24, 2018

facebook-github-bot left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

empyrical commented Sep 25, 2018

RSNara left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

empyrical Sep 25, 2018 • edited Loading

Choose a reason for hiding this comment

RSNara Sep 25, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

facebook-github-bot left a comment

Choose a reason for hiding this comment

react-native-bot commented Sep 27, 2018

empyrical Sep 25, 2018 •

edited

Loading

RSNara Sep 25, 2018 •

edited

Loading