112 lines
3.1 KiB
TypeScript
112 lines
3.1 KiB
TypeScript
import { FC } from "react"
|
|
import { Image, ImageStyle, TextStyle, View, ViewStyle } from "react-native"
|
|
|
|
import { Button } from "@/components/Button"
|
|
import { Screen } from "@/components/Screen"
|
|
import { Text } from "@/components/Text"
|
|
import { useAuth } from "@/context/AuthContext"
|
|
import { isRTL } from "@/i18n"
|
|
import type { AppStackScreenProps } from "@/navigators/navigationTypes"
|
|
import { useAppTheme } from "@/theme/context"
|
|
import { $styles } from "@/theme/styles"
|
|
import type { ThemedStyle } from "@/theme/types"
|
|
import { s } from "@/utils/responsive"
|
|
import { useHeader } from "@/utils/useHeader"
|
|
import { useSafeAreaInsetsStyle } from "@/utils/useSafeAreaInsetsStyle"
|
|
|
|
const welcomeLogo = require("@assets/images/logo.png")
|
|
const welcomeFace = require("@assets/images/welcome-face.png")
|
|
|
|
interface WelcomeScreenProps extends AppStackScreenProps<"Welcome"> {}
|
|
|
|
export const WelcomeScreen: FC<WelcomeScreenProps> = function WelcomeScreen(_props) {
|
|
const { themed, theme } = useAppTheme()
|
|
|
|
const { navigation } = _props
|
|
const { logout } = useAuth()
|
|
|
|
function goNext() {
|
|
navigation.navigate("Main", { screen: "Showroom", params: {} })
|
|
}
|
|
|
|
useHeader(
|
|
{
|
|
rightTx: "common:logOut",
|
|
onRightPress: logout,
|
|
},
|
|
[logout],
|
|
)
|
|
|
|
const $bottomContainerInsets = useSafeAreaInsetsStyle(["bottom"])
|
|
|
|
return (
|
|
<Screen preset="fixed" contentContainerStyle={$styles.flex1}>
|
|
<View style={themed($topContainer)}>
|
|
<Image style={themed($welcomeLogo)} source={welcomeLogo} resizeMode="contain" />
|
|
<Text
|
|
testID="welcome-heading"
|
|
style={themed($welcomeHeading)}
|
|
tx="welcomeScreen:readyForLaunch"
|
|
preset="heading"
|
|
/>
|
|
<Text tx="welcomeScreen:exciting" preset="subheading" />
|
|
<Image
|
|
style={$welcomeFace}
|
|
source={welcomeFace}
|
|
resizeMode="contain"
|
|
tintColor={theme.colors.palette.neutral900}
|
|
/>
|
|
</View>
|
|
|
|
<View style={themed([$bottomContainer, $bottomContainerInsets])}>
|
|
<Text tx="welcomeScreen:postscript" size="md" />
|
|
|
|
<Button
|
|
testID="next-screen-button"
|
|
preset="reversed"
|
|
tx="welcomeScreen:letsGo"
|
|
onPress={goNext}
|
|
/>
|
|
</View>
|
|
</Screen>
|
|
)
|
|
}
|
|
|
|
const $topContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
|
|
flexShrink: 1,
|
|
flexGrow: 1,
|
|
flexBasis: "57%",
|
|
justifyContent: "center",
|
|
paddingHorizontal: spacing.lg,
|
|
})
|
|
|
|
const $bottomContainer: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
|
|
flexShrink: 1,
|
|
flexGrow: 0,
|
|
flexBasis: "43%",
|
|
backgroundColor: colors.palette.neutral100,
|
|
borderTopLeftRadius: s(16),
|
|
borderTopRightRadius: s(16),
|
|
paddingHorizontal: spacing.lg,
|
|
justifyContent: "space-around",
|
|
})
|
|
|
|
const $welcomeLogo: ThemedStyle<ImageStyle> = ({ spacing }) => ({
|
|
height: s(88),
|
|
width: "100%",
|
|
marginBottom: spacing.xxl,
|
|
})
|
|
|
|
const $welcomeFace: ImageStyle = {
|
|
height: s(169),
|
|
width: s(269),
|
|
position: "absolute",
|
|
bottom: s(-47),
|
|
right: s(-80),
|
|
transform: [{ scaleX: isRTL ? -1 : 1 }],
|
|
}
|
|
|
|
const $welcomeHeading: ThemedStyle<TextStyle> = ({ spacing }) => ({
|
|
marginBottom: spacing.md,
|
|
})
|