Antoni Nuñez Romeu
131 lines
3.7 KiB
TypeScript
131 lines
3.7 KiB
TypeScript
import { useEffect, useRef } from 'react';
|
|
import { Stack } from 'expo-router';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import { ImageBackground, StyleSheet, View } from 'react-native';
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
|
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
|
import { useAuthStore } from '../store/authStore';
|
|
import { registerForPushNotifications, addNotificationListener, addNotificationResponseListener } from '../services/notifications';
|
|
import { ThemeProvider, useThemeContext } from '../components/ThemeProvider';
|
|
|
|
const queryClient = new QueryClient();
|
|
|
|
function RootLayoutInner() {
|
|
const { checkAuth } = useAuthStore();
|
|
const { colors, isDark } = useThemeContext();
|
|
const notificationListener = useRef<ReturnType<typeof addNotificationListener>>();
|
|
const responseListener = useRef<ReturnType<typeof addNotificationResponseListener>>();
|
|
|
|
useEffect(() => {
|
|
checkAuth();
|
|
|
|
registerForPushNotifications();
|
|
|
|
notificationListener.current = addNotificationListener((notification) => {
|
|
console.log('Notification received:', notification);
|
|
});
|
|
|
|
responseListener.current = addNotificationResponseListener((response) => {
|
|
console.log('Notification clicked:', response);
|
|
});
|
|
|
|
return () => {
|
|
notificationListener.current?.remove();
|
|
responseListener.current?.remove();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Stack
|
|
screenOptions={{
|
|
headerStyle: { backgroundColor: colors.card },
|
|
headerTintColor: colors.primary,
|
|
headerTitleStyle: { color: colors.text, fontWeight: '600' },
|
|
}}
|
|
>
|
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
<Stack.Screen
|
|
name="medicine/[id]"
|
|
options={{ title: 'Medicamento' }}
|
|
/>
|
|
<Stack.Screen
|
|
name="pharmacy/[id]"
|
|
options={{ title: 'Farmacia' }}
|
|
/>
|
|
<Stack.Screen
|
|
name="scanner"
|
|
options={{
|
|
title: 'Escanear',
|
|
headerShown: false,
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="auth/login"
|
|
options={{
|
|
title: 'Iniciar Sesión',
|
|
headerShown: false,
|
|
}}
|
|
/>
|
|
<Stack.Screen
|
|
name="auth/register"
|
|
options={{
|
|
title: 'Registrarse',
|
|
headerShown: false,
|
|
}}
|
|
/>
|
|
</Stack>
|
|
<StatusBar style={isDark ? 'light' : 'auto'} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
function ThemedBackground({ children }: { children: React.ReactNode }) {
|
|
const { isDark } = useThemeContext();
|
|
|
|
return (
|
|
<ImageBackground
|
|
source={isDark ? require('../assets/bg_dark.png') : require('../assets/bg.png')}
|
|
style={bgStyles.background}
|
|
resizeMode="cover"
|
|
imageStyle={bgStyles.backgroundImage}
|
|
>
|
|
<View style={[bgStyles.overlay, isDark && bgStyles.overlayDark]} />
|
|
{children}
|
|
</ImageBackground>
|
|
);
|
|
}
|
|
|
|
export default function RootLayout() {
|
|
return (
|
|
<GestureHandlerRootView style={{ flex: 1 }}>
|
|
<SafeAreaProvider>
|
|
<QueryClientProvider client={queryClient}>
|
|
<ThemeProvider>
|
|
<ThemedBackground>
|
|
<RootLayoutInner />
|
|
</ThemedBackground>
|
|
</ThemeProvider>
|
|
</QueryClientProvider>
|
|
</SafeAreaProvider>
|
|
</GestureHandlerRootView>
|
|
);
|
|
}
|
|
|
|
const bgStyles = StyleSheet.create({
|
|
background: {
|
|
flex: 1,
|
|
},
|
|
backgroundImage: {
|
|
opacity: 0.55,
|
|
},
|
|
overlay: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: 'rgba(255, 252, 245, 0.48)',
|
|
},
|
|
overlayDark: {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.25)',
|
|
},
|
|
});
|