🎯 Implemented Features

// app/(tabs)/(home)/index.tsx
// Change statistics
const stats = [
  { label: 'Total Items', value: '1.2K', icon: Package },
  // Add more stats here
];

// Change categories
const categories = [
  { id: '1', name: 'Tech', icon: '💻', color: '#FF6B35' },
  // Add more categories
];

// app/(tabs)/explore/index.tsx

// Change available filters
const categories = ['All', 'Tech', 'Design', 'Business', 'Marketing'];

// Modify search logic
const filteredItems = items.filter(item => {
  const matchesSearch = item.title.toLowerCase().includes(searchQuery);
  const matchesCategory = !selectedCategory || item.category === selectedCategory;
  return matchesSearch && matchesCategory;
});

// app/(tabs)/activity/index.tsx

// Add activity types
type ActivityType = 'like' | 'comment' | 'follow' | 'purchase' | 'share';

// Modify activities
const activities: Activity[] = [
  {
    id: '1',
    type: 'like',
    title: 'Nueva actividad',
    description: 'Descripción de la actividad',
    timestamp: '2024-01-20T10:30:00Z',
    icon: Heart,
  },
];

// Customize colors by type
const getActivityColor = (type: ActivityType) => {
  switch (type) {
    case 'like': return Colors.error;
    case 'comment': return Colors.primary;
    // Add more types
  }
};

// app/(tabs)/messages/index.tsx - Lista de chats
const conversations: Conversation[] = [
  {
    id: '1',
    name: 'John Doe',
    lastMessage: 'Hey, how are you?',
    timestamp: '2m ago',
    unread: 2,
    avatar: 'https://i.pravatar.cc/150?img=1',
    online: true,
  },
];

// app/(tabs)/messages/[chatId].tsx - Individual chat
const messages: Message[] = [
  {
    id: '1',
    text: 'Hello!',
    sender: 'user', // 'user' | 'other'
    timestamp: '10:30 AM',
  },
];

// app/(tabs)/favorites/index.tsx
const { favorites, toggleFavorite, isFavorite } = useApp();

// Favorites are managed globally in AppContext
// To add/remove favorites from anywhere:
toggleFavorite(itemId);

// To check if it is a favorite:
const isFav = isFavorite(itemId);

// app/(tabs)/profile/index.tsx
const { user } = useApp();

// User structure (contexts/AppContext.tsx):
interface User {
  id: string;
  name: string;
  username: string;
  email: string;
  avatar: string;
  bio?: string;
  location?: string;
  website?: string;
  stats: {
    posts: number;
    followers: number;
    following: number;
  };
}

// app/(tabs)/profile/edit-profile.tsx
// Form with validation to edit profile

// app/(tabs)/settings/index.tsx

// Add new section
const sections = [
  {
    title: t.settings.preferences,
    data: [
      {
        id: 'nueva-opcion',
        icon: <Icon size={20} color={colors.primary} />,
        label: 'Nueva Opción',
        type: 'toggle' as const,
        value: nuevoEstado,
      },
    ],
  },
];

// Add handler for the new option
const handleNuevaOpcion = () => {
  // Your logic here
};

import { useTheme } from '@/contexts/ThemeContext';

const { colors, isDark, themeMode, setTheme, toggleTheme } = useTheme();

// Apply dynamic color
<View style={{ backgroundColor: colors.surface }}>
  <Text style={{ color: colors.text }}>Hola</Text>
</View>

// Change theme
setTheme('dark'); // 'light' | 'dark' | 'system'

// Cyclic toggle
toggleTheme(); // light → dark → system → light

colors = {
  primary, primaryLight, primaryDark,
  secondary, secondaryLight,
  accent, accentLight,
  success, successLight,
  warning, warningLight,
  error, errorLight,
  background, surface, surfaceSecondary,
  text, textSecondary, textTertiary, textInverse,
  border, borderLight,
  overlay,
}

import { useI18n } from '@/contexts/I18nContext';

const { t, language, setLanguage, toggleLanguage } = useI18n();

// Use translation
<Text>{t.common.save}</Text>
<Text>{t.tabs.home}</Text>
<Text>{t.home.welcomeBack}</Text>

// Change language
setLanguage('en'); // 'en' | 'es'

// Toggle between languages
toggleLanguage(); // en ↔ es

