Merge pull request #57 from flemingvincent/ess-3

Updated provider, dependencies, layout, and modals

app/(app)/(protected)/_layout.tsx

@@ -1,7 +1,7 @@
 import { Tabs } from "expo-router";
 import React from "react";
 
-import { theme } from "@/lib/constants";
+import { colors } from "@/constants/colors";
 import { useColorScheme } from "@/lib/useColorScheme";
 
 export default function ProtectedLayout() {
@@ -14,9 +14,13 @@ export default function ProtectedLayout() {
 				tabBarStyle: {
 					backgroundColor:
 						colorScheme === "dark"
-							? theme.dark.background
-							: theme.light.background,
+							? colors.dark.background
+							: colors.light.background,
 				},
+				tabBarActiveTintColor:
+					colorScheme === "dark"
+						? colors.dark.foreground
+						: colors.light.foreground,
 				tabBarShowLabel: false,
 			}}
 		>

app/(app)/_layout.tsx

@@ -1,22 +1,73 @@
 import { Stack } from "expo-router";
 
+import { colors } from "@/constants/colors";
+import { useColorScheme } from "@/lib/useColorScheme";
+
 export const unstable_settings = {
 	initialRouteName: "(root)",
 };
 
 export default function AppLayout() {
+	const { colorScheme } = useColorScheme();
+
 	return (
 		<Stack screenOptions={{ headerShown: false }}>
 			<Stack.Screen name="(protected)" />
 			<Stack.Screen name="welcome" />
-			<Stack.Screen name="sign-up" options={{ presentation: "modal" }} />
+			<Stack.Screen
+				name="sign-up"
+				options={{
+					presentation: "modal",
+					headerShown: true,
+					headerTitle: "Sign Up",
+					headerStyle: {
+						backgroundColor:
+							colorScheme === "dark"
+								? colors.dark.background
+								: colors.light.background,
+					},
+					headerTintColor:
+						colorScheme === "dark"
+							? colors.dark.foreground
+							: colors.light.foreground,
+				}}
+			/>
 			<Stack.Screen
 				name="sign-in"
 				options={{
 					presentation: "modal",
+					headerShown: true,
+					headerTitle: "Sign In",
+					headerStyle: {
+						backgroundColor:
+							colorScheme === "dark"
+								? colors.dark.background
+								: colors.light.background,
+					},
+					headerTintColor:
+						colorScheme === "dark"
+							? colors.dark.foreground
+							: colors.light.foreground,
+				}}
+			/>
+			<Stack.Screen
+				name="modal"
+				options={{
+					presentation: "modal",
+					headerShown: true,
+					headerTitle: "Modal",
+					headerStyle: {
+						backgroundColor:
+							colorScheme === "dark"
+								? colors.dark.background
+								: colors.light.background,
+					},
+					headerTintColor:
+						colorScheme === "dark"
+							? colors.dark.foreground
+							: colors.light.foreground,
 				}}
 			/>
-			<Stack.Screen name="modal" options={{ presentation: "modal" }} />
 		</Stack>
 	);
 }

app/(app)/sign-in.tsx

