template_0205

RN_TEMPLATE/app/screens/AuthWelcomeScreen.tsx

@@ -0,0 +1,88 @@
+import { FC } from "react"
+import { TextStyle, View, ViewStyle } from "react-native"
+
+import { Button } from "@/components/Button"
+import { Screen } from "@/components/Screen"
+import { Text } from "@/components/Text"
+import type { AppStackScreenProps } from "@/navigators/navigationTypes"
+import { useAppTheme } from "@/theme/context"
+import type { ThemedStyle } from "@/theme/types"
+
+interface AuthWelcomeScreenProps extends AppStackScreenProps<"AuthWelcome"> {}
+
+export const AuthWelcomeScreen: FC<AuthWelcomeScreenProps> = ({ navigation }) => {
+  const { themed } = useAppTheme()
+
+  const handleLogin = () => {
+    navigation.navigate("Login")
+  }
+
+  const handleRegister = () => {
+    navigation.navigate("Register")
+  }
+
+  return (
+    <Screen
+      preset="fixed"
+      contentContainerStyle={themed($screenContainer)}
+      safeAreaEdges={["top", "bottom"]}
+    >
+      <View style={themed($content)}>
+        <Text text="Welcome" preset="heading" style={themed($title)} />
+        <Text
+          text="Sign in to continue or create a new account"
+          preset="subheading"
+          style={themed($subtitle)}
+        />
+      </View>
+
+      <View style={themed($buttonContainer)}>
+        <Button
+          testID="login-button"
+          text="Log In"
+          style={themed($button)}
+          preset="reversed"
+          onPress={handleLogin}
+        />
+        <Button
+          testID="register-button"
+          text="Create Account"
+          style={themed($button)}
+          preset="default"
+          onPress={handleRegister}
+        />
+      </View>
+    </Screen>
+  )
+}
+
+const $screenContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  flex: 1,
+  paddingHorizontal: spacing.lg,
+  justifyContent: "space-between",
+})
+
+const $content: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  flex: 1,
+  justifyContent: "center",
+  alignItems: "center",
+  paddingBottom: spacing.xxl,
+})
+
+const $title: ThemedStyle<TextStyle> = ({ spacing }) => ({
+  marginBottom: spacing.sm,
+  textAlign: "center",
+})
+
+const $subtitle: ThemedStyle<TextStyle> = () => ({
+  textAlign: "center",
+})
+
+const $buttonContainer: ThemedStyle<ViewStyle> = ({ spacing }) => ({
+  paddingBottom: spacing.xl,
+  gap: spacing.md,
+})
+
+const $button: ThemedStyle<ViewStyle> = () => ({
+  width: "100%",
+})