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