t = {
  common: { save, cancel, delete, edit, ... },
  tabs: { home, explore, activity, ... },
  home: { welcomeBack, overview, ... },
  explore: { title, searchPlaceholder, ... },
  activity: { title, today, yesterday, ... },
  messages: { title, typeMessage, ... },
  favorites: { title, noFavorites, ... },
  profile: { title, editProfile, ... },
  settings: { title, preferences, ... },
  notifications: { title, markAllRead, ... },
  onboarding: { skip, next, getStarted, ... },
}

interface ButtonProps {
  title: string;
  onPress: () => void;
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'gradient';
  size?: 'small' | 'medium' | 'large';
  loading?: boolean;
  disabled?: boolean;
  icon?: ReactNode;
  style?: ViewStyle;
}

interface CardProps {
  item: Item;
  onPress?: () => void;
  onFavorite?: () => void;
  isFavorite?: boolean;
  variant?: 'default' | 'compact' | 'horizontal';
  showActions?: boolean;
}

interface InputProps {
  label?: string;
  value: string;
  onChangeText: (text: string) => void;
  placeholder?: string;
  error?: string;
  leftIcon?: ReactNode;
  rightIcon?: ReactNode;
  secureTextEntry?: boolean;
  multiline?: boolean;
  numberOfLines?: number;
  keyboardType?: KeyboardTypeOptions;
}

interface AvatarProps {
  source?: string;
  name: string;
  size?: 'small' | 'medium' | 'large' | 'xlarge';
  showBorder?: boolean;
  borderColor?: string;
}

interface FilterModalProps {
  visible: boolean;
  onClose: () => void;
  onApply: (filters: Filters) => void;
  categories: string[];
}

interface SkeletonLoaderProps {
  width: string | number;
  height: number;
  borderRadius?: number;
  style?: ViewStyle;
}

import { useToast } from '@/contexts/ToastContext';

const { showToast } = useToast();

showToast('Operación exitosa', 'success');
showToast('Hubo un error', 'error');
showToast('Advertencia', 'warning');
showToast('Información', 'info');

interface EmptyStateProps {
  icon: LucideIcon;
  title: string;
  description: string;
  actionTitle?: string;
  onAction?: () => void;
}

{
  user: User | null;
  favorites: string[];
  notifications: Notification[];
  settings: {
    pushNotifications: boolean;
    hapticFeedback: boolean;
  };
}

{
  setUser,
  toggleFavorite,
  isFavorite,
  addNotification,
  markNotificationAsRead,
  updateSettings,
}

showToast(message: string, type: 'success' | 'error' | 'warning' | 'info')

/ (home tab)
/(tabs)/explore
/(tabs)/activity
/(tabs)/messages
/(tabs)/messages/[chatId]
/(tabs)/favorites
/(tabs)/profile
/(tabs)/profile/edit-profile
/(tabs)/settings
/notifications (modal)
/onboarding

import { useRouter } from 'expo-router';

const router = useRouter();

// Navigate to tab
router.push('/(tabs)/explore');

// Navigate with parameters
router.push({
  pathname: '/(tabs)/(home)/item-detail',
  params: { id: '123' }
});

// Open modal
router.push('/notifications');

// Go back
router.back();

interface Item {
  id: string;
  title: string;
  description: string;
  image: string;
  category: string;
  author: string;
  authorAvatar: string;
  date: string;
  likes: number;
  comments: number;
}

export const Colors = { /* 30+ colores */ };
export const Spacing = { xs, sm, md, lg, xl, xxl, xxxl };
export const FontSizes = { xs, sm, md, lg, xl, xxl, xxxl, display };
export const FontWeights = { regular, medium, semibold, bold };
export const BorderRadius = { sm, md, lg, xl, full };

import { Colors, Spacing, FontSizes, BorderRadius } from '@/constants/colors';

const styles = StyleSheet.create({
  container: {
    padding: Spacing.md,
    backgroundColor: Colors.surface,
    borderRadius: BorderRadius.lg,
  },
  text: {
    fontSize: FontSizes.lg,
    color: Colors.text,
  },
});

// Haptic feedback
triggerHaptic(type: 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error')

// Formateo de tiempo relativo
formatRelativeTime(date: string | Date): string // "2m ago", "5h ago", etc.

// Generar color aleatorio
getRandomColor(): string

// Abreviar números
abbreviateNumber(num: number): string // 1000 → "1K", 1000000 → "1M"

// Validación
isValidEmail(email: string): boolean
isValidUrl(url: string): boolean

// Generar ID único
generateId(): string