Notifications view improvement and some cleaning

App.js

@@ -197,6 +197,7 @@ export default function App() {
             icon: props => <MaterialIcons {...props} />,
         }} theme={theme}>
             <NavigationContainer>
+                <StatusBar style="dark" translucent={false} />
                 <Stack.Navigator>
                     <Stack.Screen
                         name="MainNavigation"

Views/NotificationsView.js

@@ -1,9 +1,8 @@
 import { StatusBar } from 'expo-status-bar';
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { View, Text, StyleSheet, SafeAreaView, FlatList } from 'react-native';
 import { Card } from 'react-native-paper';
-import API from '../API.js';
+import SinglePost from '../components/SinglePostComponent';
-import Post from '../components/Post.js';
 import Moment from 'moment';
 import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
@@ -22,6 +21,7 @@ let NotificationsView = ({ navigation, route }) => {
                     <Text style={{ fontWeight: 'normal', fontSize: 12 }}>
                         {" " + Moment(item.ts).fromNow()}
                     </Text>
+                    <SinglePost postId={item.postid} />
                 </Card.Content>
             </Card>
         )

Views/Search.js

@@ -1,10 +1,8 @@
 import React, { useEffect } from "react";
 import { Searchbar } from 'react-native-paper';
-import { View, ScrollView, StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import { StyleSheet, SafeAreaView, FlatList } from 'react-native';
 import API from "../API";
-import UserName from "../components/UserName";
 import ProfileCard from "../components/ProfileCard";
-import ProfileSmallHeader from '../components/ProfileSmallHeader.js'
 
 const Search = () => {
     const [searchQuery, setSearchQuery] = React.useState('');

Views/SinglePost.js

@@ -1,29 +1,9 @@
-import { StatusBar } from 'expo-status-bar';
+import React from 'react';
-import React, { useState, useEffect } from 'react';
+import SinglePostComponent from '../components/SinglePostComponent';
-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 () => {
+    return <SinglePostComponent postId={route.params.postid} />;
-        if (route.params.postid)
-            setPost(await API.getPost(route.params.postid));
-    }, [route]);
-    return (post._id ? (
-        <ScrollView>
-        <Post post={post}/>
-        </ScrollView>
-    ) : null);
 };
 
 export default SinglePost;
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        backgroundColor: "#edf2f7",
-    },
-});

components/SinglePostComponent.js

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+import { ScrollView } from 'react-native';
+import API from './../API.js';
+import Post from './Post.js';
+
+let SinglePostComponent = ({ postId }) => {
+    let [post, setPost] = useState({});
+    useEffect(() => {
+        let subscribed = true;
+        let getData = async ()=>{
+            if (postId){
+                let post = await API.getPost(postId);
+                if(subscribed) setPost(post);
+            }
+        }
+        getData();
+        return () => {
+            subscribed = false;
+        }
+    }, [postId]);
+    return (post._id ? (
+        <ScrollView>
+        <Post post={post}/>
+        </ScrollView>
+    ) : null);
+};
+
+export default React.memo(SinglePostComponent);

components/UserName.js

@@ -37,7 +37,7 @@ let UserName = ({ profileid, hideIcon }) => {
             if (subscribed)
                 setProfile(p);
             storeName(profileid, p);
-            console.log("Fetching Name:" + p?.profile?.firstName);
+            //console.log("Fetching Name:" + p?.profile?.firstName);
         }
         getData();
         return () => {