Hello. I have an error in my react native code. Here is my app.js file: import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import WelcomeScreen from './screens/WelcomeScreen';
import SignUpScreen from './screens/SignUpScreen';
import LoginScreen from './screens/LoginScreen';
import HomeScreen from './screens/HomeScreen'; // Import the new screen

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Welcome" component={WelcomeScreen} />
        <Stack.Screen name="SignUp" component={SignUpScreen} />
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} /> 
      </Stack.Navigator>
      <BottomNavigation />
    </NavigationContainer>
  );
};

export default App;
Here is my Bottomnavigation.js file: import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';
import SettingsScreen from '../screens/SettingsScreen';

const Tab = createBottomTabNavigator();

const BottomNavigation = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = 'home-outline';
          } else if (route.name === 'Profile') {
            iconName = 'person-outline';
          } else if (route.name === 'Settings') {
            iconName = 'settings-outline';
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
};

export default BottomNavigation;
here is my homescreen.js file: import React from 'react';
import { View, Text } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const HomeScreen = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Tab1" component={Screen1} />
      <Tab.Screen name="Tab2" component={Screen2} />
      <Tab.Screen name="Tab3" component={Screen3} />
    </Tab.Navigator>
  );
};

// Example screens for each tab
const Screen1 = () => <View><Text>Tab 1</Text></View>;
const Screen2 = () => <View><Text>Tab 2</Text></View>;
const Screen3 = () => <View><Text>Tab 3</Text></View>;

export default HomeScreen;
Here is my package.json file: {
  "name": "wealthtrackr",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/stack": "^6.3.17",
    "axios": "^1.4.0",
    "expo": "~48.0.18",
    "expo-status-bar": "~1.4.4",
    "firebase": "^9.23.0",
    "os": "^0.1.2",
    "path": "^0.12.7",
    "react": "^18.2.0",
    "react-native": "^0.72.0",
    "react-native-paper": "^5.8.0",
    "react-native-swiper": "^1.6.0",
    "react-native-vector-icons": "^9.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "expo": {
    "name": "wealthtrackr",
    "slug": "wealthtrackr",
    "extra": {
      "API_KEY": "@env:REACT_APP_API_KEY",
      "AUTH_DOMAIN": "@env:REACT_APP_AUTH_DOMAIN",
      "PROJECT_ID": "@env:REACT_APP_PROJECT_ID"
    }
  },
  "private": true
}
Here is my error: ReferenceError: Property 'BottomNavigation' doesn't exist

This error is located at:
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:102:17 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:148:19 in handleException
- ... 27 more stack frames from framework internals

ReferenceError: Property 'BottomNavigation' doesn't exist

This error is located at:
    in App (created by withDevTools(App))
    in withDevTools(App)
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent), js engine: hermes
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:102:17 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:148:19 in handleException
- ... 7 more stack frames from framework internals