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

import React, { useEffect, useRef } from 'react';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { Image, 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';
import { initFaro } from '../services/faro';

// Boot Faro RUM once, as early as possible.
initFaro();

const queryClient = new QueryClient();

const bgLight = require('../assets/bg.png');
const bgDark = require('../assets/bg_dark.png');

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 (
    <View style={styles.root}>
      <Image
        source={isDark ? bgDark : bgLight}
        style={styles.bgImage}
        resizeMode="cover"
      />
      <View style={[styles.overlay, isDark && styles.overlayDark]} pointerEvents="none" />
      <View style={styles.content}>
        {children}
      </View>
    </View>
  );
}

export default function RootLayout() {
  return (
    <GestureHandlerRootView style={styles.root}>
      <SafeAreaProvider>
        <QueryClientProvider client={queryClient}>
          <ThemeProvider>
            <ThemedBackground>
              <RootLayoutInner />
            </ThemedBackground>
          </ThemeProvider>
        </QueryClientProvider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
  bgImage: {
    ...StyleSheet.absoluteFillObject,
    opacity: 0.55,
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(255, 252, 245, 0.48)',
  },
  overlayDark: {
    backgroundColor: 'rgba(0, 0, 0, 0.25)',
  },
  content: {
    flex: 1,
  },
});