- 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
76 lines
2 KiB
TypeScript
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',
|
|
},
|
|
});
|