fix my code. i am trying to add a navigation bar at the bottom of the screen similar to tiktok with Home Friends Progress Profile.
here is my code:
// navigation/TabNavigator.js

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MaterialCommunityIcons } from 'react-native-vector-icons';

// Import your screen components
import HomeScreen from '../screens/HomeScreen';
import FriendsScreen from '../screens/FriendsScreen';
import ProfileScreen from '../screens/ProfileScreen';
import ProgressScreen from '../screens/ProgressScreen';

const Tab = createBottomTabNavigator();

const TabNavigator = () => {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={({ route }) => ({
        headerShown: false, // Hide the header for bottom tabs
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

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

          // You can return any component that you like here!
          return <MaterialCommunityIcons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#4F8EF7', // Active icon color
        tabBarInactiveTintColor: 'gray', // Inactive icon color
        tabBarStyle: {
          backgroundColor: '#fff', // Tab bar background color
          borderTopWidth: 0, // Remove top border
          elevation: 5, // Add shadow for Android
        },
        tabBarShowLabel: true, // Show labels
        tabBarLabelStyle: {
          fontSize: 12,
          marginBottom: 5,
        },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Friends" component={FriendsScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="Progress" component={ProgressScreen} />
    </Tab.Navigator>
  );
};

export default TabNavigator;

// 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'; // Ensure this is imported
import NutritionScreen from '../screens/NutritionScreen'; // Ensure this is imported
import SettingsScreen from '../screens/SettingsScreen'; // Ensure this is imported
import ResourcesScreen from '../screens/ResourcesScreen'; // Import ResourcesScreen
import CommunityScreen from '../screens/CommunityScreen'; // Import CommunityScreen
import AvatarScreen from '../screens/AvatarScreen'; // Import AvatarScreen


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="Resources"
      component={ResourcesScreen}
      options={{ headerTitle: 'Resources' }}
    />
    <Stack.Screen
      name="Settings"
      component={SettingsScreen}
      options={{ headerTitle: 'Settings' }}
    />
    <Stack.Screen
      name="Community"
      component={CommunityScreen}
      options={{ headerTitle: 'Community' }}
    />
    <Stack.Screen
      name="Avatar"
      component={AvatarScreen}
      options={{ headerTitle: 'Avatar' }}
    />
    {/* Add more screens as needed */}
  </Stack.Navigator>
);

export default MainNavigator;

// 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 ThemeProvider and ThemeContext
import AppNavigator from './navigation/AppNavigator';
import { Provider as PaperProvider } from 'react-native-paper'; // Remove theme from PaperProvider here

import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';

/**
 * Main App Component
 */
const App = () => {
    return (
        <AuthProvider>
            <ThemeProvider>
                <ThemeContext.Consumer>
                    {({ theme }) => (
                        <PaperProvider theme={theme}>
                            <StatusBar style={theme.dark ? 'light' : 'dark'} />
                            <NavigationContainer theme={theme}>
                                <AppNavigator />
                            </NavigationContainer>
                        </PaperProvider>
                    )}
                </ThemeContext.Consumer>
            </ThemeProvider>
        </AuthProvider>
    );
};

export default App;

// screens/HomeScreen.js

import React, { useContext, useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  SafeAreaView,
  ScrollView,
} from 'react-native';
import { AuthContext } from '../context/AuthContext';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { useTheme, ProgressBar, Button, Card } from 'react-native-paper';

const HomeScreen = ({ navigation }) => {
  const { user } = useContext(AuthContext);
  const theme = useTheme();

  // Example data; replace with real data sources
  const [caloriesConsumed, setCaloriesConsumed] = useState(1500);
  const dailyCalorieGoal = 2000;

  const [steps, setSteps] = useState(7500);
  const dailyStepGoal = 10000;

  const [exercises, setExercises] = useState([
    { id: '1', name: 'Push Ups', duration: '30 mins' },
    { id: '2', name: 'Running', duration: '45 mins' },
  ]);

  const [friends, setFriends] = useState([
    { id: '1', name: 'Alice', progress: 60 },
    { id: '2', name: 'Bob', progress: 80 },
  ]);

  const menuItems = [
    {
      title: 'Exercises',
      icon: 'run',
      onPress: () => navigation.navigate('Exercises'),
    },
    {
      title: 'Progress',
      icon: 'chart-line',
      onPress: () => navigation.navigate('Progress'),
    },
    {
      title: 'Body Analysis',
      icon: 'human-male-height',
      onPress: () => navigation.navigate('BodyAnalysis'),
    },
    {
      title: 'Nutrition',
      icon: 'food-apple',
      onPress: () => navigation.navigate('Nutrition'),
    },
    {
      title: 'Resources',
      icon: 'book-open-page-variant',
      onPress: () => navigation.navigate('Resources'),
    },
    {
      title: 'Settings',
      icon: 'cog',
      onPress: () => navigation.navigate('Settings'),
    },
    // **New Menu Items**
    {
      title: 'Community',
      icon: 'account-group', // Icon representing community
      onPress: () => navigation.navigate('Community'),
    },
    {
      title: 'Avatar',
      icon: 'account-circle', // Icon representing avatar/profile
      onPress: () => navigation.navigate('Avatar'),
    },
  ];

  return (
    <SafeAreaView style={[styles.safeArea, { backgroundColor: theme.colors.background }]}>
      <ScrollView contentContainerStyle={styles.container}>
        {/* Welcome Message */}
        {user ? (
          <Text style={[styles.title, { color: theme.colors.text }]}>
            Welcome, {user.name}!
          </Text>
        ) : (
          <Text style={[styles.title, { color: theme.colors.text }]}>
            Welcome!
          </Text>
        )}

        {/* Calorie Tracker Card */}
        <Card style={[styles.card, { backgroundColor: theme.colors.surface }]}>
          <Card.Title
            title="Calorie Tracker"
            left={(props) => <Icon {...props} name="fire" size={30} color={theme.colors.primary} />}
          />
          <Card.Content>
            <Text style={[styles.cardText, { color: theme.colors.text }]}>
              Consumed: {caloriesConsumed} kcal
            </Text>
            <ProgressBar
              progress={caloriesConsumed / dailyCalorieGoal}
              color={theme.colors.primary}
              style={styles.progressBar}
            />
            <Text style={[styles.cardText, { color: theme.colors.text }]}>
              Remaining: {dailyCalorieGoal - caloriesConsumed} kcal
            </Text>
          </Card.Content>
          <Card.Actions>
            <Button onPress={() => navigation.navigate('Nutrition')}>Add Food</Button>
          </Card.Actions>
        </Card>

        {/* Macro Nutrients Card */}
        <Card style={[styles.card, { backgroundColor: theme.colors.surface, marginTop: 10 }]}>
          <Card.Title
            title="Macro Nutrients"
            left={(props) => <Icon {...props} name="nutrition" size={30} color={theme.colors.primary} />}
          />
          <Card.Content>
            <Text style={[styles.cardText, { color: theme.colors.text }]}>
              Protein: 120g
            </Text>
            <ProgressBar
              progress={120 / 200} // Example: 200g/day goal
              color="#8BC34A"
              style={styles.progressBar}
            />
            <Text style={[styles.cardText, { color: theme.colors.text }]}>
              Carbs: 250g
            </Text>
            <ProgressBar
              progress={250 / 300} // Example: 300g/day goal
              color="#03A9F4"
              style={styles.progressBar}
            />
            <Text style={[styles.cardText, { color: theme.colors.text }]}>
              Fat: 70g
            </Text>
            <ProgressBar
              progress={70 / 100} // Example: 100g/day goal
              color="#FF9800"
              style={styles.progressBar}
            />
          </Card.Content>
        </Card>

        {/* Steps Tracker Card */}
        <Card style={[styles.card, { backgroundColor: theme.colors.surface, marginTop: 10 }]}>
          <Card.Title
            title="Steps Tracker"
            left={(props) => <Icon {...props} name="walk" size={30} color={theme.colors.primary} />}
          />
          <Card.Content>
            <Text style={[styles.cardText, { color: theme.colors.text }]}>
              Steps Taken: {steps}
            </Text>
            <ProgressBar
              progress={steps / dailyStepGoal}
              color={theme.colors.primary}
              style={styles.progressBar}
            />
            <Text style={[styles.cardText, { color: theme.colors.text }]}>
              Steps Remaining: {dailyStepGoal - steps}
            </Text>
          </Card.Content>
          <Card.Actions>
            <Button onPress={() => navigation.navigate('Steps')}>View Steps</Button>
          </Card.Actions>
        </Card>

        {/* Exercise Tracker Card */}
        <Card style={[styles.card, { backgroundColor: theme.colors.surface, marginTop: 10 }]}>
          <Card.Title
            title="Exercise Tracker"
            left={(props) => <Icon {...props} name="dumbbell" size={30} color={theme.colors.primary} />}
          />
          <Card.Content>
            {exercises.map((exercise) => (
              <View key={exercise.id} style={styles.exerciseItem}>
                <Text style={[styles.cardText, { color: theme.colors.text }]}>
                  {exercise.name} - {exercise.duration}
                </Text>
              </View>
            ))}
          </Card.Content>
          <Card.Actions>
            <Button onPress={() => navigation.navigate('Exercises')}>Add Exercise</Button>
          </Card.Actions>
        </Card>

        {/* Friends Overview Card */}
        <Card style={[styles.card, { backgroundColor: theme.colors.surface, marginTop: 10 }]}>
          <Card.Title
            title="Friends"
            left={(props) => <Icon {...props} name="account-group" size={30} color={theme.colors.primary} />}
          />
          <Card.Content>
            {friends.map((friend) => (
              <View key={friend.id} style={styles.friendItem}>
                <Text style={[styles.cardText, { color: theme.colors.text }]}>
                  {friend.name}
                </Text>
                <ProgressBar
                  progress={friend.progress / 100}
                  color="#6200EE"
                  style={styles.progressBar}
                />
                <Text style={[styles.cardText, { color: theme.colors.text }]}>
                  Progress: {friend.progress}%
                </Text>
              </View>
            ))}
          </Card.Content>
          <Card.Actions>
            <Button onPress={() => navigation.navigate('Friends')}>View Friends</Button>
          </Card.Actions>
        </Card>

        {/* Menu Items */}
        <View style={styles.menuContainer}>
          {menuItems.map((item, index) => (
            <TouchableOpacity
              key={index}
              style={[
                styles.menuItem,
                { backgroundColor: theme.colors.surface },
              ]}
              onPress={item.onPress}
              accessibilityLabel={`Navigate to ${item.title}`}
              accessibilityRole="button"
            >
              <Icon
                name={item.icon}
                size={30}
                color={theme.colors.primary}
              />
              <Text
                style={[
                  styles.menuText,
                  { color: theme.colors.text },
                ]}
              >
                {item.title}
              </Text>
            </TouchableOpacity>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  container: {
    flexGrow: 1,
    padding: 20,
    paddingBottom: 40,
    // backgroundColor is handled by SafeAreaView
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
    // color is handled dynamically
  },
  card: {
    borderRadius: 10,
    elevation: 3, // For Android shadow
    shadowColor: '#000', // For iOS shadow
    shadowOffset: { width: 0, height: 2 }, // For iOS shadow
    shadowOpacity: 0.1, // For iOS shadow
    shadowRadius: 5, // For iOS shadow
  },
  cardText: {
    fontSize: 16,
    marginBottom: 5,
    // color is handled dynamically
  },
  progressBar: {
    height: 10,
    borderRadius: 5,
    marginVertical: 10,
  },
  exerciseItem: {
    marginBottom: 10,
  },
  friendItem: {
    marginBottom: 15,
  },
  menuContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    marginTop: 30,
  },
  menuItem: {
    width: '45%',
    borderRadius: 10,
    padding: 20,
    marginBottom: 20,
    alignItems: 'center',
    justifyContent: 'center',
    // Shadow for iOS
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 5,
    // Elevation for Android
    elevation: 3,
  },
  menuText: {
    marginTop: 10,
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
    // color is handled dynamically
  },
});

export default HomeScreen;