feat: add screen title, text styling, Button components

Adding styling to text for user info and using Button component for standard styling. Adding layout styling for signed out view to flex buttons, updating links to Buttons for standard styling. Signed-off-by: Kenton Duprey <[email protected]>
clerk · Sep 4, 2024 · 60479e1 · 60479e1
1 parent fccdb0d
commit 60479e1
Showing 1 changed file with 60 additions and 22 deletions.
diff --git a/app/(home)/index.tsx b/app/(home)/index.tsx
@@ -1,26 +1,64 @@
-import { SignedIn, SignedOut, useUser } from "@clerk/clerk-expo";
-import { Link } from "expo-router";
-import { Text, View } from "react-native";
+import { SignedIn, SignedOut, useAuth, useUser } from "@clerk/clerk-expo";
+import { Stack, router } from "expo-router";
+import { Button, Text, View } from "react-native";
 
 export default function Page() {
-  const { user } = useUser();
+	const { user } = useUser();
+	const { signOut } = useAuth();
 
-  return (
-    <View>
-      <SignedIn>
-        <Text>Welcome, {user?.emailAddresses[0].emailAddress}</Text>
-      </SignedIn>
-      <SignedOut>
-        <View>
-          <Text>Clerk 🤝 Expo</Text>
-          <Link href="/sign-in">
-            <Text>Sign In</Text>
-          </Link>
-          <Link href="/sign-up">
-            <Text>Sign Up</Text>
-          </Link>
-        </View>
-      </SignedOut>
-    </View>
-  );
+	return (
+		<View>
+			<Stack.Screen options={{ title: "Home" }} />
+			<SignedIn>
+				<Text
+					style={{
+						padding: 10,
+						fontSize: 24,
+					}}
+				>
+					Welcome, {user?.emailAddresses[0].emailAddress}
+				</Text>
+				<Button
+					title="Sign Out"
+					onPress={() => {
+						signOut().then(() => {
+							router.replace("/");
+						});
+					}}
+				/>
+			</SignedIn>
+			<SignedOut>
+				<View
+					style={{
+						display: "flex",
+						flexDirection: "column",
+						padding: 10,
+						gap: 10,
+					}}
+				>
+					<Text
+						style={{
+							fontSize: 24,
+							fontWeight: "bold",
+							textAlign: "center",
+						}}
+					>
+						Clerk 🤝 Expo
+					</Text>
+					<Button
+						title="Sign In"
+						onPress={() => {
+							router.push("/sign-in");
+						}}
+					/>
+					<Button
+						title="Sign Up"
+						onPress={() => {
+							router.push("/sign-up");
+						}}
+					/>
+				</View>
+			</SignedOut>
+		</View>
+	);
 }