template_0205

2026-02-05 13:16:05 +08:00
commit d93e4d9c9f
197 changed files with 52810 additions and 0 deletions
--- a/RN_TEMPLATE/app/screens/WelcomeScreen.tsx
+++ b/RN_TEMPLATE/app/screens/WelcomeScreen.tsx
@@ -0,0 +1,111 @@
+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,
+})