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
|
import AsyncStorage from '@react-native-community/async-storage';
import React, {useState} from 'react';
import {
Image,
Modal,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native';
import {PROFILE_CUTOUT_TOP_Y} from '../../constants';
import {normalize} from '../../utils';
import {UniversityIcon} from './';
import {UniversityIconProps} from './UniversityIcon';
interface BadgeTutorialProps {
uniIconProps: UniversityIconProps;
setShowBadgeTutorial: Function;
}
const BadgeTutorial: React.FC<BadgeTutorialProps> = ({
uniIconProps,
setShowBadgeTutorial,
}) => {
const [showModal, setShowModal] = useState(true);
const {layout, university, university_class} = uniIconProps;
const onTap = async () => {
await AsyncStorage.setItem('hasSeenBadgeTutorial', 'true');
setShowBadgeTutorial(false);
setShowModal(false);
};
return (
<Modal
animationType="fade"
transparent
visible={showModal}
presentationStyle="overFullScreen">
<TouchableOpacity onPress={onTap} style={styles.viewWrapper}>
<View style={styles.textContainerStyles}>
<Text style={styles.textStyles}>
Tap on the univeristy icon to edit your badges!
</Text>
</View>
<View
style={{
left: layout.left,
top: PROFILE_CUTOUT_TOP_Y * 1.02 - layout.top,
width: layout.width,
height: layout.height,
}}>
<UniversityIcon
{...{
university,
university_class,
needsShadow: true,
}}
/>
<Image source={require('../../assets/images/badgeTutorial.png')} />
</View>
</TouchableOpacity>
</Modal>
);
};
const styles = StyleSheet.create({
viewWrapper: {
flex: 1,
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
modalView: {
backgroundColor: '#fff',
},
textContainerStyles: {top: '30%', width: '60%', alignSelf: 'center'},
textStyles: {
color: 'white',
fontWeight: '700',
fontSize: normalize(20),
lineHeight: normalize(25),
textAlign: 'center',
},
});
export default BadgeTutorial;
|
