From b6a2def0c8fa647f4bc34d6b222fff958626fd4f Mon Sep 17 00:00:00 2001 From: Jakub Grzywacz Date: Mon, 12 Jul 2021 17:42:48 +0200 Subject: [PATCH] refactor: use native panResponder instead of RNGH --- example/package.json | 1 - example/yarn.lock | 62 ++----------------- package.json | 2 - src/components/Knob.tsx | 90 ++++++++++++++++------------ src/components/ModalWithBackdrop.tsx | 49 +++++++-------- yarn.lock | 62 ++----------------- 6 files changed, 86 insertions(+), 180 deletions(-) diff --git a/example/package.json b/example/package.json index 670a034..b10ae96 100644 --- a/example/package.json +++ b/example/package.json @@ -11,7 +11,6 @@ "dependencies": { "react": "16.13.1", "react-native": "0.63.4", - "react-native-gesture-handler": "^1.10.3", "react-native-svg": "^12.1.1" }, "devDependencies": { diff --git a/example/yarn.lock b/example/yarn.lock index cd0c6c4..0f1af42 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -653,13 +653,6 @@ exec-sh "^0.3.2" minimist "^1.2.0" -"@egjs/hammerjs@^2.0.17": - version "2.0.17" - resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124" - integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A== - dependencies: - "@types/hammerjs" "^2.0.36" - "@hapi/address@2.x.x": version "2.1.4" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5" @@ -867,11 +860,6 @@ sudo-prompt "^9.0.0" wcwidth "^1.0.1" -"@types/hammerjs@^2.0.36": - version "2.0.40" - resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.40.tgz#ded0240b6ea1ad7afc1e60374c49087aaea5dbd8" - integrity sha512-VbjwR1fhsn2h2KXAY4oy1fm7dCxaKy0D+deTb8Ilc3Eo3rc5+5eA4rfYmZaHgNJKxVyI0f6WIXzO2zLkVmQPHA== - "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0": version "2.0.3" resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762" @@ -1605,13 +1593,6 @@ cosmiconfig@^5.0.5, cosmiconfig@^5.1.0: js-yaml "^3.13.1" parse-json "^4.0.0" -cross-fetch@^3.0.4: - version "3.1.4" - resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39" - integrity sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ== - dependencies: - node-fetch "2.6.1" - cross-spawn@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449" @@ -2005,19 +1986,6 @@ fbjs@^1.0.0: setimmediate "^1.0.5" ua-parser-js "^0.7.18" -fbjs@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.0.tgz#0907067fb3f57a78f45d95f1eacffcacd623c165" - integrity sha512-dJd4PiDOFuhe7vk4F80Mba83Vr2QuK86FoxtgPmzBqEJahncp+13YCmfoa53KHCo6OnlXLG7eeMWPfB5CrpVKg== - dependencies: - cross-fetch "^3.0.4" - fbjs-css-vars "^1.0.0" - loose-envify "^1.0.0" - object-assign "^4.1.0" - promise "^7.1.1" - setimmediate "^1.0.5" - ua-parser-js "^0.7.18" - figures@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962" @@ -2256,13 +2224,6 @@ hermes-profile-transformer@^0.0.6: dependencies: source-map "^0.7.3" -hoist-non-react-statics@^3.3.0: - version "3.3.2" - resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" - integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== - dependencies: - react-is "^16.7.0" - http-errors@~1.7.2: version "1.7.3" resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06" @@ -3217,11 +3178,6 @@ nocache@^2.1.0: resolved "https://registry.yarnpkg.com/nocache/-/nocache-2.1.0.tgz#120c9ffec43b5729b1d5de88cd71aa75a0ba491f" integrity sha512-0L9FvHG3nfnnmaEQPjT9xhfN4ISk0A8/2j4M37Np4mcDesJjHgEUfgPhdCyZuFI954tjokaIj/A3NdpFNdEh4Q== -node-fetch@2.6.1, node-fetch@^2.2.0, node-fetch@^2.6.0: - version "2.6.1" - resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052" - integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw== - node-fetch@^1.0.1: version "1.7.3" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef" @@ -3230,6 +3186,11 @@ node-fetch@^1.0.1: encoding "^0.1.11" is-stream "^1.0.1" +node-fetch@^2.2.0, node-fetch@^2.6.0: + version "2.6.1" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052" + integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw== + node-int64@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b" @@ -3583,22 +3544,11 @@ react-devtools-core@^4.6.0: shell-quote "^1.6.1" ws "^7" -react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: +react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -react-native-gesture-handler@^1.10.3: - version "1.10.3" - resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz#942bbf2963bbf49fa79593600ee9d7b5dab3cfc0" - integrity sha512-cBGMi1IEsIVMgoox4RvMx7V2r6bNKw0uR1Mu1o7NbuHS6BRSVLq0dP34l2ecnPlC+jpWd3le6Yg1nrdCjby2Mw== - dependencies: - "@egjs/hammerjs" "^2.0.17" - fbjs "^3.0.0" - hoist-non-react-statics "^3.3.0" - invariant "^2.2.4" - prop-types "^15.7.2" - react-native-svg@^12.1.1: version "12.1.1" resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.1.1.tgz#5f292410b8bcc07bbc52b2da7ceb22caf5bcaaee" diff --git a/package.json b/package.json index 1f99b07..30e8175 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,6 @@ "react": "16.13.1", "react-native": "0.63.4", "react-native-builder-bob": "^0.18.0", - "react-native-gesture-handler": "^1.10.3", "react-native-svg": "^12.1.1", "release-it": "^14.2.2", "typescript": "^4.1.3", @@ -75,7 +74,6 @@ "peerDependencies": { "react": "*", "react-native": "*", - "react-native-gesture-handler": "^1.10.3", "react-native-svg": "^12.1.1" }, "jest": { diff --git a/src/components/Knob.tsx b/src/components/Knob.tsx index 3e7ceaf..3cecc2f 100644 --- a/src/components/Knob.tsx +++ b/src/components/Knob.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; -import { Animated, useWindowDimensions, StyleSheet } from 'react-native'; import { - PanGestureHandler, - PanGestureHandlerGestureEvent, - State, -} from 'react-native-gesture-handler'; + Animated, + useWindowDimensions, + StyleSheet, + View, + PanResponder, +} from 'react-native'; import { getHeight } from '../utils'; import { KeyboardContext } from '../KeyboardContext'; @@ -18,49 +19,60 @@ export const Knob = ({ offsetY, height, onClose }: KnobProps) => { const { height: screenHeight } = useWindowDimensions(); const ctx = React.useContext(KeyboardContext); - const handleGesture = ({ - nativeEvent: { translationY, state }, - }: PanGestureHandlerGestureEvent) => { - if (state === State.ACTIVE) { - offsetY.setValue(translationY); - } - if (state === State.END) { - // reset offset => return to current position - Animated.spring(offsetY, { + const panResponder = React.useRef( + PanResponder.create({ + onStartShouldSetPanResponder: () => true, + onStartShouldSetPanResponderCapture: () => true, + onMoveShouldSetPanResponder: () => true, + onMoveShouldSetPanResponderCapture: () => true, + + onPanResponderMove: Animated.event([null, { dy: offsetY }], { useNativeDriver: false, - toValue: 0, - }).start(); - // slide => expand/collapse keyboard - if (translationY < -30) { - Animated.spring(height, { + }), + onPanResponderRelease: (_, gestureState) => { + Animated.spring(offsetY, { useNativeDriver: false, - toValue: getHeight(ctx.expandedHeight, screenHeight), + toValue: 0, }).start(); - } else if (translationY > 150) { - height.setValue(getHeight(ctx.defaultHeight, screenHeight)); - offsetY.setValue(0); - onClose(); - } else { - Animated.spring(height, { - useNativeDriver: false, - toValue: getHeight(ctx.defaultHeight, screenHeight), - }).start(); - } - } - }; + if (gestureState.dy < -50) { + Animated.spring(height, { + useNativeDriver: false, + toValue: getHeight(ctx.expandedHeight, screenHeight), + }).start(); + } else if (gestureState.dy > 150) { + height.setValue(getHeight(ctx.defaultHeight, screenHeight)); + offsetY.setValue(0); + onClose(); + } else { + Animated.spring(height, { + useNativeDriver: false, + toValue: getHeight(ctx.defaultHeight, screenHeight), + }).start(); + } + }, + onShouldBlockNativeResponder: () => { + return true; + }, + }) + ).current; return ( - - - + + + + + ); }; const styles = StyleSheet.create({ + panContainer: { + paddingHorizontal: 20, + paddingTop: 20, + alignSelf: 'center', + flexDirection: 'column-reverse', + backgroundColor: '#00000000', + }, knob: { height: 6, width: 50, diff --git a/src/components/ModalWithBackdrop.tsx b/src/components/ModalWithBackdrop.tsx index dd531da..a21180e 100644 --- a/src/components/ModalWithBackdrop.tsx +++ b/src/components/ModalWithBackdrop.tsx @@ -9,7 +9,6 @@ import { View, } from 'react-native'; import { KeyboardContext } from '../KeyboardContext'; -import { GestureHandlerRootView } from 'react-native-gesture-handler'; type ModalWithBackdropProps = { isOpen: boolean; @@ -43,32 +42,30 @@ export const ModalWithBackdrop = ({ return ( - - + - - - - - {children} - - - - - - + + + + {children} + + + + + ); }; diff --git a/yarn.lock b/yarn.lock index 8f95370..3c1348a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1205,13 +1205,6 @@ resolved "https://registry.yarnpkg.com/@commitlint/types/-/types-11.0.0.tgz#719cf05fcc1abb6533610a2e0f5dd1e61eac14fe" integrity sha512-VoNqai1vR5anRF5Tuh/+SWDFk7xi7oMwHrHrbm1BprYXjB2RJsWLhUrStMssDxEl5lW/z3EUdg8RvH/IUBccSQ== -"@egjs/hammerjs@^2.0.17": - version "2.0.17" - resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124" - integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A== - dependencies: - "@types/hammerjs" "^2.0.36" - "@eslint/eslintrc@^0.4.2": version "0.4.2" resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.2.tgz#f63d0ef06f5c0c57d76c4ab5f63d3835c51b0179" @@ -1899,11 +1892,6 @@ dependencies: "@types/node" "*" -"@types/hammerjs@^2.0.36": - version "2.0.40" - resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.40.tgz#ded0240b6ea1ad7afc1e60374c49087aaea5dbd8" - integrity sha512-VbjwR1fhsn2h2KXAY4oy1fm7dCxaKy0D+deTb8Ilc3Eo3rc5+5eA4rfYmZaHgNJKxVyI0f6WIXzO2zLkVmQPHA== - "@types/http-cache-semantics@*": version "4.0.0" resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.0.tgz#9140779736aa2655635ee756e2467d787cfe8a2a" @@ -3430,13 +3418,6 @@ cosmiconfig@^5.0.5, cosmiconfig@^5.1.0: js-yaml "^3.13.1" parse-json "^4.0.0" -cross-fetch@^3.0.4: - version "3.1.4" - resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39" - integrity sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ== - dependencies: - node-fetch "2.6.1" - cross-spawn@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449" @@ -4374,19 +4355,6 @@ fbjs@^1.0.0: setimmediate "^1.0.5" ua-parser-js "^0.7.18" -fbjs@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-3.0.0.tgz#0907067fb3f57a78f45d95f1eacffcacd623c165" - integrity sha512-dJd4PiDOFuhe7vk4F80Mba83Vr2QuK86FoxtgPmzBqEJahncp+13YCmfoa53KHCo6OnlXLG7eeMWPfB5CrpVKg== - dependencies: - cross-fetch "^3.0.4" - fbjs-css-vars "^1.0.0" - loose-envify "^1.0.0" - object-assign "^4.1.0" - promise "^7.1.1" - setimmediate "^1.0.5" - ua-parser-js "^0.7.18" - figures@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962" @@ -4913,13 +4881,6 @@ hermes-profile-transformer@^0.0.6: dependencies: source-map "^0.7.3" -hoist-non-react-statics@^3.3.0: - version "3.3.2" - resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" - integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== - dependencies: - react-is "^16.7.0" - hosted-git-info@^2.1.4: version "2.8.9" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9" @@ -6960,11 +6921,6 @@ nocache@^2.1.0: resolved "https://registry.yarnpkg.com/nocache/-/nocache-2.1.0.tgz#120c9ffec43b5729b1d5de88cd71aa75a0ba491f" integrity sha512-0L9FvHG3nfnnmaEQPjT9xhfN4ISk0A8/2j4M37Np4mcDesJjHgEUfgPhdCyZuFI954tjokaIj/A3NdpFNdEh4Q== -node-fetch@2.6.1, node-fetch@^2.2.0, node-fetch@^2.6.0, node-fetch@^2.6.1: - version "2.6.1" - resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052" - integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw== - node-fetch@^1.0.1: version "1.7.3" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef" @@ -6973,6 +6929,11 @@ node-fetch@^1.0.1: encoding "^0.1.11" is-stream "^1.0.1" +node-fetch@^2.2.0, node-fetch@^2.6.0, node-fetch@^2.6.1: + version "2.6.1" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052" + integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw== + node-int64@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b" @@ -7762,7 +7723,7 @@ react-devtools-core@^4.6.0: shell-quote "^1.6.1" ws "^7" -react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4: +react-is@^16.12.0, react-is@^16.8.1, react-is@^16.8.4: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -7799,17 +7760,6 @@ react-native-builder-bob@^0.18.0: optionalDependencies: jetifier "^1.6.6" -react-native-gesture-handler@^1.10.3: - version "1.10.3" - resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz#942bbf2963bbf49fa79593600ee9d7b5dab3cfc0" - integrity sha512-cBGMi1IEsIVMgoox4RvMx7V2r6bNKw0uR1Mu1o7NbuHS6BRSVLq0dP34l2ecnPlC+jpWd3le6Yg1nrdCjby2Mw== - dependencies: - "@egjs/hammerjs" "^2.0.17" - fbjs "^3.0.0" - hoist-non-react-statics "^3.3.0" - invariant "^2.2.4" - prop-types "^15.7.2" - react-native-svg@^12.1.1: version "12.1.1" resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-12.1.1.tgz#5f292410b8bcc07bbc52b2da7ceb22caf5bcaaee"