I am trying to develop my first proper React-Native app and I’m having trouble straight out the gate. I am trying to use a few different imported Navigation libraries (BottomTabNavigator, NativeStackNavigator, Stack.Screen, etc.).
I am getting an error when I run the app on Expo-Go saying something like “Error: Got an invalid value for ‘component’ prop for the screen ‘ManageExpense’. It must be a valid React Component.”
So far a I have App.js, and 3 screens, AllExpenses.js, ManageExpense.js, and RecentExpenses.js.
I’ll post them in that order below.
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
//importing custom components
import ManageExpense from './screens/ManageExpense';
import RecentExpenses from './screens/RecentExpenses';
import AllExpenses from './screens/AllExpenses';
const Stack = createNativeStackNavigator();// this stack will create an object that gives access to 2 components (nav, register screens): https://reactnavigation.org/docs/native-stack-navigator
const BottomTabs = createBottomTabNavigator(); // allows bottom tab navigation: npm install @react-navigation/bottom-tabs
//this function handles the bottom tab navigator
function ExpensesOverview() {
return (
<BottomTabs.Navigator>
<BottomTabs.Screen name="RecentExpenses" component={RecentExpenses} />
<BottomTabs.Screen name="AllExpenses" component={AllExpenses} />
</BottomTabs.Navigator>
);
}
export default function App() {
return (
<>
<StatusBar style="auto" />
{/* setting up navigation */}
<NavigationContainer>
{/* StackNavigator allows me to dynamically load the tabs options based on which screen is selected*/}
<Stack.Navigator>
{/* below uses the custom function above to display both options in one stack.screen */}
<Stack.Screen name="ExpensesOverview" component={ExpensesOverview} />
<Stack.Screen name="ManageExpense" component={ManageExpense} />
</Stack.Navigator>
</NavigationContainer>
</>
);
}
import React from 'react';
import { Text } from 'react-native';
export default function AllExpenses() {
return <Text>AllExpenses Screen</Text>
}
import React from 'react';
import { Text } from 'react-native';
export default function ManageExpense() {
return <Text>ManageExpense Screen</Text>
}
import React from 'react';
import { Text } from 'react-native';
export default function RecentExpenses() {
return <Text>RecentExpenses Screen</Text>
}
I’m trying to get the imported navigation components to work properly. I really can’t spot where I’m going wrong I’ve been looking at it for a while and even ChatGPT can’t seem to spot it… Any help would be appreciated. Thanks.