From 956eb7ab4402b19fc6a931c6cda5b5d8eddb375f Mon Sep 17 00:00:00 2001 From: Barun Pandey Date: Thu, 25 Mar 2021 09:51:09 +0545 Subject: [PATCH 1/6] Add SwipeableView to wrap ReportActionCompose in iOS --- src/components/SwipeableView/index.ios.js | 40 +++++++++++++++++++++++ src/components/SwipeableView/index.js | 14 ++++++++ src/pages/home/report/ReportView.js | 13 +++++--- 3 files changed, 62 insertions(+), 5 deletions(-) create mode 100644 src/components/SwipeableView/index.ios.js create mode 100644 src/components/SwipeableView/index.js diff --git a/src/components/SwipeableView/index.ios.js b/src/components/SwipeableView/index.ios.js new file mode 100644 index 000000000000..1b78377e6ee6 --- /dev/null +++ b/src/components/SwipeableView/index.ios.js @@ -0,0 +1,40 @@ +import React, {PureComponent} from 'react'; +import {PanResponder, View} from 'react-native'; +import PropTypes from 'prop-types'; + +const propTypes = { + children: PropTypes.element.isRequired, + + // callback whenever swipe down is registered + onSwipeDown: PropTypes.func.isRequired, +}; + +class SwipeableView extends PureComponent { + constructor(props) { + super(props); + this.panResponder = PanResponder.create({ + + // The PanResponder gets focus only when the y-axis movement is over 10 pixels + onMoveShouldSetPanResponderCapture: + (_, gestureState) => gestureState.dy > 3, + + // Calls the callback when the swipe down is released; after the completion of the gesture + onPanResponderRelease: () => { + this.props.onSwipeDown(); + }, + }); + } + + render() { + return ( + // eslint-disable-next-line react/jsx-props-no-spreading + + {this.props.children} + + ); + } +} + +SwipeableView.propTypes = propTypes; +SwipeableView.displayName = 'SwipeableView'; +export default SwipeableView; diff --git a/src/components/SwipeableView/index.js b/src/components/SwipeableView/index.js new file mode 100644 index 000000000000..523ee141cd65 --- /dev/null +++ b/src/components/SwipeableView/index.js @@ -0,0 +1,14 @@ +import PropTypes from 'prop-types'; + +const propTypes = { + children: PropTypes.element.isRequired, + +}; + +function SwipeableView({children}) { + return children; +} + +SwipeableView.propTypes = propTypes; +SwipeableView.displayName = 'SwipeableView'; +export default SwipeableView; diff --git a/src/pages/home/report/ReportView.js b/src/pages/home/report/ReportView.js index ce597338af06..eea8bb8e1f86 100644 --- a/src/pages/home/report/ReportView.js +++ b/src/pages/home/report/ReportView.js @@ -1,11 +1,12 @@ import React from 'react'; -import {View} from 'react-native'; +import {Keyboard, View} from 'react-native'; import PropTypes from 'prop-types'; import ReportActionsView from './ReportActionsView'; import ReportActionCompose from './ReportActionCompose'; import {addAction} from '../../../libs/actions/Report'; import KeyboardSpacer from '../../../components/KeyboardSpacer'; import styles from '../../../styles/styles'; +import SwipeableView from '../../../components/SwipeableView/index.ios'; const propTypes = { // The ID of the report actions will be created for @@ -25,10 +26,12 @@ class ReportView extends React.Component { - addAction(this.props.reportID, text)} - reportID={this.props.reportID} - /> + Keyboard.dismiss()}> + addAction(this.props.reportID, text)} + reportID={this.props.reportID} + /> + ); From 0107707bcda952ec4a64db0a381a7b03479d8aca Mon Sep 17 00:00:00 2001 From: Barun Pandey Date: Thu, 25 Mar 2021 10:35:03 +0545 Subject: [PATCH 2/6] Fix a comment mistake --- src/components/SwipeableView/index.ios.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SwipeableView/index.ios.js b/src/components/SwipeableView/index.ios.js index 1b78377e6ee6..b2318dcdce40 100644 --- a/src/components/SwipeableView/index.ios.js +++ b/src/components/SwipeableView/index.ios.js @@ -14,7 +14,7 @@ class SwipeableView extends PureComponent { super(props); this.panResponder = PanResponder.create({ - // The PanResponder gets focus only when the y-axis movement is over 10 pixels + // The PanResponder gets focus only when the y-axis movement is over 3 pixels onMoveShouldSetPanResponderCapture: (_, gestureState) => gestureState.dy > 3, From d5d7010541cd1abac34810d864d52237d17570b1 Mon Sep 17 00:00:00 2001 From: Barun Pandey Date: Sat, 27 Mar 2021 01:52:38 +0545 Subject: [PATCH 3/6] Make swipeable view available on android and resolve comments --- src/components/SwipeableView/index.js | 15 ++------------- .../{index.ios.js => index.native.js} | 14 +++++++------- src/pages/home/report/ReportView.js | 2 +- 3 files changed, 10 insertions(+), 21 deletions(-) rename src/components/SwipeableView/{index.ios.js => index.native.js} (71%) diff --git a/src/components/SwipeableView/index.js b/src/components/SwipeableView/index.js index 523ee141cd65..5a555c3e838a 100644 --- a/src/components/SwipeableView/index.js +++ b/src/components/SwipeableView/index.js @@ -1,14 +1,3 @@ -import PropTypes from 'prop-types'; +export default ({children}) => children; -const propTypes = { - children: PropTypes.element.isRequired, - -}; - -function SwipeableView({children}) { - return children; -} - -SwipeableView.propTypes = propTypes; -SwipeableView.displayName = 'SwipeableView'; -export default SwipeableView; +// Swiping is not available in web diff --git a/src/components/SwipeableView/index.ios.js b/src/components/SwipeableView/index.native.js similarity index 71% rename from src/components/SwipeableView/index.ios.js rename to src/components/SwipeableView/index.native.js index b2318dcdce40..b43d01a40f45 100644 --- a/src/components/SwipeableView/index.ios.js +++ b/src/components/SwipeableView/index.native.js @@ -5,29 +5,29 @@ import PropTypes from 'prop-types'; const propTypes = { children: PropTypes.element.isRequired, - // callback whenever swipe down is registered + // Callback to fire when the user swipes down on the child content onSwipeDown: PropTypes.func.isRequired, }; class SwipeableView extends PureComponent { constructor(props) { super(props); + + const minimumPixelDistance = 3; this.panResponder = PanResponder.create({ - // The PanResponder gets focus only when the y-axis movement is over 3 pixels + // The PanResponder gets focus only when the y-axis movement is over minimumPixelDistance onMoveShouldSetPanResponderCapture: - (_, gestureState) => gestureState.dy > 3, + (_event, gestureState) => gestureState.dy > minimumPixelDistance, // Calls the callback when the swipe down is released; after the completion of the gesture - onPanResponderRelease: () => { - this.props.onSwipeDown(); - }, + onPanResponderRelease: this.props.onSwipeDown, }); } render() { return ( - // eslint-disable-next-line react/jsx-props-no-spreading + // eslint-disable-next-line react/jsx-props-no-spreading {this.props.children} diff --git a/src/pages/home/report/ReportView.js b/src/pages/home/report/ReportView.js index eea8bb8e1f86..d1f8c508e956 100644 --- a/src/pages/home/report/ReportView.js +++ b/src/pages/home/report/ReportView.js @@ -6,7 +6,7 @@ import ReportActionCompose from './ReportActionCompose'; import {addAction} from '../../../libs/actions/Report'; import KeyboardSpacer from '../../../components/KeyboardSpacer'; import styles from '../../../styles/styles'; -import SwipeableView from '../../../components/SwipeableView/index.ios'; +import SwipeableView from '../../../components/SwipeableView'; const propTypes = { // The ID of the report actions will be created for From 45e01b2bc28d68a80775780fdea7cd98010417a3 Mon Sep 17 00:00:00 2001 From: Barun Pandey Date: Sat, 27 Mar 2021 02:54:10 +0545 Subject: [PATCH 4/6] Resolve TextInput not receiving PanResponder event in iOS --- ios/Podfile.lock | 20 +++++++++---------- src/components/SwipeableView/index.js | 2 +- .../TextInputFocusable/index.native.js | 1 + 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 352903821326..ef28df343033 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -662,13 +662,13 @@ SPEC CHECKSUMS: React-jsiexecutor: b56c03e61c0dd5f5801255f2160a815f4a53d451 React-jsinspector: 8e68ffbfe23880d3ee9bafa8be2777f60b25cbe2 react-native-config: d8b45133fd13d4f23bd2064b72f6e2c08b2763ed - react-native-document-picker: b3e78a8f7fef98b5cb069f20fc35797d55e68e28 - react-native-image-picker: 32d1ad2c0024ca36161ae0d5c2117e2d6c441f11 - react-native-netinfo: 52cf0ee8342548a485e28f4b09e56b477567244d + react-native-document-picker: 0bba80cc56caab1f67dbaa81ff557e3a9b7f2b9f + react-native-image-picker: c6d75c4ab2cf46f9289f341242b219cb3c1180d3 + react-native-netinfo: 30fb89fa913c342be82a887b56e96be6d71201dd react-native-pdf: 4b5a9e4465a6a3b399e91dc4838eb44ddf716d1f - react-native-progress-bar-android: ce95a69f11ac580799021633071368d08aaf9ad8 - react-native-progress-view: 5816e8a6be812c2b122c6225a2a3db82d9008640 - react-native-safe-area-context: 01158a92c300895d79dee447e980672dc3fb85a6 + react-native-progress-bar-android: be43138ab7da30d51fc038bafa98e9ed594d0c40 + react-native-progress-view: 21b1e29e70c7559c16c9e0a04c4adc19fce6ede2 + react-native-safe-area-context: 79fea126c6830c85f65947c223a5e3058a666937 React-RCTActionSheet: 53ea72699698b0b47a6421cb1c8b4ab215a774aa React-RCTAnimation: 1befece0b5183c22ae01b966f5583f42e69a83c2 React-RCTBlob: 0b284339cbe4b15705a05e2313a51c6d8b51fa40 @@ -680,8 +680,8 @@ SPEC CHECKSUMS: React-RCTVibration: 8e9fb25724a0805107fc1acc9075e26f814df454 ReactCommon: 4167844018c9ed375cc01a843e9ee564399e53c3 rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba - RNCAsyncStorage: cb9a623793918c6699586281f0b51cbc38f046f9 - RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459 + RNCAsyncStorage: b03032fdbdb725bea0bd9e5ec5a7272865ae7398 + RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f RNCPicker: 6780c753e9e674065db90d9c965920516402579d RNFBAnalytics: 2dc4dd9e2445faffca041b10447a23a71dcdabf8 RNFBApp: 7eacc7da7ab19f96c05e434017d44a9f09410da8 @@ -690,10 +690,10 @@ SPEC CHECKSUMS: RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad RNScreens: b6c9607e6fe47c1b6e2f1910d2acd46dd7ecea3a RNSVG: ce9d996113475209013317e48b05c21ee988d42e - urbanairship-react-native: dfb6dc22b2f41ccaadd636b73d51b448cd1b2bbc + urbanairship-react-native: afab7684561909be2a6a2a52baa3435776d050de Yoga: 7d13633d129fd179e01b8953d38d47be90db185a YogaKit: f782866e155069a2cca2517aafea43200b01fd5a PODFILE CHECKSUM: 41b806c7f131f87b716be1f1f9377532d6c9e43a -COCOAPODS: 1.10.0 +COCOAPODS: 1.10.1 diff --git a/src/components/SwipeableView/index.js b/src/components/SwipeableView/index.js index 5a555c3e838a..96640b107608 100644 --- a/src/components/SwipeableView/index.js +++ b/src/components/SwipeableView/index.js @@ -1,3 +1,3 @@ export default ({children}) => children; -// Swiping is not available in web +// Swipeable View is available just on Android/iOS for now. diff --git a/src/components/TextInputFocusable/index.native.js b/src/components/TextInputFocusable/index.native.js index ce2c711e4941..a7d571949d02 100644 --- a/src/components/TextInputFocusable/index.native.js +++ b/src/components/TextInputFocusable/index.native.js @@ -47,6 +47,7 @@ class TextInputFocusable extends React.Component { this.textInput = el} maxHeight={116} + rejectResponderTermination={false} /* eslint-disable-next-line react/jsx-props-no-spreading */ {...this.props} /> From 49f729c9d8d4dda81026185964f52e4a53e2fa4a Mon Sep 17 00:00:00 2001 From: Barun Pandey Date: Sat, 27 Mar 2021 02:57:49 +0545 Subject: [PATCH 5/6] Revert PodFile.lock changes --- ios/Podfile.lock | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index ef28df343033..f21a6c19237a 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -662,13 +662,13 @@ SPEC CHECKSUMS: React-jsiexecutor: b56c03e61c0dd5f5801255f2160a815f4a53d451 React-jsinspector: 8e68ffbfe23880d3ee9bafa8be2777f60b25cbe2 react-native-config: d8b45133fd13d4f23bd2064b72f6e2c08b2763ed - react-native-document-picker: 0bba80cc56caab1f67dbaa81ff557e3a9b7f2b9f - react-native-image-picker: c6d75c4ab2cf46f9289f341242b219cb3c1180d3 - react-native-netinfo: 30fb89fa913c342be82a887b56e96be6d71201dd + react-native-document-picker: b3e78a8f7fef98b5cb069f20fc35797d55e68e28 + react-native-image-picker: 32d1ad2c0024ca36161ae0d5c2117e2d6c441f11 + react-native-netinfo: 52cf0ee8342548a485e28f4b09e56b477567244d react-native-pdf: 4b5a9e4465a6a3b399e91dc4838eb44ddf716d1f - react-native-progress-bar-android: be43138ab7da30d51fc038bafa98e9ed594d0c40 - react-native-progress-view: 21b1e29e70c7559c16c9e0a04c4adc19fce6ede2 - react-native-safe-area-context: 79fea126c6830c85f65947c223a5e3058a666937 + react-native-progress-bar-android: ce95a69f11ac580799021633071368d08aaf9ad8 + react-native-progress-view: 5816e8a6be812c2b122c6225a2a3db82d9008640 + react-native-safe-area-context: 01158a92c300895d79dee447e980672dc3fb85a6 React-RCTActionSheet: 53ea72699698b0b47a6421cb1c8b4ab215a774aa React-RCTAnimation: 1befece0b5183c22ae01b966f5583f42e69a83c2 React-RCTBlob: 0b284339cbe4b15705a05e2313a51c6d8b51fa40 @@ -680,8 +680,8 @@ SPEC CHECKSUMS: React-RCTVibration: 8e9fb25724a0805107fc1acc9075e26f814df454 ReactCommon: 4167844018c9ed375cc01a843e9ee564399e53c3 rn-fetch-blob: f065bb7ab7fb48dd002629f8bdcb0336602d3cba - RNCAsyncStorage: b03032fdbdb725bea0bd9e5ec5a7272865ae7398 - RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f + RNCAsyncStorage: cb9a623793918c6699586281f0b51cbc38f046f9 + RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459 RNCPicker: 6780c753e9e674065db90d9c965920516402579d RNFBAnalytics: 2dc4dd9e2445faffca041b10447a23a71dcdabf8 RNFBApp: 7eacc7da7ab19f96c05e434017d44a9f09410da8 @@ -690,10 +690,10 @@ SPEC CHECKSUMS: RNReanimated: e03f7425cb7a38dcf1b644d680d1bfc91c3337ad RNScreens: b6c9607e6fe47c1b6e2f1910d2acd46dd7ecea3a RNSVG: ce9d996113475209013317e48b05c21ee988d42e - urbanairship-react-native: afab7684561909be2a6a2a52baa3435776d050de + urbanairship-react-native: dfb6dc22b2f41ccaadd636b73d51b448cd1b2bbc Yoga: 7d13633d129fd179e01b8953d38d47be90db185a YogaKit: f782866e155069a2cca2517aafea43200b01fd5a PODFILE CHECKSUM: 41b806c7f131f87b716be1f1f9377532d6c9e43a -COCOAPODS: 1.10.1 +COCOAPODS: 1.10.0 \ No newline at end of file From 6b42f23917a1771f12683a94af386839c9b35abe Mon Sep 17 00:00:00 2001 From: Barun Pandey Date: Tue, 30 Mar 2021 01:14:44 +0545 Subject: [PATCH 6/6] Update pod.lock file again --- ios/Podfile.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index f21a6c19237a..352903821326 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -696,4 +696,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 41b806c7f131f87b716be1f1f9377532d6c9e43a -COCOAPODS: 1.10.0 \ No newline at end of file +COCOAPODS: 1.10.0