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
|
import {StackNavigationProp} from '@react-navigation/stack';
import * as React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import {Background, TaggSquareButton} from '../../components';
import {OnboardingStackParams} from '../../routes';
import {BackgroundGradientType} from '../../types';
import {SCREEN_WIDTH} from '../../utils';
type WelcomeScreenNavigationProps = StackNavigationProp<
OnboardingStackParams,
'WelcomeScreen'
>;
interface WelcomeScreenProps {
navigation: WelcomeScreenNavigationProps;
}
const WelcomeScreen: React.FC<WelcomeScreenProps> = ({navigation}) => {
const handleNext = () => {
navigation.navigate('InvitationCodeVerification');
};
return (
<Background
style={styles.container}
gradientType={BackgroundGradientType.Light}>
<Image
source={require('../../assets/images/welcome.png')}
style={styles.image}
/>
<View>
<Text style={styles.header}>Welcome to TAGG!</Text>
<Text style={styles.subtext}>
Tagg is the new social networking platform for you! It will help you
create your own personalized digital space where you can express who
you are, along with all the moments that comprehensively define you!
</Text>
</View>
<TaggSquareButton
onPress={handleNext}
title={'Next'}
buttonStyle={'large'}
buttonColor={'purple'}
labelColor={'white'}
style={styles.nextButton}
/>
</Background>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
/**
* Set primary axis to column
* Align items to centre along that primary axis and the secondary axis as well
*/
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
image: {
width: SCREEN_WIDTH,
height: SCREEN_WIDTH,
},
header: {
color: '#fff',
fontSize: 32,
fontWeight: '600',
textAlign: 'center',
marginBottom: '4%',
marginHorizontal: '10%',
},
subtext: {
color: '#fff',
fontSize: 16,
fontWeight: '600',
textAlign: 'center',
marginBottom: '15%',
marginHorizontal: '10%',
},
nextButton: {
marginBottom: '15%',
},
});
export default WelcomeScreen;
|
