Merge pull request 'fix(mobile): align background, API config, and search bar with PWA' (#22) from fix/mobile-background-api-searchbar into main

Reviewed-on: #22

apps/frontend-mobile/app/(tabs)/alerts.tsx

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, FlatList, TouchableOpacity, Alert, useWindowDim
 import { Ionicons } from '@expo/vector-icons';
 import { colors, spacing, borderRadius, shadows } from '../../constants/theme';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
+import api from '../../services/api';
 
 const TABLET_MIN_WIDTH = 768;
 
@@ -33,9 +34,8 @@ export default function AlertsScreen() {
     setIsLoading(true);
     setError(null);
     try {
-      const res = await fetch('/api/notifications/mine', { credentials: 'include' });
+      const res = await api.get('/notifications/mine');
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = res.data;
-      const data = await res.json();
       const merged = [
         ...(data.pharmacy || []),
         ...(data.global || []),
@@ -63,13 +63,9 @@ export default function AlertsScreen() {
           onPress: async () => {
             setDeletingId(key);
             try {
-              const res = await fetch('/api/notifications/mine', {
+              await api.delete('/notifications/mine', {
-                method: 'DELETE',
+                data: { scope: item.scope, id: item.id },
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify({ scope: item.scope, id: item.id }),
               });
-              if (!res.ok && res.status !== 204) throw new Error(`HTTP ${res.status}`);
               setItems(prev => prev.filter(i => !(i.scope === item.scope && i.id === item.id)));
             } catch (err: any) {
               Alert.alert('Error', err.message || 'No se pudo eliminar');

apps/frontend-mobile/app/(tabs)/index.tsx

@@ -100,7 +100,10 @@ const styles = StyleSheet.create({
   searchContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingRight: spacing.lg,
+    paddingHorizontal: spacing.lg,
+    maxWidth: 480,
+    alignSelf: 'center',
+    width: '100%',
   },
   searchContainerTablet: {
     maxWidth: 700,

apps/frontend-mobile/app/_layout.tsx

@@ -1,6 +1,7 @@
 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';
@@ -36,6 +37,13 @@ export default function RootLayout() {
 
   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
@@ -79,6 +87,20 @@ export default function RootLayout() {
           <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)',
+  },
+});

apps/frontend-mobile/components/SearchBar.tsx

@@ -69,6 +69,9 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.sm + 2,
     marginHorizontal: spacing.lg,
     marginVertical: spacing.sm,
+    maxWidth: 420,
+    alignSelf: 'center',
+    width: '100%',
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.06,

apps/frontend-mobile/constants/config.ts

@@ -5,7 +5,7 @@ const ENV = {
     API_BASE_URL: 'http://localhost:3001/api',
   },
   production: {
-    API_BASE_URL: 'https://your-production-api.com/api',
+    API_BASE_URL: 'https://farmacias.hacecalor.net/api',
   },
 };