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 }} />

Views/Feed.js

@@ -71,24 +71,21 @@ let Feed = ({ navigation, route }) => {
 
 
     return (
-
-        <SafeAreaView style={styles.container}>
-            <View>
-                <FlatList
-                    data={Posts}
-                    renderItem={renderPost}
-                    keyExtractor={item => item._id || item.createdAt}
-                    ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
-                    refreshing={Posts.length === 0}
-                    onRefresh={() => {
-                        API.getPosts().then(setPosts);
-                    }}
-                    initialNumToRender={3}
-                    maxToRenderPerBatch={3}
-                    removeClippedSubviews={true}
-                />
-            </View>
-            <StatusBar style="auto" />
+        <SafeAreaView>
+            <FlatList
+                data={Posts}
+                renderItem={renderPost}
+                keyExtractor={item => item._id || item.createdAt}
+                //ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
+                refreshing={Posts.length === 0}
+                onRefresh={() => {
+                    API.getPosts().then(setPosts);
+                }}
+                initialNumToRender={3}
+                maxToRenderPerBatch={3}
+                removeClippedSubviews={true}
+                style={styles.container}
+            />
         </SafeAreaView>
     );
 }
@@ -97,7 +94,6 @@ export default Feed;
 
 const styles = StyleSheet.create({
     container: {
-        flex: 1,
         backgroundColor: "#edf2f7",
     },
 });

Views/Menu.js

@@ -0,0 +1,43 @@
+import React from "react";
+import { View } from "react-native";
+import { Text, List, RadioButton } from "react-native-paper";
+import { SafeAreaView } from "react-native-safe-area-context";
+import i18n from "../i18nMessages.js";
+import Moment from 'moment';
+
+
+let MenuView = ()=>{
+    const [value, setValue] = React.useState('es');
+
+    React.useEffect(()=>{
+        i18n.locale = value;
+        Moment.updateLocale(i18n.locale);
+    }, [value])
+    
+    return (
+        <View>
+            <List.Section title="Settings">
+                <List.Accordion
+                    title="User Actions"
+                    left={props => <List.Icon {...props} icon="person" />}
+                    expanded={true}
+                >
+                    <List.Item title="Sign out" left={props => <List.Icon {...props} icon="logout" />}  />
+                </List.Accordion>
+                <List.Item title="About" left={props => <List.Icon {...props} icon="more" />} />
+            </List.Section>
+            <RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value}>
+                <View>
+                    <Text>Español</Text>
+                    <RadioButton value="es" />
+                </View>
+                <View>
+                    <Text>English</Text>
+                    <RadioButton value="en" />
+                </View>
+            </RadioButton.Group>
+        </View>
+    )
+}
+
+export default MenuView;