App.js

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';

import { Ionicons } from '@expo/vector-icons'

import ManageExpense from './screens/ManageExpense';
import RecentExpenses from './screens/RecentExpenses';
import AllExpenses from './screens/AllExpenses';
import { GlobalStyles } from './styles.js';
import IconButton from './components/MyIconButton';
import ExpensesContextProvider from './components/expenses-context';


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


function ExpensesOverview(){
  return(
    <BottomTabs.Navigator screenOptions={({navigation})=>({
      headerStyle: {backgroundColor: GlobalStyles.colors.primary500},
      headerTintColor:'white',
      tabBarStyle:{backgroundColor: GlobalStyles.colors.primary500},
      tabBarActiveTintColor: GlobalStyles.colors.accent500,
      headerRight:({tintColor})=> <IconButton name="add" color={tintColor} size={24} onPress={()=>{
        navigation.navigate('ManageExpense')
      }}/>
    })}> 
      <BottomTabs.Screen name='RecentExpenses' component={RecentExpenses} options={{
        title: ' Recent Expenses',
        tabBarLabel:'Recent',
        tabBarIcon: ({color, size})=> <Ionicons name='hourglass' color={color} size={size} />
      }} />
      <BottomTabs.Screen name='AllExpenses' component={AllExpenses}  options={{
        title: 'All Expenses',
        tabBarLabel:'All Expenses',
        tabBarIcon: ({color, size})=> <Ionicons name='calendar' color={color} size={size} />
      }}  />
    </BottomTabs.Navigator>
  )
}


export default function App() {
  return (
    <>
      <StatusBar style="auto" />
      <ExpensesContextProvider>

    <NavigationContainer>
      <Stack.Navigator screenOptions={{
        headerStyle:{backgroundColor: GlobalStyles.colors.primary500},
        headerTintColor:'white',
      }}>
        <Stack.Screen name='ExpenseOverview ' component={ExpensesOverview } options={{
          headerShown: false,
        }} />
        <Stack.Screen name='ManageExpense' component={ManageExpense} options={{
          presentation: 'modal'
        }} />
      </Stack.Navigator>
    </NavigationContainer>
    </ExpensesContextProvider>

    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});