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"