FarmaFinder/apps/frontend-mobile/app/_layout.tsx

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 { colors } from '../constants/theme';

const queryClient = new QueryClient();

export default function RootLayout() {
  const { checkAuth } = useAuthStore();
  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 (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ImageBackground
        source={require('../assets/bg.png')}
        style={bgStyles.background}
        resizeMode="cover"
        imageStyle={bgStyles.backgroundImage}
      >
      <View style={bgStyles.overlay} />
      <SafeAreaProvider>
        <QueryClientProvider client={queryClient}>
          <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="auto" />
        </QueryClientProvider>
      </SafeAreaProvider>
      </ImageBackground>
    </GestureHandlerRootView>
  );
}

const bgStyles = StyleSheet.create({
  background: {
    flex: 1,
  },
  backgroundImage: {
    opacity: 0.5,
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(255, 252, 245, 0.48)',
  },
});