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 }) => {
@@ -43,9 +31,7 @@ let Feed = ({ navigation, route }) => {
 
 
     return (
-        <PaperProvider settings={{
+
-            icon: props => <MaterialIcons {...props} />,
-        }} theme={theme}>
         <SafeAreaView style={styles.container}>
             <View>
                 <FlatList
@@ -61,7 +47,6 @@ let Feed = ({ navigation, route }) => {
             </View>
             <StatusBar style="auto" />
         </SafeAreaView>
-        </PaperProvider>
     );
 }