copilot-swe-agent[bot]
82d90b48e2
- Fix fatal crash: require('../../../assets/logo.png') in LoginScreen and
WelcomeScreen resolved 3 levels above mobile/src/screens/ — outside the
mobile/ directory. Changed to ../../assets/logo.png which correctly
resolves to the existing mobile/assets/logo.png.
- Add expo-router app/ directory (root cause of missing welcome screen and
web support): app/_layout.tsx, (auth)/, (tabs)/ with all route files
- Add WelcomeScreen.tsx: branded intro screen with feature highlights
- Update LoginScreen/WelcomeScreen to use useRouter() (expo-router style)
- Add react-native-web ~0.20.0 and react-dom 19.2.4 for web channel
- Add expo-device ~7.0.3 (was imported but missing from package.json)
- Remove android.googleServicesFile from app.json (file is gitignored;
README documents how to restore it for Android FCM builds)
- Add web.bundler: metro and web.output: single to app.json
- Fix aria-hidden to explicit boolean value in WelcomeScreen
Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
/**
|
||
* Root layout for the DocuElevate mobile app.
|
||
*
|
||
* Wraps the entire app in AuthProvider and SafeAreaProvider, then uses the
|
||
* AuthGuard component to redirect between the unauthenticated (auth) route
|
||
* group and the authenticated (tabs) route group based on session state.
|
||
*/
|
||
|
||
import { Stack, useRouter, useSegments } from "expo-router";
|
||
import React, { useEffect } from "react";
|
||
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
|
||
import { SafeAreaProvider } from "react-native-safe-area-context";
|
||
import { AuthProvider, useAuth } from "../src/context/AuthContext";
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Auth guard – redirects to the correct route group after auth state resolves
|
||
// ---------------------------------------------------------------------------
|
||
|
||
function AuthGuard() {
|
||
const { isLoading, isAuthenticated } = useAuth();
|
||
const segments = useSegments();
|
||
const router = useRouter();
|
||
|
||
useEffect(() => {
|
||
if (isLoading) return;
|
||
|
||
const inAuthGroup = segments[0] === "(auth)";
|
||
|
||
if (!isAuthenticated && !inAuthGroup) {
|
||
// Unauthenticated visitor outside the auth group → send to welcome
|
||
router.replace("/(auth)/");
|
||
} else if (isAuthenticated && inAuthGroup) {
|
||
// Authenticated user on auth screens → send to main app
|
||
router.replace("/(tabs)/");
|
||
}
|
||
}, [isAuthenticated, isLoading, segments, router]);
|
||
|
||
if (isLoading) {
|
||
return (
|
||
<View style={styles.loading}>
|
||
<ActivityIndicator size="large" color="#1e40af" />
|
||
<Text style={styles.loadingText}>Loading…</Text>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Stack screenOptions={{ headerShown: false }}>
|
||
<Stack.Screen name="(auth)" />
|
||
<Stack.Screen name="(tabs)" />
|
||
</Stack>
|
||
);
|
||
}
|
||
|
||
// ---------------------------------------------------------------------------
|
||
// Root layout export
|
||
// ---------------------------------------------------------------------------
|
||
|
||
export default function RootLayout() {
|
||
return (
|
||
<SafeAreaProvider>
|
||
<AuthProvider>
|
||
<AuthGuard />
|
||
</AuthProvider>
|
||
</SafeAreaProvider>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
loading: {
|
||
flex: 1,
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
backgroundColor: "#f9fafb",
|
||
gap: 12,
|
||
},
|
||
loadingText: {
|
||
color: "#6b7280",
|
||
fontSize: 15,
|
||
},
|
||
});
|