Merge pull request #275 from leonyjiang/tma667-sp-tutorial-dismissal

[TMA-667] Fix Unresponsive Tutorial-Dismissing Swipe Gesture

2 files changed, 24 insertions, 17 deletions

diff --git a/package.json b/package.json
index bfd1febf..0451e743 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,6 @@
     "react-native-snap-carousel": "^3.9.1",
     "react-native-splash-screen": "^3.2.0",
     "react-native-svg": "^12.1.0",
-    "react-native-swipe-gestures": "^1.0.5",
     "react-native-vector-icons": "^7.0.0",
     "react-promise-tracker": "^2.1.0",
     "react-redux": "^7.2.2",
diff --git a/src/screens/suggestedPeople/AnimatedTutorial.tsx b/src/screens/suggestedPeople/AnimatedTutorial.tsx
index f7d62cee..6e0f78ae 100644
--- a/src/screens/suggestedPeople/AnimatedTutorial.tsx
+++ b/src/screens/suggestedPeople/AnimatedTutorial.tsx
@@ -2,8 +2,11 @@ import {useNavigation} from '@react-navigation/native';
 import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {Image} from 'react-native-animatable';
+import {
+  PanGestureHandler,
+  TapGestureHandler,
+} from 'react-native-gesture-handler';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import GestureRecognizer from 'react-native-swipe-gestures';
 import {useDispatch, useSelector} from 'react-redux';
 import {suggestedPeopleAnimatedTutorialFinished} from '../../store/actions/user';
 import {RootState} from '../../store/rootReducer';
@@ -18,29 +21,34 @@ const AnimatedTutorial: React.FC = () => {
     dispatch(suggestedPeopleAnimatedTutorialFinished(user.userId));
     navigation.pop();
   };
+
+  // don't dismiss the tutorial if swipe gesture isn't sufficiently large
+  const activeOffsetY: number = -15;
+
   return (
     <SafeAreaView>
-      <GestureRecognizer onSwipeUp={handleCloseAnimationTutorial}>
-        <View style={styles.container}>
-          <View style={styles.textContainer}>
-            <Text style={styles.text}>
-              {'Swipe up to discover more people!'}
-            </Text>
+      <TapGestureHandler onEnded={handleCloseAnimationTutorial}>
+        <PanGestureHandler
+          onActivated={handleCloseAnimationTutorial}
+          {...{activeOffsetY}}>
+          <View>
+            <View style={styles.textContainer}>
+              <Text style={styles.text}>
+                {'Swipe up to discover more people!'}
+              </Text>
+            </View>
+            <Image
+              source={require('../../assets/gifs/swipe-animation.gif')}
+              style={styles.swipeGif}
+            />
           </View>
-          <Image
-            source={require('../../assets/gifs/swipe-animation.gif')}
-            style={styles.swipeGif}
-          />
-        </View>
-      </GestureRecognizer>
+        </PanGestureHandler>
+      </TapGestureHandler>
     </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'column',
-  },
   closeButton: {
     top: '2.55%',
     left: '5%',