1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
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 {useDispatch, useSelector} from 'react-redux';
import {suggestedPeopleAnimatedTutorialFinished} from '../../store/actions/user';
import {RootState} from '../../store/rootReducer';
import {isIPhoneX, SCREEN_WIDTH} from '../../utils';
const AnimatedTutorial: React.FC = () => {
const navigation = useNavigation();
const dispatch = useDispatch();
const {user} = useSelector((state: RootState) => state.user);
const handleCloseAnimationTutorial = async () => {
dispatch(suggestedPeopleAnimatedTutorialFinished(user.userId));
navigation.pop();
};
// don't dismiss the tutorial if swipe gesture isn't sufficiently large
const activeOffsetY: number = -15;
return (
<SafeAreaView>
<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>
</PanGestureHandler>
</TapGestureHandler>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
closeButton: {
top: '2.55%',
left: '5%',
},
text: {
justifyContent: 'center',
color: '#fff',
fontWeight: 'bold',
fontSize: 20,
textAlign: 'center',
position: 'relative',
top: '100%',
},
textContainer: {
width: isIPhoneX() ? SCREEN_WIDTH * 0.5 : SCREEN_WIDTH * 0.6,
alignSelf: 'center',
top: isIPhoneX() ? '65%' : '45%',
},
swipeGif: {
width: 333,
height: 250,
left: '22.5%',
top: isIPhoneX() ? '75%' : '45%',
},
//Styles to adjust moment container
momentScrollContainer: {
backgroundColor: 'transparent',
},
momentContainer: {
top: '62%',
backgroundColor: 'transparent',
},
momentHeaderText: {
paddingBottom: '5%',
},
momentHeader: {
backgroundColor: 'transparent',
},
});
export default AnimatedTutorial;
|