From 62a107b20d6989bc8648fcca8251a78a98b2a330 Mon Sep 17 00:00:00 2001 From: Marcuz Larsen Date: Wed, 27 Jul 2022 14:39:15 +0200 Subject: [PATCH 1/2] Fixing gesture handler bug with worklets --- README.md | 2 +- package.json | 2 +- src/types/GestureDetector.d.ts | 23 ------- src/utils/fixRNGHmocks.ts | 69 ------------------- src/worklets/gestures/getPanGestureOnBegin.ts | 2 - src/worklets/gestures/getPanGestureOnEnd.ts | 2 - .../gestures/getPanGestureOnUpdate.ts | 2 - src/worklets/getGestures.ts | 2 - 8 files changed, 2 insertions(+), 102 deletions(-) delete mode 100644 src/types/GestureDetector.d.ts delete mode 100644 src/utils/fixRNGHmocks.ts diff --git a/README.md b/README.md index d4bd1e6..a0eb349 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ This library provide multiple components but most importantly the BottomSheet. T | smoothAppearance | object: { waitForContent: boolean, emptyContentHeight?: number } | Ensures a smooth appearance animation of the BottomSheet to eliminate flickering | false | snapEffectDirection | Animated.SharedValue | Used together with SnapEffect component. It tells the BottomSheet how to react to the effect. Please look in examples for more information | false | snapPointBottom | number | This prop is required for the BottomSheet to work | true - | springConfig | object { damping?: number; mass?: number; stiffness?: number; overshootClamping?: boolean; restSpeedThreshold?: number; restDisplacementThreshold?: number; } | Overrule default spring config with custom configuration + | springConfig | object { damping?: number; mass?: number; stiffness?: number; overshootClamping?: boolean; restSpeedThreshold?: number; restDisplacementThreshold?: number; } | Overrule default spring config with custom configuration | testID | string | add testID to the bottomSheet | false | webBoxShadow | object: { offset: number; opacity: number } | Set a box shadow for web | false diff --git a/package.json b/package.json index f65c726..b80adc4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@marcuzgabriel/reanimated-animation-library", "author": "Marcuz Gabriel Larsen ", - "version": "1.0.7", + "version": "1.0.8", "license": "MIT", "scripts": { "android": "react-native run-android", diff --git a/src/types/GestureDetector.d.ts b/src/types/GestureDetector.d.ts deleted file mode 100644 index 8fed693..0000000 --- a/src/types/GestureDetector.d.ts +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { - GestureType, - HandlerCallbacks, -} from 'react-native-gesture-handler/lib/typescript/handlers/gestures/gesture.d.ts'; -import { SharedValue } from 'react-native-gesture-handler/lib/typescript/handlers/gestures/reanimatedWrapper.d.ts'; -import { ComposedGesture } from 'react-native-gesture-handler/lib/typescript/handlers/gestures/gestureComposition.d.ts'; - -export declare interface GestureConfigReference { - config: GestureType[]; - animatedEventHandler: unknown; - animatedHandlers: SharedValue>[] | null> | null; - firstExecution: boolean; - useReanimatedHook: boolean; -} - -interface GestureDetectorProps { - gesture?: ComposedGesture | GestureType; - children?: React.ReactNode; -} - -export declare const GestureDetector: React.FunctionComponent; -export {}; diff --git a/src/utils/fixRNGHmocks.ts b/src/utils/fixRNGHmocks.ts deleted file mode 100644 index 57a5bd8..0000000 --- a/src/utils/fixRNGHmocks.ts +++ /dev/null @@ -1,69 +0,0 @@ -'use strict'; - -/* Fixing issue: https://github.com/software-mansion/react-native-gesture-handler/issues/2007 */ - -Object.defineProperty(exports, '__esModule', { - value: true, -}); -exports.default = void 0; - -var _reactNative = require('react-native'); - -var _State = require('react-native-gesture-handler/lib/commonjs/State'); - -var _Directions = require('react-native-gesture-handler/lib/commonjs/Directions'); - -const NOOP = (): void => { - // do nothing -}; - -const PanGestureHandler = _reactNative.View; -const attachGestureHandler = NOOP; -const createGestureHandler = NOOP; -const dropGestureHandler = NOOP; -const updateGestureHandler = NOOP; -const flushOperations = NOOP; -const NativeViewGestureHandler = _reactNative.View; -const TapGestureHandler = _reactNative.View; -const ForceTouchGestureHandler = _reactNative.View; -const LongPressGestureHandler = _reactNative.View; -const PinchGestureHandler = _reactNative.View; -const RotationGestureHandler = _reactNative.View; -const FlingGestureHandler = _reactNative.View; -const RawButton = _reactNative.TouchableNativeFeedback; -const BaseButton = _reactNative.TouchableNativeFeedback; -const RectButton = _reactNative.TouchableNativeFeedback; -const BorderlessButton = _reactNative.TouchableNativeFeedback; -var _default = { - TouchableHighlight: _reactNative.TouchableHighlight, - TouchableNativeFeedback: _reactNative.TouchableNativeFeedback, - TouchableOpacity: _reactNative.TouchableOpacity, - TouchableWithoutFeedback: _reactNative.TouchableWithoutFeedback, - ScrollView: _reactNative.ScrollView, - FlatList: _reactNative.FlatList, - Switch: _reactNative.Switch, - TextInput: _reactNative.TextInput, - DrawerLayoutAndroid: _reactNative.DrawerLayoutAndroid, - NativeViewGestureHandler, - TapGestureHandler, - ForceTouchGestureHandler, - LongPressGestureHandler, - PinchGestureHandler, - RotationGestureHandler, - FlingGestureHandler, - RawButton, - BaseButton, - RectButton, - BorderlessButton, - PanGestureHandler, - attachGestureHandler, - createGestureHandler, - dropGestureHandler, - updateGestureHandler, - flushOperations, - // probably can be removed - Directions: _Directions.Directions, - State: _State.State, -}; -exports.default = _default; -//# sourceMappingURL=mocks.js.map diff --git a/src/worklets/gestures/getPanGestureOnBegin.ts b/src/worklets/gestures/getPanGestureOnBegin.ts index bf7f18d..e628296 100644 --- a/src/worklets/gestures/getPanGestureOnBegin.ts +++ b/src/worklets/gestures/getPanGestureOnBegin.ts @@ -3,7 +3,5 @@ import type { GestureParams } from '../getGestures'; export const getPanGestureOnBegin = ({ startY, translationY }: GestureParams): (() => void) => () => { - 'worklet'; - startY.value = translationY.value; }; diff --git a/src/worklets/gestures/getPanGestureOnEnd.ts b/src/worklets/gestures/getPanGestureOnEnd.ts index 0494752..05866d5 100644 --- a/src/worklets/gestures/getPanGestureOnEnd.ts +++ b/src/worklets/gestures/getPanGestureOnEnd.ts @@ -19,8 +19,6 @@ export const getPanGestureOnEnd = innerScrollY, }: GestureParams): ((e: GestureUpdateEvent) => void) => (e: GestureUpdateEvent) => { - 'worklet'; - const isPanningDownWithFastRelease = prevDragY.value < dragY.value; const isPanningDownWithSlowRelease = prevDragY.value <= dragY.value && e.translationY > 0; diff --git a/src/worklets/gestures/getPanGestureOnUpdate.ts b/src/worklets/gestures/getPanGestureOnUpdate.ts index 6333dd8..0ed3bca 100644 --- a/src/worklets/gestures/getPanGestureOnUpdate.ts +++ b/src/worklets/gestures/getPanGestureOnUpdate.ts @@ -18,8 +18,6 @@ export const getPanGestureOnUpdate = isHeader?: boolean, ) => void) => (e: GestureUpdateEvent, isHeader?: boolean) => { - 'worklet'; - if (!isInputFieldFocused.value) { prevDragY.value = translationY.value; isPanning.value = prevDragY.value !== e.translationY; diff --git a/src/worklets/getGestures.ts b/src/worklets/getGestures.ts index 2514721..9067997 100644 --- a/src/worklets/getGestures.ts +++ b/src/worklets/getGestures.ts @@ -32,8 +32,6 @@ export const getGestures = ({ gestureHandlerParams, isBottomSheetInactive = false, }: GetGesturesParams): Record => { - 'worklet'; - const isWeb = Platform.OS === 'web'; const isIOS = Platform.OS === 'ios'; From 9230419ca5215a9e3a02629a57283e06120bcda2 Mon Sep 17 00:00:00 2001 From: Marcuz Larsen Date: Wed, 27 Jul 2022 14:47:19 +0200 Subject: [PATCH 2/2] Chore: react-native-reanimated @2.9.1 --- package.json | 2 +- yarn.lock | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index b80adc4..7f140c2 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "react-dom": "17.0.2", "react-native": "0.68.2", "react-native-gesture-handler": "^2.4.2", - "react-native-reanimated": "2.8.0", + "react-native-reanimated": "^2.9.1", "react-native-redash": "^16.2.4", "react-native-svg": "12.2.0", "react-native-svg-web": "^1.0.9", diff --git a/yarn.lock b/yarn.lock index 1b8c6d1..524e005 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7683,11 +7683,12 @@ react-native-gradle-plugin@^0.0.6: resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.0.6.tgz#b61a9234ad2f61430937911003cddd7e15c72b45" integrity sha512-eIlgtsmDp1jLC24dRn43hB3kEcZVqx6DUQbR0N1ABXGnMEafm9I3V3dUUeD1vh+Dy5WqijSoEwLNUPLgu5zDMg== -react-native-reanimated@2.8.0: - version "2.8.0" - resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.8.0.tgz#93c06ca84d91fb3865110b0857c49a24e316130e" - integrity sha512-kJvf/UWLBMaGCs9X66MKq5zdFMgwx8D0nHnolbHR7s8ZnbLdb7TlQ/yuzIXqn/9wABfnwtNRI3CyaP1aHWMmZg== +react-native-reanimated@^2.9.1: + version "2.9.1" + resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.9.1.tgz#d9a932e312c13c05b4f919e43ebbf76d996e0bc1" + integrity sha512-309SIhDBwY4F1n6e5Mr5D1uPZm2ESIcmZsGXHUu8hpKX4oIOlZj2MilTk+kHhi05LjChoJkcpfkstotCJmPRPg== dependencies: + "@babel/plugin-proposal-export-namespace-from" "^7.17.12" "@babel/plugin-transform-object-assign" "^7.16.7" "@babel/preset-typescript" "^7.16.7" "@types/invariant" "^2.2.35"