From b01d437a73cdcddabb8cbe5766d9e49140f4d14d Mon Sep 17 00:00:00 2001
From: aeroreyna <adolforeyna@gmail.com>
Date: Sun, 6 Mar 2022 22:09:01 -0800
Subject: [PATCH] BottomTabNavigation

---
 App.js                | 36 +++++++++++++++++++++++++-----------
 Views/Feed.js         |  6 +-----
 Views/Login.js        |  2 ++
 components/NewPost.js | 19 +++++++++++++++++++
 package-lock.json     |  8 ++++++++
 package.json          |  1 +
 6 files changed, 56 insertions(+), 16 deletions(-)
 create mode 100644 components/NewPost.js

diff --git a/App.js b/App.js
index b384a8a..cbeaada 100644
--- a/App.js
+++ b/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>
-                <Stack.Screen name="Feed" component={Feed} />
-                <Stack.Screen name="Login" component={Login} />
-            </Stack.Navigator>
+            <Tab.Navigator initialRouteName="Home"
+                activeColor="#f0edf6"
+                inactiveColor="#3e2465"
+                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>
     );
 }
diff --git a/Views/Feed.js b/Views/Feed.js
index e1b3371..aabc371 100644
--- a/Views/Feed.js
+++ b/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 {
diff --git a/Views/Login.js b/Views/Login.js
index 0d98acb..7bd5629 100644
--- a/Views/Login.js
+++ b/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 () => {
diff --git a/components/NewPost.js b/components/NewPost.js
new file mode 100644
index 0000000..fad7305
--- /dev/null
+++ b/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 ({
+});
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 93c7773..b635024 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 9f7c034..6d8af52 100644
--- a/package.json
+++ b/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",