fix my code.
// navigation/AppNavigator.js
import React, { useContext } from 'react';
import { AuthContext } from '../context/AuthContext';
import AuthNavigator from './AuthNavigator';
import MainNavigator from './MainNavigator';

const AppNavigator = () => {
    const { authToken } = useContext(AuthContext);

    return authToken ? <MainNavigator /> : <AuthNavigator />;
};

export default AppNavigator;

// navigation/AuthNavigator.js
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from '../screens/LoginScreen';
import RegistrationScreen from '../screens/RegistrationScreen';

const Stack = createStackNavigator();

const AuthNavigator = () => (
    <Stack.Navigator initialRouteName="Login">
        <Stack.Screen
            name="Login"
            component={LoginScreen}
            options={{ headerShown: false }}
        />
        <Stack.Screen
            name="Register"
            component={RegistrationScreen}
            options={{ headerTitle: 'Register' }}
        />
    </Stack.Navigator>
);

export default AuthNavigator;

// navigation/MainNavigator.js
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen';
import ExercisesScreen from '../screens/ExercisesScreen';
import ProgressScreen from '../screens/ProgressScreen';
import BodyAnalysisScreen from '../screens/BodyAnalysisScreen';
import NutritionScreen from '../screens/NutritionScreen';
import SettingsScreen from '../screens/SettingsScreen';
import ResourcesScreen from '../screens/ResourcesScreen';
import CommunityScreen from '../screens/CommunityScreen';
import AvatarScreen from '../screens/AvatarScreen';
import FriendsScreen from '../screens/FriendsScreen'; // Import FriendsScreen

const Stack = createStackNavigator();

const MainNavigator = () => (
  <Stack.Navigator
    initialRouteName="Home"
    screenOptions={{
      headerStyle: { backgroundColor: '#4F8EF7' },
      headerTintColor: '#fff',
      headerTitleStyle: { fontWeight: 'bold' },
    }}
  >
    <Stack.Screen
      name="Home"
      component={HomeScreen}
      options={{ headerTitle: 'Home' }}
    />
    <Stack.Screen
      name="Exercises"
      component={ExercisesScreen}
      options={{ headerTitle: 'Exercises' }}
    />
    <Stack.Screen
      name="Progress"
      component={ProgressScreen}
      options={{ headerTitle: 'Progress' }}
    />
    <Stack.Screen
      name="BodyAnalysis"
      component={BodyAnalysisScreen}
      options={{ headerTitle: 'Body Analysis' }}
    />
    <Stack.Screen
      name="Nutrition"
      component={NutritionScreen}
      options={{ headerTitle: 'Nutrition' }}
    />
    <Stack.Screen
      name="Settings"
      component={SettingsScreen}
      options={{ headerTitle: 'Settings' }}
    />
    <Stack.Screen
      name="Resources"
      component={ResourcesScreen}
      options={{ headerTitle: 'Resources' }}
    />
    <Stack.Screen
      name="Community"
      component={CommunityScreen}
      options={{ headerTitle: 'Community' }}
    />
    <Stack.Screen
      name="Avatar"
      component={AvatarScreen}
      options={{ headerTitle: 'Avatar' }}
    />
    <Stack.Screen
      name="Friends"
      component={FriendsScreen}
      options={{ headerTitle: 'Friends' }}
    />
    {/* Add more screens as needed */}
  </Stack.Navigator>
);

export default MainNavigator;

// navigation/TabNavigator.js

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from '../screens/HomeScreen';
import NutritionScreen from '../screens/NutritionScreen';
import ProgressScreen from '../screens/ProgressScreen';
import ProfileScreen from '../screens/ProfileScreen';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { useTheme } from 'react-native-paper';

const Tab = createBottomTabNavigator();

const TabNavigator = () => {
  const theme = useTheme();

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        // Customize icons for each tab
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          switch (route.name) {
            case 'Home':
              iconName = focused ? 'home' : 'home-outline';
              break;
            case 'Nutrition':
              iconName = focused ? 'apple' : 'apple-outline';
              break;
            case 'Progress':
              iconName = focused ? 'chart-line' : 'chart-line';
              break;
            case 'Profile':
              iconName = focused ? 'account' : 'account-outline';
              break;
            default:
              iconName = 'circle';
          }

          return <Icon name={iconName} size={size} color={color} />;
        },
        // Tab bar active and inactive colors
        tabBarActiveTintColor: theme.colors.primary,
        tabBarInactiveTintColor: 'gray',
        // Style the tab bar
        tabBarStyle: {
          backgroundColor: theme.colors.surface,
          borderTopWidth: 0,
          elevation: 5, // Add shadow for Android
        },
        headerShown: false, // Hide the header for all tabs
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Nutrition" component={NutritionScreen} />
      <Tab.Screen name="Progress" component={ProgressScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
};

export default TabNavigator;

// App.js

import 'react-native-gesture-handler'; // Must be at the very top
import React from 'react';
import { AuthProvider } from './context/AuthContext';
import { ThemeProvider, ThemeContext } from './context/ThemeContext';
import { Provider as PaperProvider } from 'react-native-paper'; 
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import AppNavigator from './navigation/AppNavigator'; // Import AppNavigator

/**
 * Main App Component
 */
const App = () => {
    return (
      <AuthProvider>
        <ThemeProvider>
          <ThemeContext.Consumer>
            {({ theme }) => {
              if (!theme) {
                console.error('ThemeContext: theme is undefined');
                return null;
              }
              return (
                <PaperProvider theme={theme}>
                  <StatusBar style={theme.dark ? 'light' : 'dark'} />
                  <NavigationContainer theme={theme}>
                    <AppNavigator /> {/* Use AppNavigator instead of TabNavigator */}
                  </NavigationContainer>
                </PaperProvider>
              );
            }}
          </ThemeContext.Consumer>
        </ThemeProvider>
      </AuthProvider>
    );
};

export default App;