status-im
/
rn-emoji-keyboard
mirror of https://github.com/status-im/rn-emoji-keyboard.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: use native panResponder instead of RNGH

This commit is contained in:
Jakub Grzywacz 2021-07-12 17:42:48 +02:00
parent 094eff743d
commit b6a2def0c8
No known key found for this signature in database
GPG Key ID: 5BBB685871FF63C4
6 changed files with 86 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/package.json
View File

@ -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": {

62
example/yarn.lock
View File

@ -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"

2
package.json
View File

@ -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": {

90
src/components/Knob.tsx
View File

@ -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 (
<PanGestureHandler
onGestureEvent={handleGesture}
onHandlerStateChange={handleGesture}
hitSlop={{ vertical: 20, horizontal: 40 }}
>
<Animated.View style={[styles.knob, ctx.knobStyles]} />
</PanGestureHandler>
<View {...panResponder.panHandlers}>
<View style={styles.panContainer}>
<Animated.View style={[styles.knob, ctx.knobStyles]} />
</View>
</View>
);
};
const styles = StyleSheet.create({
panContainer: {
paddingHorizontal: 20,
paddingTop: 20,
alignSelf: 'center',
flexDirection: 'column-reverse',
backgroundColor: '#00000000',
},
knob: {
height: 6,
width: 50,

49
src/components/ModalWithBackdrop.tsx
View File

@ -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 (
<Modal visible={isOpen} animationType="fade" transparent={true}>
<GestureHandlerRootView style={styles.modalContainer}>
<TouchableOpacity
style={styles.modalContainer}
activeOpacity={1}
onPress={handleClose}
<TouchableOpacity
style={styles.modalContainer}
activeOpacity={1}
onPress={handleClose}
>
<View
style={[
styles.modalContainer,
{ backgroundColor: ctx.backdropColor },
]}
>
<View
style={[
styles.modalContainer,
{ backgroundColor: ctx.backdropColor },
]}
>
<SafeAreaView style={styles.modalContainer}>
<TouchableOpacity activeOpacity={1}>
<Animated.View
style={{
transform: [{ translateY }],
}}
>
{children}
</Animated.View>
</TouchableOpacity>
</SafeAreaView>
</View>
</TouchableOpacity>
</GestureHandlerRootView>
<SafeAreaView style={styles.modalContainer}>
<TouchableOpacity activeOpacity={1}>
<Animated.View
style={{
transform: [{ translateY }],
}}
>
{children}
</Animated.View>
</TouchableOpacity>
</SafeAreaView>
</View>
</TouchableOpacity>
</Modal>
);
};

62
yarn.lock
View File

@ -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"