Refactor native paper provider

App.js

@@ -1,73 +1,77 @@
 import { StatusBar } from 'expo-status-bar';
-import React, { useEffect, useState } 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 React from 'react';
 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 (
-            <Tab.Navigator initialRouteName="Home"
-                activeColor="#0d6efd"
-                inactiveColor="#FFFFFF"
-                barStyle={{ backgroundColor: '#000000' }}>
-                <Tab.Screen
-                    name="Feed"
-                    component={Feed}
-                    options={{
-                        tabBarLabel: 'Home',
-                        tabBarIcon: ({ color }) => (
-                            <MaterialIcons name="home" color={color} size={26} />
-                        ),
-                        tabBarBadge: false
-                    }}
-                    listeners={({ navigation, route }) => ({
-                        tabPress: e => {
-                            navigation.navigate('Feed')
-                        },
-                    })}
-                />
-                
-                <Tab.Screen name="Logout" component={Login} />
-            </Tab.Navigator>
+        <Tab.Navigator initialRouteName="Home"
+            activeColor="#0d6efd"
+            inactiveColor="#FFFFFF"
+            barStyle={{ backgroundColor: '#000000' }}>
+            <Tab.Screen
+                name="Feed"
+                component={Feed}
+                options={{
+                    tabBarLabel: 'Home',
+                    tabBarIcon: ({ color }) => (
+                        <MaterialIcons name="home" color={color} size={26} />
+                    ),
+                    tabBarBadge: false
+                }}
+                listeners={({ navigation, route }) => ({
+                    tabPress: e => {
+                        navigation.navigate('Feed')
+                    },
+                })}
+            />
+
+            <Tab.Screen name="Logout" component={Login} />
+        </Tab.Navigator>
     )
 }
 
 export default function App() {
     return (
-        <NavigationContainer>
-            <Stack.Navigator>
-                <Stack.Screen name="Home" component={MainNavigation} options={{headerShown:false}} />
-                <Stack.Screen
-                    name="Profile"
-                    component={Profile}
-                    options={{
-                        tabBarLabel: 'Profile'
-                    }}
-                />
-            </Stack.Navigator>
-        </NavigationContainer>
+        <PaperProvider settings={{
+            icon: props => <MaterialIcons {...props} />,
+        }} theme={theme}>
+            <NavigationContainer>
+                <Stack.Navigator>
+                    <Stack.Screen 
+                        name="Home" 
+                        component={MainNavigation} 
+                        options={{ headerShown: false }} 
+                    />
+                    <Stack.Screen
+                        name="Profile"
+                        component={Profile}
+                        options={{
+                            tabBarLabel: 'Profile'
+                        }}
+                    />
+                </Stack.Navigator>
+            </NavigationContainer>
+        </PaperProvider>
     );
 }
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginTop: 25,
-        paddingTop: 10,
-        backgroundColor: "#edf2f7"
-    },
-});