morethanadiagnosis-hub/mobile/app/_layout.tsx
fullsizemalt 5bc3ca1832 feat: integrate React Query and configure build profiles
- Add React Query provider and client
- Create reusable UI components (Loading, Error, Empty)
- Implement custom hooks with fallback data
- Integrate hooks into Resources and Community screens
- Add pull-to-refresh support
- Configure EAS Build profiles and environment variables
2025-11-18 12:36:52 -08:00

76 lines
2 KiB
TypeScript

import { Stack, useRouter, useSegments } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { useEffect } from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';
import { useAuthStore } from './lib/auth-store';
export const unstable_settings = {
initialRouteName: '(tabs)',
};
// Auth protection hook
function useProtectedRoute() {
const { isAuthenticated, isInitialized } = useAuthStore();
const segments = useSegments();
const router = useRouter();
useEffect(() => {
if (!isInitialized) {
return;
}
const inAuthGroup = segments[0] === '(auth)';
if (!isAuthenticated && !inAuthGroup) {
// Redirect to login if not authenticated and not in auth group
router.replace('/(auth)/login');
} else if (isAuthenticated && inAuthGroup) {
// Redirect to tabs if authenticated and in auth group
router.replace('/(tabs)');
}
}, [isAuthenticated, isInitialized, segments]);
}
import { QueryClientProvider } from '@tanstack/react-query';
import { queryClient } from './lib/query-client';
export default function RootLayout() {
const { initialize, isInitialized } = useAuthStore();
// Initialize auth state on app start
useEffect(() => {
initialize();
}, []);
// Use protected route hook
useProtectedRoute();
// Show loading screen while initializing
if (!isInitialized) {
return (
<View style={styles.loadingContainer}>
<StatusBar style="dark" />
<ActivityIndicator size="large" color="#007AFF" />
</View>
);
}
return (
<QueryClientProvider client={queryClient}>
<StatusBar style="dark" />
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="(auth)" options={{ headerShown: false }} />
</Stack>
</QueryClientProvider>
);
}
const styles = StyleSheet.create({
loadingContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
});