diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/screens/suggestedPeople/AnimatedTutorial.tsx | 40 |
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%', |