I am familiar with react-native & decided to give it another try. I started by creating the Bottom Navigation. The problem occurred when I made a screen for the first bottom tab, which is supposed to display simple text. But for some reason the text will not show.

App.js:

Here you can see there is nothing special, Just bottom-navigation

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { StatusBar } from 'expo-status-bar';
import RecentExpenses from './screens/RecentExpenses';
import AllExpenses from './screens/AllExpense';
import { NavigationContainer } from '@react-navigation/native';
import ManageExpenses from './screens/ManageExpenses';
import { GlobalStyles } from './constants/style';
import {Ionicons} from '@expo/vector-icons'

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

function ExpensesOverview() {
  console.log('Reached Overview')
  return (
    <BottomTabs.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: GlobalStyles.colors.primary500 },
        headerTintColor: 'white',
        tabBarStyle: { backgroundColor: GlobalStyles.colors.primary500 },
        tabBarActiveTintColor: GlobalStyles.colors.accent500,
      }}
    >
      <BottomTabs.Screen
        name="RecentExpenses"
        component={RecentExpenses}
        options={{
          title: 'Recent Expenses',
          tabBarLabel: 'Recent',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="hourglass" size={size} color={color} />
          ),
        }}
      />
      <BottomTabs.Screen
        name="AllExpenses"
        component={AllExpenses}
        options={{
          title: 'All Expenses',
          tabBarLabel: 'All Expenses',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="calendar" size={size} color={color} />
          ),
        }}
      />
    </BottomTabs.Navigator>
  );
}

export default function App() {
  return (
    <>
      <StatusBar style="auto" />
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="ExpensesOverview"
            component={ExpensesOverview}
            options={{ headerShown: false }}
          />
          <Stack.Screen name="ManageExpense" component={ManageExpenses} />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
}

RecentExpenses.js:

This is the text that is not displaying for some reason

function RecentExpenses() {
    <Text>Hello </Text>

}
export default RecentExpenses;

style.js:

This file is actually irrelevant but ill put it here anyway just incase

export const GlobalStyles = {
    colors: {
      primary50: '#e4d9fd',
      primary100: '#c6affc',
      primary200: '#a281f0',
      primary400: '#5721d4',
      primary500: '#3e04c3',
      primary700: '#2d0689',
      primary800: '#200364',
      accent500: '#f7bc0c',
      error50: '#fcc4e4',
      error500: '#9b095c',
      gray500: '#39324a',
      gray700: '#221c30',
    },
};

Some help will be greatly appreciated!