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
|
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>
)
})
|
