Reorganize all the navigators

App.js

@@ -3,7 +3,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { Provider as PaperProvider, DefaultTheme, } from 'react-native-paper';
+import { Provider as PaperProvider, DefaultTheme, Appbar, Button, } from 'react-native-paper';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import Login from "./Views/Login.js"
 import Feed from "./Views/Feed.js"
@@ -19,6 +19,7 @@ import API from './API.js';
 import i18n from "./i18nMessages.js";
 import NewPostView from './Views/NewPost.js';
 import { TouchableOpacity, View } from 'react-native';
+import MenuView from './Views/Menu.js';
 
 
 const Tab = createBottomTabNavigator();
@@ -114,10 +115,6 @@ const MainNavigation = () => {
         <Tab.Navigator initialRouteName="Home"
             activeColor="#0d6efd"
             inactiveColor="#FFFFFF"
-            barStyle={{ 
-                backgroundColor: '#000000'
-            }}
-            sceneContainerStyle={{ paddingBottom: 0, paddingTop: 15 }}
         >
             <Tab.Screen
                 name="Feed"
@@ -137,12 +134,12 @@ const MainNavigation = () => {
 
             />
             <Tab.Screen
-                name="Notifications"
-                component={NotificationsView}
+                name="Groups"
+                component={Groups}
                 options={{
-                    tabBarLabel: i18n.t('message.notifications'),
+                    tabBarLabel: i18n.t('message.groups'),
                     tabBarIcon: ({ color }) => (
-                        <MaterialIcons name="notifications" color={color} size={26} />
+                        <MaterialIcons name="groups" color={color} size={26} />
                     ),
                     header: () => { <></> },
                 }}
@@ -178,28 +175,6 @@ const MainNavigation = () => {
                 }}
             />
             <Tab.Screen
-                name="Search"
-                component={Search}
-                options={{
-                    tabBarLabel: i18n.t('message.search'),
-                    tabBarIcon: ({ color }) => (
-                        <MaterialIcons name="search" color={color} size={26} />
-                    ),
-                    header: () => { <></> },
-                }}
-            />
-            <Tab.Screen
-                name="Groups"
-                component={Groups}
-                options={{
-                    tabBarLabel: i18n.t('message.groups'),
-                    tabBarIcon: ({ color }) => (
-                        <MaterialIcons name="groups" color={color} size={26} />
-                    ),
-                    header: () => { <></> },
-                }}
-            />
-            {/*<Tab.Screen
                 name="Courses"
                 component={Courses}
                 options={{
@@ -210,7 +185,18 @@ const MainNavigation = () => {
                     header: () => { <></> },
                 }}
             />
-
+            <Tab.Screen
+                name="Menu"
+                component={MenuView}
+                options={{
+                    tabBarLabel: 'Menu',
+                    tabBarIcon: ({ color }) => (
+                        <MaterialIcons name="menu" color={color} size={26} />
+                    ),
+                    header: () => { <></> },
+                }}
+            />
+            {/*
             <Tab.Screen
                 name="Logout"
                 component={Login}
@@ -222,6 +208,7 @@ const MainNavigation = () => {
                     header: () => { <></> },
                 }}
             />*/}
+            
         </Tab.Navigator>
     )
 }
@@ -232,30 +219,40 @@ export default function App() {
             icon: props => <MaterialIcons {...props} />,
         }} theme={theme}>
             <NavigationContainer>
-                <StatusBar style="dark" translucent={false} />
-                <Stack.Navigator>
+                <StatusBar style="auto" />
+                <Stack.Navigator screenOptions={{
+                    header: (props) => {
+                        return (
+                            <Appbar.Header style={{backgroundColor: '#fff'}}>
+                                {props.navigation.canGoBack() ? <Appbar.BackAction onPress={()=>{
+                                    props.navigation.goBack();
+                                }} /> : <></>}
+                                <Appbar.Content title='EMI Fellowship'/>
+                                <Appbar.Action icon="search" onPress={()=>{props.navigation.navigate("Search")}} />
+                                <Appbar.Action icon="notifications" onPress={()=>{props.navigation.navigate("Notifications")}} />
+                            </Appbar.Header>
+                        )
+                    },
+                }}>
                     <Stack.Screen
                         name="MainNavigation"
                         component={MainNavigation}
-                        options={{
-                            headerShown: true,
-                            tabBarLabel: 'EMI Social',
-                            header: () => { <></> },
-                        }}
                     />
                     <Stack.Screen
                         name="Profile"
                         component={Profile}
-                        options={{
-                            tabBarLabel: i18n.t('message.profile')
-                        }}
                     />
                     <Stack.Screen
                         name="NewPost"
                         component={NewPostView}
-                        options={{
-                            tabBarLabel: i18n.t('message.statusUpdate')
-                        }}
+                    />
+                    <Stack.Screen
+                        name="Search"
+                        component={Search}
+                    />
+                    <Stack.Screen
+                        name="Notifications"
+                        component={NotificationsView}
                     />
                     <Stack.Screen name="SinglePost" component={SinglePost} />
                     <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />