BottomTabNavigation

App.js

@@ -9,23 +9,37 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import Login from "./Views/Login.js"
 import Feed from "./Views/Feed.js"
+import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
+
+const Tab = createMaterialBottomTabNavigator();
 
 const Stack = createNativeStackNavigator();
 
 export default function App() {
-    let [isLoggedIn, setIsLoggedIn] = useState(false);
-
-    useEffect(async () => {
-        let r = await API.isLoggedIn();
-        setIsLoggedIn(r);
-    }, []);
-
     return (
         <NavigationContainer>
-            <Stack.Navigator>
+            <Tab.Navigator initialRouteName="Home"
-                <Stack.Screen name="Feed" component={Feed} />
+                activeColor="#f0edf6"
-                <Stack.Screen name="Login" component={Login} />
+                inactiveColor="#3e2465"
-            </Stack.Navigator>
+                barStyle={{ backgroundColor: '#694fad' }}>
+                <Tab.Screen
+                    name="Feed"
+                    component={Feed}
+                    options={{
+                        tabBarLabel: 'Home',
+                        tabBarIcon: ({ color }) => (
+                            <AwesomeIcon name="home" color={color} size={26} />
+                        ),
+                        tabBarBadge: false
+                    }}
+                    listeners={({ navigation, route }) => ({
+                        tabPress: e => {
+                            navigation.navigate('Feed')
+                        },
+                    })}
+                />
+                <Tab.Screen name="Login" component={Login} />
+            </Tab.Navigator>
         </NavigationContainer>
     );
 }

Views/Feed.js

@@ -12,15 +12,11 @@ let Feed = ({ navigation, route }) => {
     let [Me, setMeProfile] = useState({});
     let [Posts, setPosts] = useState([]);
     useEffect(async () => {
-        navigation.setOptions({ title: "Loading..." });
+        setPosts([]);
         let r = await API.getMe();
         setMeProfile(r);
         if (route.params && route.params.profileid) {
-            setPosts([]);
             API.getPosts(route.params.profileid).then((data) => {
-                API.getUserProfile(route.params.profileid).then((profile)=>{
-                    navigation.setOptions({ title: profile.profile.firstName + " " + profile.profile.lastName });
-                });
                 setPosts(data);
             });
         } else {

Views/Login.js

@@ -3,6 +3,8 @@ import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, View, TextInput, SafeAreaView } from 'react-native';
 import API from './../API.js';
 import LoginForm from './../components/Login.js';
+import { Provider as PaperProvider } from 'react-native-paper';
+import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
 
 export default function App({navigation, route}) {
     useEffect(async () => {

components/NewPost.js

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { Text, View, TextInput, Button, StyleSheet } from 'react-native';
+import API from './../API.js';
+
+
+let NewPost = ()=>{
+  let [query, setQuery] = useState('');
+
+  return (
+    <View style={styles.mainView}>
+      
+    </View>
+  );
+}
+
+export default NewPost;
+
+const styles = StyleSheet.create ({
+});

package-lock.json

@@ -2051,6 +2051,14 @@
       "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.1.tgz",
       "integrity": "sha512-jIDRJaG8YPIinl4hZXJu/W3TnhDe8hLYmGSEdL1mxZ1aoNMiApCBYkgTy11oq0EfK/koZd3DPSkJNbzBAQmPJw=="
     },
+    "@react-navigation/material-bottom-tabs": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@react-navigation/material-bottom-tabs/-/material-bottom-tabs-6.1.1.tgz",
+      "integrity": "sha512-2qgBdiHOXMrjFszdXz6loNrjhPjdtunarbpsP6mzy2Dk8jZ5vL3G6v3sKiZ+eXUomw1ztulxuUfMnRqpy83wkQ==",
+      "requires": {
+        "@react-navigation/elements": "^1.3.1"
+      }
+    },
     "@react-navigation/native": {
       "version": "6.0.8",
       "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.0.8.tgz",

package.json

@@ -10,6 +10,7 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@react-navigation/material-bottom-tabs": "^6.1.1",
     "@react-navigation/native": "^6.0.8",
     "@react-navigation/native-stack": "^6.5.0",
     "expo": "~43.0.2",