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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
import React from 'react'
import {
View,
ViewStyle,
TextStyle,
ImageStyle,
SafeAreaView,
} from 'react-native'
import { useNavigation } from '@react-navigation/native'
import { observer } from 'mobx-react-lite'
import {
Button,
Header,
Screen,
Text,
Wallpaper,
AutoImage as Image,
} from '../../components'
import { color, spacing, typography } from '../../theme'
const bowserLogo = require('./bowser.png')
const FULL: ViewStyle = { flex: 1 }
const CONTAINER: ViewStyle = {
backgroundColor: color.transparent,
paddingHorizontal: spacing[4],
}
const TEXT: TextStyle = {
color: color.palette.white,
fontFamily: typography.primary,
}
const BOLD: TextStyle = { fontWeight: 'bold' }
const HEADER: TextStyle = {
paddingTop: spacing[3],
paddingBottom: spacing[4] + spacing[1],
paddingHorizontal: 0,
}
const HEADER_TITLE: TextStyle = {
...TEXT,
...BOLD,
fontSize: 12,
lineHeight: 15,
textAlign: 'center',
letterSpacing: 1.5,
}
const TITLE_WRAPPER: TextStyle = {
...TEXT,
textAlign: 'center',
}
const TITLE: TextStyle = {
...TEXT,
...BOLD,
fontSize: 28,
lineHeight: 38,
textAlign: 'center',
}
const ALMOST: TextStyle = {
...TEXT,
...BOLD,
fontSize: 26,
fontStyle: 'italic',
}
const BOWSER: ImageStyle = {
alignSelf: 'center',
marginVertical: spacing[5],
maxWidth: '100%',
width: 343,
height: 230,
}
const CONTENT: TextStyle = {
...TEXT,
color: '#BAB6C8',
fontSize: 15,
lineHeight: 22,
marginBottom: spacing[5],
}
const CONTINUE: ViewStyle = {
paddingVertical: spacing[4],
paddingHorizontal: spacing[4],
backgroundColor: color.palette.deepPurple,
}
const CONTINUE_TEXT: TextStyle = {
...TEXT,
...BOLD,
fontSize: 13,
letterSpacing: 2,
}
const FOOTER: ViewStyle = { backgroundColor: '#20162D' }
const FOOTER_CONTENT: ViewStyle = {
paddingVertical: spacing[4],
paddingHorizontal: spacing[4],
}
export const WelcomeScreen = observer(function WelcomeScreen() {
const navigation = useNavigation()
const nextScreen = () => navigation.navigate('demo')
return (
<View testID="WelcomeScreen" style={FULL}>
<Wallpaper />
<Screen
style={CONTAINER}
preset="scroll"
backgroundColor={color.transparent}
>
<Header
headerTx="welcomeScreen.poweredBy"
style={HEADER}
titleStyle={HEADER_TITLE}
/>
<Text style={TITLE_WRAPPER}>
<Text style={TITLE} text="Your new app, " />
<Text style={ALMOST} text="almost" />
<Text style={TITLE} text="!" />
</Text>
<Text style={TITLE} preset="header" tx="welcomeScreen.readyForLaunch" />
<Image source={bowserLogo} style={BOWSER} />
<Text style={CONTENT}>
This probably isn't what your app is going to look like. Unless your
designer handed you this screen and, in that case, congrats! You're
ready to ship.
</Text>
<Text style={CONTENT}>
For everyone else, this is where you'll see a live preview of your
fully functioning app using Ignite.
</Text>
</Screen>
<SafeAreaView style={FOOTER}>
<View style={FOOTER_CONTENT}>
<Button
testID="next-screen-button"
style={CONTINUE}
textStyle={CONTINUE_TEXT}
tx="welcomeScreen.continue"
onPress={nextScreen}
/>
</View>
</SafeAreaView>
</View>
)
})
|
