Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F3530200
D10004.id33785.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
12 KB
Referenced Files
None
Subscribers
None
D10004.id33785.diff
View Options
diff --git a/lib/types/react-types.js b/lib/types/react-types.js
--- a/lib/types/react-types.js
+++ b/lib/types/react-types.js
@@ -4,3 +4,5 @@
export type ReactRefSetter<I> =
| { current: null | I, ... }
| ((null | I) => mixed);
+
+export type ReactRef<T> = { current: null | T };
diff --git a/native/chat/swipeable-message.react.js b/native/chat/swipeable-message.react.js
--- a/native/chat/swipeable-message.react.js
+++ b/native/chat/swipeable-message.react.js
@@ -2,9 +2,13 @@
import type { IconProps } from '@expo/vector-icons';
import * as Haptics from 'expo-haptics';
+import invariant from 'invariant';
import * as React from 'react';
import { View } from 'react-native';
-import { PanGestureHandler } from 'react-native-gesture-handler';
+import {
+ PanGestureHandler,
+ type PanGestureEvent,
+} from 'react-native-gesture-handler';
import Animated, {
useAnimatedGestureHandler,
useSharedValue,
@@ -192,14 +196,25 @@
}, [triggerReply, triggerSidebar]);
const translateX = useSharedValue(0);
- const swipeEvent = useAnimatedGestureHandler(
+ const swipeEvent = useAnimatedGestureHandler<PanGestureEvent>(
{
- onStart: (event, ctx) => {
+ onStart: (
+ event /*: PanGestureEvent */,
+ ctx /*: { [string]: mixed } */,
+ ) => {
ctx.translationAtStart = translateX.value;
cancelAnimation(translateX.value);
},
- onActive: (event, ctx) => {
- const translationX = ctx.translationAtStart + event.translationX;
+ onActive: (
+ event /*: PanGestureEvent */,
+ ctx /*: { [string]: mixed } */,
+ ) => {
+ const { translationAtStart } = ctx;
+ invariant(
+ typeof translationAtStart === 'number',
+ 'translationAtStart should be number',
+ );
+ const translationX = translationAtStart + event.translationX;
const baseActiveTranslation = isViewer
? Math.min(translationX, 0)
: Math.max(translationX, 0);
@@ -222,7 +237,7 @@
}
ctx.prevPastSecondaryThreshold = pastSecondaryThreshold;
},
- onEnd: event => {
+ onEnd: (event /*: PanGestureEvent */) => {
const absValue = Math.abs(translateX.value);
if (absValue >= secondaryThreshold && secondaryActionExists) {
runOnJS(secondaryAction)();
diff --git a/native/components/full-screen-view-modal.react.js b/native/components/full-screen-view-modal.react.js
--- a/native/components/full-screen-view-modal.react.js
+++ b/native/components/full-screen-view-modal.react.js
@@ -14,12 +14,17 @@
PanGestureHandler,
TapGestureHandler,
State as GestureState,
+ type PinchGestureEvent,
+ type PanGestureEvent,
+ type TapGestureEvent,
} from 'react-native-gesture-handler';
import Orientation from 'react-native-orientation-locker';
import Animated from 'react-native-reanimated';
+import type { EventResult } from 'react-native-reanimated';
import { SafeAreaView } from 'react-native-safe-area-context';
import { type Dimensions } from 'lib/types/media-types.js';
+import type { ReactRef } from 'lib/types/react-types.js';
import SWMansionIcon from './swmansion-icon.react.js';
import ConnectedStatusBar from '../connected-status-bar.react.js';
@@ -187,23 +192,35 @@
imageWidth: Value;
imageHeight: Value;
- pinchHandler = React.createRef();
- panHandler = React.createRef();
- singleTapHandler = React.createRef();
- doubleTapHandler = React.createRef();
- handlerRefs = [
+ pinchHandler: ReactRef<PinchGestureHandler> = React.createRef();
+ panHandler: ReactRef<PanGestureHandler> = React.createRef();
+ singleTapHandler: ReactRef<TapGestureHandler> = React.createRef();
+ doubleTapHandler: ReactRef<TapGestureHandler> = React.createRef();
+ handlerRefs: $ReadOnlyArray<
+ | ReactRef<PinchGestureHandler>
+ | ReactRef<PanGestureHandler>
+ | ReactRef<TapGestureHandler>,
+ > = [
this.pinchHandler,
this.panHandler,
this.singleTapHandler,
this.doubleTapHandler,
];
- beforeDoubleTapRefs;
- beforeSingleTapRefs;
-
- pinchEvent;
- panEvent;
- singleTapEvent;
- doubleTapEvent;
+ beforeDoubleTapRefs: $ReadOnlyArray<
+ | ReactRef<PinchGestureHandler>
+ | ReactRef<PanGestureHandler>
+ | ReactRef<TapGestureHandler>,
+ >;
+ beforeSingleTapRefs: $ReadOnlyArray<
+ | ReactRef<PinchGestureHandler>
+ | ReactRef<PanGestureHandler>
+ | ReactRef<TapGestureHandler>,
+ >;
+
+ pinchEvent: EventResult<PinchGestureEvent>;
+ panEvent: EventResult<PanGestureEvent>;
+ singleTapEvent: EventResult<TapGestureEvent>;
+ doubleTapEvent: EventResult<TapGestureEvent>;
scale: Node;
x: Node;
@@ -244,7 +261,7 @@
const panVelocityY = new Value(0);
const panAbsoluteX = new Value(0);
const panAbsoluteY = new Value(0);
- this.panEvent = event([
+ this.panEvent = event<PanGestureEvent>([
{
nativeEvent: {
state: panState,
@@ -283,7 +300,7 @@
const pinchScale = new Value(1);
const pinchFocalX = new Value(0);
const pinchFocalY = new Value(0);
- this.pinchEvent = event([
+ this.pinchEvent = event<PinchGestureEvent>([
{
nativeEvent: {
state: pinchState,
@@ -299,7 +316,7 @@
const singleTapState = new Value(-1);
const singleTapX = new Value(0);
const singleTapY = new Value(0);
- this.singleTapEvent = event([
+ this.singleTapEvent = event<TapGestureEvent>([
{
nativeEvent: {
state: singleTapState,
@@ -313,7 +330,7 @@
const doubleTapState = new Value(-1);
const doubleTapX = new Value(0);
const doubleTapY = new Value(0);
- this.doubleTapEvent = event([
+ this.doubleTapEvent = event<TapGestureEvent>([
{
nativeEvent: {
state: doubleTapState,
diff --git a/native/components/gesture-touchable-opacity.react.js b/native/components/gesture-touchable-opacity.react.js
--- a/native/components/gesture-touchable-opacity.react.js
+++ b/native/components/gesture-touchable-opacity.react.js
@@ -6,6 +6,8 @@
LongPressGestureHandler,
TapGestureHandler,
State as GestureState,
+ type LongPressGestureEvent,
+ type TapGestureEvent,
} from 'react-native-gesture-handler';
import Animated, { EasingNode } from 'react-native-reanimated';
@@ -81,7 +83,7 @@
const tapState = useValue(-1);
const longPressEvent = React.useMemo(
() =>
- event([
+ event<LongPressGestureEvent>([
{
nativeEvent: {
state: longPressState,
@@ -92,7 +94,7 @@
);
const tapEvent = React.useMemo(
() =>
- event([
+ event<TapGestureEvent>([
{
nativeEvent: {
state: tapState,
diff --git a/native/flow-typed/npm/react-native-gesture-handler_v2.x.x.js b/native/flow-typed/npm/react-native-gesture-handler_v2.x.x.js
--- a/native/flow-typed/npm/react-native-gesture-handler_v2.x.x.js
+++ b/native/flow-typed/npm/react-native-gesture-handler_v2.x.x.js
@@ -379,8 +379,8 @@
...$EventHandlers<ExtraEventsProps>,
id?: string,
enabled?: boolean,
- waitFor?: React$Ref<any> | Array<React$Ref<any>>,
- simultaneousHandlers?: React$Ref<any> | Array<React$Ref<any>>,
+ waitFor?: React$Ref<any> | $ReadOnlyArray<React$Ref<any>>,
+ simultaneousHandlers?: React$Ref<any> | $ReadOnlyArray<React$Ref<any>>,
shouldCancelWhenOutside?: boolean,
minPointers?: number,
hitSlop?: HitSlop,
@@ -403,6 +403,14 @@
/////////////////////////////////////////////////////////////////////////////
// Tap
+ declare export type TapGestureEvent = {
+ +x: number,
+ +y: number,
+ +absoluteX: number,
+ +absoluteY: number,
+ ...
+ };
+
declare export type TapGestureHandlerProps = $GestureHandlerProps<
{
maxDurationMs?: number,
@@ -412,13 +420,7 @@
minPointers?: number,
...
},
- {
- x: number,
- y: number,
- absoluteX: number,
- absoluteY: number,
- ...
- }
+ TapGestureEvent,
>;
declare export class TapGestureHandler extends React$Component<TapGestureHandlerProps> {}
@@ -463,19 +465,21 @@
/////////////////////////////////////////////////////////////////////////////
// LongPress
+ declare export type LongPressGestureEvent = {
+ +x: number,
+ +y: number,
+ +absoluteX: number,
+ +absoluteY: number,
+ ...
+ };
+
declare export type LongPressGestureHandlerProps = $GestureHandlerProps<
{
minDurationMs?: number,
maxDist?: number,
...
},
- {
- x: number,
- y: number,
- absoluteX: number,
- absoluteY: number,
- ...
- }
+ LongPressGestureEvent,
>;
declare export class LongPressGestureHandler extends React$Component<LongPressGestureHandlerProps> {}
@@ -483,6 +487,18 @@
/////////////////////////////////////////////////////////////////////////////
// PanGesture
+ declare export type PanGestureEvent = {
+ +x: number,
+ +y: number,
+ +absoluteX: number,
+ +absoluteY: number,
+ +translationX: number,
+ +translationY: number,
+ +velocityX: number,
+ +velocityY: number,
+ ...
+ };
+
declare export type PanGestureHandlerProps = $GestureHandlerProps<
{
activeOffsetY?: number | [number, number],
@@ -498,17 +514,7 @@
avgTouches?: boolean,
...
},
- {
- x: number,
- y: number,
- absoluteX: number,
- absoluteY: number,
- translationX: number,
- translationY: number,
- velocityX: number,
- velocityY: number,
- ...
- }
+ PanGestureEvent,
>;
declare export class PanGestureHandler extends React$Component<PanGestureHandlerProps> {}
@@ -516,15 +522,17 @@
/////////////////////////////////////////////////////////////////////////////
// Pinch
+ declare export type PinchGestureEvent = {
+ +scale: number,
+ +focalX: number,
+ +focalY: number,
+ +velocity: number,
+ ...
+ };
+
declare export type PinchGestureHandlerProps = $GestureHandlerProps<
{ ... },
- {
- scale: number,
- focalX: number,
- focalY: number,
- velocity: number,
- ...
- }
+ PinchGestureEvent,
>;
declare export class PinchGestureHandler extends React$Component<PinchGestureHandlerProps> {}
diff --git a/native/flow-typed/npm/react-native-reanimated_v2.x.x.js b/native/flow-typed/npm/react-native-reanimated_v2.x.x.js
--- a/native/flow-typed/npm/react-native-reanimated_v2.x.x.js
+++ b/native/flow-typed/npm/react-native-reanimated_v2.x.x.js
@@ -447,7 +447,7 @@
| GestureStateActive
| GestureStateEnd;
- declare type $Event<T: { ... }> = {
+ declare export type $Event<T: { ... }> = {
handlerTag: number,
numberOfPointers: number,
state: GestureState,
@@ -456,11 +456,16 @@
...
};
+ declare export type EventResult<T: { ... }, E: $Event<T> = $Event<T>> =
+ $SyntheticEvent<E> => void;
+
declare type ToValue = (val: mixed) => ValueImpl;
- declare type Event = <T, E: $Event<T>>(defs: $ReadOnlyArray<{
- +nativeEvent: $Shape<$ObjMap<E, ToValue>>,
- ...
- }>) => $SyntheticEvent<E> => void;
+ declare type Event = <T: { ... }, E: $Event<T> = $Event<T>>(
+ defs: $ReadOnlyArray<{
+ +nativeEvent: $Shape<$ObjMap<E, ToValue>>,
+ ...
+ }>,
+ ) => EventResult<T, E>;
declare type UseValue = (initialVal: number) => ValueImpl;
@@ -469,7 +474,7 @@
context: {| [name: string]: mixed |},
) => mixed;
- declare type UseAnimatedGestureHandler = <T, E: $Event<T>>(
+ declare type UseAnimatedGestureHandler = <T, E: $Event<T> = $Event<T>>(
callbacks: $Shape<{|
+onStart: AnimatedGestureHandlerEventCallback<T, E>,
+onActive: AnimatedGestureHandlerEventCallback<T, E>,
@@ -479,7 +484,7 @@
+onFinish: AnimatedGestureHandlerEventCallback<T, E>,
|}>,
dependencies?: $ReadOnlyArray<mixed>,
- ) => E;
+ ) => $SyntheticEvent<E> => mixed;
declare export type SharedValue<T> = {
value: T,
diff --git a/native/media/video-playback-modal.react.js b/native/media/video-playback-modal.react.js
--- a/native/media/video-playback-modal.react.js
+++ b/native/media/video-playback-modal.react.js
@@ -6,7 +6,10 @@
import { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import filesystem from 'react-native-fs';
-import { TapGestureHandler } from 'react-native-gesture-handler';
+import {
+ TapGestureHandler,
+ type TapGestureEvent,
+} from 'react-native-gesture-handler';
import * as Progress from 'react-native-progress';
import Animated from 'react-native-reanimated';
import { SafeAreaView } from 'react-native-safe-area-context';
@@ -232,7 +235,7 @@
const singleTapEvent = React.useMemo(
() =>
- event([
+ event<TapGestureEvent>([
{
nativeEvent: {
state: singleTapState,
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Thu, Dec 26, 1:16 AM (11 h, 21 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2703498
Default Alt Text
D10004.id33785.diff (12 KB)
Attached To
Mode
D10004: [Flow202][native][skip-ci] [20/x] Update Reanimated libdef to match GestureHandler
Attached
Detach File
Event Timeline
Log In to Comment