Refactor native paper provider

App.js

@@ -1,20 +1,27 @@
 import { StatusBar } from 'expo-status-bar';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
-import { StyleSheet, Text, View, TextInput, SafeAreaView } from 'react-native';
-import API from './API.js';
-import LoginForm from './components/Login.js';
-import { Provider as PaperProvider } from 'react-native-paper';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
+import { Provider as PaperProvider, DefaultTheme, } from 'react-native-paper';
+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 { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
+
 
 const Tab = createMaterialBottomTabNavigator();
-
 const Stack = createNativeStackNavigator();
+const theme = {
+    ...DefaultTheme,
+    roundness: 2,
+    colors: {
+        ...DefaultTheme.colors,
+        primary: '#000000',
+        accent: '#0d6efd',
+        background: "#edf2f7",
+    },
+};
 
 const MainNavigation = () => {
     return (
@@ -46,9 +53,16 @@ const MainNavigation = () => {
 
 export default function App() {
     return (
+        <PaperProvider settings={{
+            icon: props => <MaterialIcons {...props} />,
+        }} theme={theme}>
             <NavigationContainer>
                 <Stack.Navigator>
-                <Stack.Screen name="Home" component={MainNavigation} options={{headerShown:false}} />
+                    <Stack.Screen 
+                        name="Home" 
+                        component={MainNavigation} 
+                        options={{ headerShown: false }} 
+                    />
                     <Stack.Screen
                         name="Profile"
                         component={Profile}
@@ -58,16 +72,6 @@ export default function App() {
                     />
                 </Stack.Navigator>
             </NavigationContainer>
+        </PaperProvider>
     );
 }
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginTop: 25,
-        paddingTop: 10,
-        backgroundColor: "#edf2f7"
-    },
-});

Views/Feed.js

@@ -3,20 +3,8 @@ 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, DefaultTheme, } from 'react-native-paper';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import NewPost from "./../components/NewPost.js";
 
-const theme = {
-    ...DefaultTheme,
-    roundness: 2,
-    colors: {
-      ...DefaultTheme.colors,
-      primary: '#000000',
-      accent: '#0d6efd',
-      background: "#edf2f7",
-    },
-  };
 
 
 let Feed = ({ navigation, route }) => {
@@ -27,7 +15,7 @@ let Feed = ({ navigation, route }) => {
         let r = await API.getMe();
         setMeProfile(r);
         if (route.params && route.params.profileid) {
-            navigation.navigate('Profile', {profileid: route.params.profileid})
+            navigation.navigate('Profile', { profileid: route.params.profileid })
         } else {
             let posts = await API.getPosts();
             setPosts(posts);
@@ -36,16 +24,14 @@ let Feed = ({ navigation, route }) => {
         //console.log(posts)
     }, [route.params]);
     const renderPost = (({ item }) => {
-        if(item.nonOrganicType === 'PopularUsers' || item.nonOrganicType === 'PopularGroups')
+        if (item.nonOrganicType === 'PopularUsers' || item.nonOrganicType === 'PopularGroups')
             return (<></>);
         return (<Post post={item} viewer={Me} />);
     });
 
 
     return (
-        <PaperProvider settings={{
+
-            icon: props => <MaterialIcons {...props} />,
-        }} theme={theme}>
         <SafeAreaView style={styles.container}>
             <View>
                 <FlatList
@@ -54,14 +40,13 @@ let Feed = ({ navigation, route }) => {
                     keyExtractor={item => item._id || item.createdAt}
                     ListHeaderComponent={<NewPost newPostCB={(newPost) => setPosts([newPost, ...Posts])} />}
                     refreshing={Posts.length === 0}
-                        onRefresh={()=>{
+                    onRefresh={() => {
                         API.getPosts().then(setPosts);
                     }}
                 />
             </View>
             <StatusBar style="auto" />
         </SafeAreaView>
-        </PaperProvider>
     );
 }