NotificationsTab

API.js

@@ -129,6 +129,9 @@ const API = {
         if (userid) return getCall("/post/usr/" + userid);
         return getCall("/post/");
     },
+    getPost(postid) {
+        return getCall("/post/" + postid);
+    },
     deletePost(postid){
         return deleteCall("/post/" + postid);
     },

App.js

@@ -8,6 +8,8 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import Login from "./Views/Login.js"
 import Feed from "./Views/Feed.js"
 import Profile from "./Views/Profile.js"
+import Notifications from './Views/Notifications.js';
+import SinglePost from './Views/SinglePost.js'
 
 
 const Tab = createMaterialBottomTabNavigator();
@@ -45,7 +47,18 @@ const MainNavigation = () => {
                     },
                 })}
             />
-
+            <Tab.Screen 
+                name="Notifications" 
+                component={Notifications} 
+                options={{
+                    tabBarLabel: 'Notifications',
+                    tabBarIcon: ({ color }) => (
+                        <MaterialIcons name="notifications" color={color} size={26} />
+                    ),
+                    tabBarBadge: false
+                }}
+            />
+            
             <Tab.Screen name="Logout" component={Login} />
         </Tab.Navigator>
     )
@@ -70,6 +83,7 @@ export default function App() {
                             tabBarLabel: 'Profile'
                         }}
                     />
+                    <Stack.Screen name="SinglePost" component={SinglePost} />
                 </Stack.Navigator>
             </NavigationContainer>
         </PaperProvider>

Views/Feed.js

@@ -11,7 +11,6 @@ let Feed = ({ navigation, route }) => {
     let [Me, setMeProfile] = useState({});
     let [Posts, setPosts] = useState([]);
     useEffect(async () => {
-        setPosts([]);
         let r = await API.getMe();
         setMeProfile(r);
         if (route.params && route.params.profileid) {
@@ -55,7 +54,6 @@ export default Feed;
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        alignItems: 'center',
         backgroundColor: "#edf2f7",
     },
 });

Views/Notifications.js

@@ -0,0 +1,61 @@
+import { StatusBar } from 'expo-status-bar';
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import { Card } from 'react-native-paper';
+import API from './../API.js';
+import Post from './../components/Post.js';
+
+
+let LoadPost = ({ postid, viewer }) => {
+    let [post, setPost] = useState({});
+    useEffect(async () => {
+        setPost(await API.getPost(postid));
+    }, [postid]);
+    return (post._id ? <Post post={post} viewer={viewer} /> : null);
+};
+
+let Notifications = ({ navigation, route }) => {
+    let [Me, setMeProfile] = useState({});
+    let [notifications, setNotifications] = useState([]);
+    useEffect(async () => {
+        let r = await API.getMe();
+        setMeProfile(r);
+        setNotifications(r.notifications)
+    }, [route.params]);
+    const renderNotification = (({ item }) => {
+        //return (<LoadPost postid={item.postid} viewer={Me} />);
+        const gotToPost = ()=>{
+            navigation.navigate('SinglePost', {postid: item.postid, viewer: Me});
+        };
+        return (
+            <Card style={{margin: 3}} onPress={gotToPost}>
+                <Card.Content>
+                    <Text>{item.body}</Text>
+                </Card.Content>
+            </Card>
+        )
+    });
+
+
+    return (
+        <SafeAreaView style={styles.container}>
+            <View>
+                <FlatList
+                    data={notifications.reverse().slice(0, 10)}
+                    renderItem={renderNotification}
+                    keyExtractor={item => item.ts}
+                />
+            </View>
+            <StatusBar style="auto" />
+        </SafeAreaView>
+    );
+}
+
+export default Notifications;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: "#edf2f7",
+    },
+});

Views/Profile.js

@@ -17,6 +17,9 @@ let Profile = ({ navigation, route }) => {
         let r = await API.getMe();
         setMeProfile(r);
         if (route.params && route.params.profileid) {
+            API.getUserProfile(route.params.profileid).then(({profile}) => {
+                navigation.setOptions({ title: profile.firstName + " " + profile.lastName });
+            });
             API.getPosts(route.params.profileid).then((data) => {
                 setPosts(data);
             });

Views/SinglePost.js

@@ -0,0 +1,29 @@
+import { StatusBar } from 'expo-status-bar';
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet, ScrollView, FlatList } from 'react-native';
+import API from './../API.js';
+import Post from './../components/Post.js';
+
+let SinglePost = ({ route }) => {
+    let [post, setPost] = useState({});
+    console.log(route.params.postid)
+    useEffect(async () => {
+        if (route.params.postid)
+            setPost(await API.getPost(route.params.postid));
+    }, [route]);
+    return (post._id ? (
+        <ScrollView>
+        <Post post={post} viewer={route.params.viewer} />
+        </ScrollView>
+    ) : null);
+};
+
+export default SinglePost;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        backgroundColor: "#edf2f7",
+    },
+});