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
+    }
 });