Changin to material icons

components/NewPost.js

@@ -1,19 +1,45 @@
 import React, { useState } from 'react';
-import { Text, View, TextInput, Button, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import { TextInput, Button } from 'react-native-paper';
 import API from './../API.js';
+import { useNavigation } from '@react-navigation/native';
 
 
-let NewPost = ()=>{
-  let [query, setQuery] = useState('');
+let NewPost = () => {
+    let [postContent, setPostContent] = useState('');
+    const navigation = useNavigation();
 
-  return (
-    <View style={styles.mainView}>
-      
-    </View>
-  );
+    return (
+        <View style={styles.newPost}>
+            <TextInput
+                label="New Post"
+                value={postContent}
+                onChangeText={setPostContent}
+                mode="outlined"
+                multiline={true}
+            />
+            {
+                postContent ? (
+                    <View style={{ flexDirection: "row", justifyContent: 'flex-end' }}>
+                        <Button icon="add-a-photo" mode="outlined"></Button>
+                        <Button icon="send" mode="outlined" onPress={() => {
+                            API.newPost(postContent).then((newPost) => {
+                                console.log(newPost);
+                                setPostContent('')
+                            });
+                        }}>Post</Button>
+                    </View>
+                ) : undefined
+            }
+
+        </View>
+    );
 }
 
 export default NewPost;
 
-const styles = StyleSheet.create ({
+const styles = StyleSheet.create({
+    newPost: {
+        margin: 10
+    }
 });

components/Post.js

@@ -24,10 +24,10 @@ let Post = ({ post, viewer }) => {
                 
             </Card.Content>
             <Card.Actions style={{ flexDirection: "row", flow: 4, justifyContent: 'space-evenly' }}>
-                <Button icon={post.reactions[viewer._id] ? "heart" : "heart-o"} style={{ flow: 1 }} >{Object.keys(post.reactions).length}</Button>
-                <Button icon="comment-o" style={{ flow: 1 }} onPress={()=>{changeshowCommentsB(!showCommentsB)}} >{post.comments.length}</Button>
-                <Button icon="share-square-o" style={{ flow: 1 }} ></Button>
-                <Button icon={!post.bookmarks || !post.bookmarks.includes(viewer._id) ? "bookmark-o" : "bookmark"} style={{ flow: 1 }} ></Button>
+                <Button icon={post.reactions[viewer._id] ? "favorite" : "favorite-border"} style={{ flow: 1 }} >{Object.keys(post.reactions).length}</Button>
+                <Button icon="forum" style={{ flow: 1 }} onPress={()=>{changeshowCommentsB(!showCommentsB)}} >{post.comments.length}</Button>
+                <Button icon="ios-share" style={{ flow: 1 }} ></Button>
+                <Button icon={!post.bookmarks || !post.bookmarks.includes(viewer._id) ? "bookmark-outline" : "bookmark"} style={{ flow: 1 }} ></Button>
             </Card.Actions>
                 {
                     showCommentsB &&