@@ -40,7 +40,7 @@ export default function SignIn() {
 	}
 
 	return (
-		<SafeAreaView className="flex-1 bg-background p-4">
+		<SafeAreaView className="flex-1 bg-background p-4" edges={["bottom"]}>
 			<View className="flex-1 gap-4 web:m-4">
 				<H1 className="self-start ">Sign In</H1>
 				<Form {...form}>

app/(app)/sign-up.tsx

@@ -60,7 +60,7 @@ export default function SignUp() {
 	}
 
 	return (
-		<SafeAreaView className="flex-1 bg-background p-4">
+		<SafeAreaView className="flex-1 bg-background p-4" edges={["bottom"]}>
 			<View className="flex-1 gap-4 web:m-4">
 				<H1 className="self-start">Sign Up</H1>
 

constants/colors.ts

@@ -0,0 +1,44 @@
+export const colors = {
+	light: {
+		background: "hsl(0, 0%, 100%)",
+		foreground: "hsl(240, 10%, 3.9%)",
+		card: "hsl(0, 0%, 100%)",
+		cardForeground: "hsl(240, 10%, 3.9%)",
+		popover: "hsl(0, 0%, 100%)",
+		popoverForeground: "hsl(240, 10%, 3.9%)",
+		primary: "hsl(240, 5.9%, 10%)",
+		primaryForeground: "hsl(0, 0%, 98%)",
+		secondary: "hsl(240, 4.8%, 95.9%)",
+		secondaryForeground: "hsl(240, 5.9%, 10%)",
+		muted: "hsl(240, 4.8%, 95.9%)",
+		mutedForeground: "hsl(240, 3.8%, 46.1%)",
+		accent: "hsl(240, 4.8%, 95.9%)",
+		accentForeground: "hsl(240, 5.9%, 10%)",
+		destructive: "hsl(0, 84.2%, 60.2%)",
+		destructiveForeground: "hsl(0, 0%, 98%)",
+		border: "hsl(240, 5.9%, 90%)",
+		input: "hsl(240, 5.9%, 90%)",
+		ring: "hsl(240, 5.9%, 10%)",
+	},
+	dark: {
+		background: "hsl(240, 10%, 3.9%)",
+		foreground: "hsl(0, 0%, 98%)",
+		card: "hsl(240, 10%, 3.9%)",
+		cardForeground: "hsl(0, 0%, 98%)",
+		popover: "hsl(240, 10%, 3.9%)",
+		popoverForeground: "hsl(0, 0%, 98%)",
+		primary: "hsl(0, 0%, 98%)",
+		primaryForeground: "hsl(240, 5.9%, 10%)",
+		secondary: "hsl(240, 3.7%, 15.9%)",
+		secondaryForeground: "hsl(0, 0%, 98%)",
+		muted: "hsl(240, 3.7%, 15.9%)",
+		mutedForeground: "hsl(240, 5%, 64.9%)",
+		accent: "hsl(240, 3.7%, 15.9%)",
+		accentForeground: "hsl(0, 0%, 98%)",
+		destructive: "hsl(0, 72%, 51%)",
+		destructiveForeground: "hsl(0, 0%, 98%)",
+		border: "hsl(240, 3.7%, 15.9%)",
+		input: "hsl(240, 3.7%, 15.9%)",
+		ring: "hsl(240, 4.9%, 83.9%)",
+	},
+};

context/supabase-provider.tsx

@@ -65,14 +65,16 @@ export const SupabaseProvider = ({ children }: SupabaseProviderProps) => {
 	};
 
 	useEffect(() => {
-		const { data } = supabase.auth.onAuthStateChange(async (event, session) => {
+		supabase.auth.getSession().then(({ data: { session } }) => {
 			setSession(session);
 			setUser(session ? session.user : null);
 			setInitialized(true);
 		});
-		return () => {
-			data.subscription.unsubscribe();
-		};
+
+		supabase.auth.onAuthStateChange((_event, session) => {
+			setSession(session);
+			setUser(session ? session.user : null);
+		});
 	}, []);
 
 	useEffect(() => {

package.json

@@ -11,11 +11,11 @@
 	},
 	"dependencies": {
 		"@hookform/resolvers": "^3.1.1",
-		"@react-native-async-storage/async-storage": "2.0.0",
+		"@react-native-async-storage/async-storage": "1.23.1",
 		"@supabase/supabase-js": "^2.45.4",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",
-		"expo": "~51.0.34",
+		"expo": "~51.0.35",
 		"expo-constants": "~16.0.2",
 		"expo-image": "~1.13.0",
 		"expo-linking": "~6.3.1",
@@ -24,14 +24,14 @@
 		"expo-status-bar": "~1.12.1",
 		"expo-system-ui": "~3.0.7",
 		"nativewind": "^4.0.1",
-		"react": "18.3.1",
+		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"react-hook-form": "^7.45.0",
-		"react-native": "0.75.3",
-		"react-native-gesture-handler": "~2.20.0",
-		"react-native-reanimated": "~3.15.3",
-		"react-native-safe-area-context": "4.11.0",
-		"react-native-screens": "3.34.0",
+		"react-native": "0.74.5",
+		"react-native-gesture-handler": "~2.16.1",
+		"react-native-reanimated": "~3.10.1",
+		"react-native-safe-area-context": "4.10.5",
+		"react-native-screens": "3.31.1",
 		"react-native-url-polyfill": "^2.0.0",
 		"react-native-web": "^0.19.12",
 		"tailwind-merge": "^2.2.1",
@@ -40,11 +40,11 @@
 	},
 	"devDependencies": {
 		"@babel/core": "^7.20.0",
-		"@types/react": "~18.3.10",
+		"@types/react": "~18.2.79",
 		"eslint": "^8.57.1",
 		"eslint-config-universe": "^13.0.0",
 		"prettier": "^3.0.3",
-		"typescript": "~5.6.2"
+		"typescript": "~5.3.3"
 	},
 	"private": true
 }