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
|
import {BlurView} from '@react-native-community/blur';
import {useNavigation} from '@react-navigation/native';
import React, {Fragment, useEffect} from 'react';
import {Image, StatusBar, StyleSheet, TouchableOpacity} from 'react-native';
import {Text} from 'react-native-animatable';
import {SafeAreaView} from 'react-native-safe-area-context';
import UpArrow from '../../assets/icons/up_arrow.svg';
import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
const SuggestedPeopleWelcomeScreen: React.FC = () => {
const navigation = useNavigation();
useEffect(() => {
navigation.setOptions({
headerBackImage: () => <Fragment />,
});
}, []);
return (
<>
<StatusBar barStyle={'light-content'} />
<Image
style={styles.backgroundImage}
source={
isIPhoneX()
? require('../../assets/images/suggested-people-preview-large.png')
: require('../../assets/images/suggested-people-preview-small.png')
}
resizeMode={'cover'}
/>
<BlurView blurType={'light'} blurAmount={1}>
<SafeAreaView style={styles.container}>
<Image
style={styles.logo}
source={require('../../assets/images/tagg-logo.png')}
/>
<Text style={styles.body}>
Welcome to the suggested people's page where you can discover new
people!{'\n\n'}Let's get you set up!
</Text>
</SafeAreaView>
</BlurView>
<TouchableOpacity
style={styles.nextButton}
onPress={() =>
navigation.navigate('UpdateSPPicture', {editing: false})
}>
<UpArrow color={'white'} />
</TouchableOpacity>
</>
);
};
const styles = StyleSheet.create({
backgroundImage: {
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
position: 'absolute',
},
container: {
width: '100%',
height: '100%',
backgroundColor: 'rgba(0,0,0,0.65)',
alignItems: 'center',
},
logo: {
width: normalize(120),
height: normalize(120),
marginTop: '25%',
},
body: {
fontSize: normalize(20),
lineHeight: normalize(25),
textAlign: 'center',
fontWeight: '700',
color: 'white',
marginTop: '5%',
width: SCREEN_WIDTH * 0.8,
},
nextButton: {
position: 'absolute',
color: 'white',
transform: [{rotate: '90deg'}],
width: normalize(70),
aspectRatio: 0.86,
bottom: SCREEN_HEIGHT * 0.1,
right: '5%',
},
});
export default SuggestedPeopleWelcomeScreen;
|
