Invariant Violation: View config getter callback for component `RecentExpenses` must be a function (received `undefined`)

Question

here i am getting error of improper import of the header file but i had imported it correctly can someone help me to figure it out where i had gone wrong in it. I am generally making an expense tracking app which contain Bottom navigation tab and 3 screens viz. Manage Expenses, All Expenses and Recent Expense

App.js

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import ManageExpense from "../ExpenseTracker/screens/ManageExpense";
import AllExpenses from "../ExpenseTracker/screens/AllExpenses";
import RecentExpenses from "../ExpenseTracker/screens/RecentExpenses";

const Stack = createNativeStackNavigator();
const BottomTabs = createBottomTabNavigator();

function ExpensesOverview() {
  return (
    <BottomTabs.Navigator>
      <BottomTabs.Screen name="RecentExpenses" component={"RecentExpenses"} />
      <BottomTabs.Screen name="AllExpenses" component={"AllExpenses"} />
    </BottomTabs.Navigator>
  );
}
export default function App() {
  return (
    <>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="ExpensesOverview" component={ExpensesOverview}/>
          <Stack.Screen name="ManageExpense" component={ManageExpense} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};

AllExpenses.js

import {Text} from 'react-native';
function AllExpenses(){
    return <Text>All Expense Screen</Text>;
}
export default AllExpenses;

RecentExpenses.js

import {Text} from 'react-native';
function RecentExpenses() {
    return <Text>Recent Expenses Screen</Text>;
}
export default RecentExpenses;

ManageExpenes.js

import {Text} from 'react-native'
function ManageExpense(){
    return <Text>Manage Expense Screen</Text>;
}
export default ManageExpense;

Answer 1

<BottomTabs.Screen name="RecentExpenses" component={"RecentExpenses"} />
<BottomTabs.Screen name="AllExpenses" component={"AllExpenses"} />

You had passed component as a string rather than passing the actual component

Do it like

<BottomTabs.Screen name="RecentExpenses" component={RecentExpenses} />

<BottomTabs.Screen name="AllExpenses" component={AllExpenses} />