TabBar Navigator and Proper adding posts and comments

Views/Feed.js

@@ -1,10 +1,9 @@
 import { StatusBar } from 'expo-status-bar';
 import React, { useState, useEffect } from 'react';
-import { View, ScrollView, StyleSheet, SafeAreaView } from 'react-native';
+import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
 import API from './../API.js';
 import Post from './../components/Post.js';
 import { Provider as PaperProvider } from 'react-native-paper';
-import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import NewPost from "./../components/NewPost.js";
 
@@ -18,9 +17,7 @@ let Feed = ({ navigation, route }) => {
         let r = await API.getMe();
         setMeProfile(r);
         if (route.params && route.params.profileid) {
-            API.getPosts(route.params.profileid).then((data) => {
-                setPosts(data);
-            });
+            navigation.navigate('Profile', {profileid: route.params.profileid})
         } else {
             let posts = await API.getPosts();
             setPosts(posts);
@@ -28,6 +25,10 @@ let Feed = ({ navigation, route }) => {
         }
         //console.log(posts)
     }, [route.params]);
+    const renderPost = (({ item }) => {
+        return (<Post post={item} viewer={Me} />);
+    });
+
 
     return (
         <PaperProvider settings={{
@@ -35,17 +36,13 @@ let Feed = ({ navigation, route }) => {
         }}>
             <SafeAreaView style={styles.container}>
                 <View>
-                    <ScrollView>
-                        <NewPost />
-                        {
-                            Posts.map((post, i) => {
-                                return (
-                                    //<Text key={i}>{post.content}</Text>
-                                    <Post post={post} viewer={Me} key={i} />
-                                )
-                            })
-                        }
-                    </ScrollView>
+                    {Posts.length === 0 && <ActivityIndicator />}
+                    <FlatList
+                        data={Posts}
+                        renderItem={renderPost}
+                        keyExtractor={item => item._id || item.createdAt}
+                        ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
+                    />
                 </View>
                 <StatusBar style="auto" />
             </SafeAreaView>

Views/Profile.js

@@ -0,0 +1,61 @@
+import { StatusBar } from 'expo-status-bar';
+import React, { useState, useEffect } from 'react';
+import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
+import API from './../API.js';
+import Post from './../components/Post.js';
+import { Provider as PaperProvider } from 'react-native-paper';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import NewPost from "./../components/NewPost.js";
+
+
+
+let Profile = ({ 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) {
+            API.getPosts(route.params.profileid).then((data) => {
+                setPosts(data);
+            });
+        } else {
+            navigation.navigate('Feed')
+        }
+    }, [route.params]);
+    const renderPost = (({ item }) => {
+        return (<Post post={item} viewer={Me} />);
+    });
+
+    return (
+        <PaperProvider settings={{
+            icon: props => <MaterialIcons {...props} />,
+        }}>
+            <SafeAreaView style={styles.container}>
+                <View>
+                    {Posts.length === 0 && <ActivityIndicator />}
+                    {Posts.length !== 0 &&
+                        <FlatList
+                            data={Posts}
+                            renderItem={renderPost}
+                            keyExtractor={item => item._id || item.createdAt}
+                            ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
+                        />
+                    }
+                </View>
+                <StatusBar style="auto" />
+            </SafeAreaView>
+        </PaperProvider>
+    );
+}
+
+export default Profile;
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        backgroundColor: "#edf2f7",
+    },
+});