update config react native paper

index.js

@@ -1,25 +1,69 @@
-/**
+import React from 'react';
- * @format
+import { AppRegistry, StatusBar, View, StyleSheet, useColorScheme } from 'react-native';
- */
+import { Provider, useSelector } from 'react-redux';
-
+import { PersistGate } from 'redux-persist/integration/react';
-import { AppRegistry } from 'react-native';
+import { PaperProvider, MD3DarkTheme, MD3LightTheme } from 'react-native-paper';
 import App from './src/App';
 import { name as appName } from './app.json';
-import { LogBox } from 'react-native';
+import { persistor, store } from './src/appredux/store';
-import { PaperProvider, useTheme } from 'react-native-paper';
+
+const Main = () => {
+    const systemTheme = useColorScheme();
+    const { theme, useSystemTheme } = useSelector(state => state.themeReducer);
+
+    const customColors = {
+        blue: '#3876BF',
+        semiBlue: '#DCECFF',
+        beanRed: '#EF6262',
+        semiRed: '#FFC5C3',
+        semiYellow: '#FFE7A3',
+        orange: '#FAA300',
+        green: '#17C13E',
+        semigreen: '#E3F8E8',
+        black: '#333333',
+        mistBlue: '#667085',
+        amethystSmoke: '#9A99AB',
+        mercury: '#E4E4E7',
+        catskillWhite: '#F2F4F6',
+        white: '#F9F9F9',
+        pureWhite: '#FFFFFF',
+    };
 
-LogBox.ignoreLogs(['Warning: Failed prop type: Invalid prop `role`']); // Ignore log notification by message
+    const lightTheme = {
-LogBox.ignoreAllLogs();
+        ...MD3LightTheme,
+        colors: {
+            ...MD3LightTheme.colors,
+            ...customColors,
+            background: customColors.white,
+            text: customColors.black,
+        },
+    };
 
+    const darkTheme = {
+        ...MD3DarkTheme,
+        colors: {
+            ...MD3DarkTheme.colors,
+            ...customColors,
+            background: customColors.black,
+            text: customColors.white,
+        },
+    };
 
+    const appliedTheme = useSystemTheme ? (systemTheme === 'dark' ? darkTheme : lightTheme) : (theme === 'dark' ? darkTheme : lightTheme);
 
-export default function Main() {
     return (
-        <PaperProvider>
+        <PaperProvider theme={appliedTheme}>
             <App />
         </PaperProvider>
     );
-}
+};
 
+const AppWrapper = () => (
+    <Provider store={store}>
+        <PersistGate loading={null} persistor={persistor}>
+            <Main />
+        </PersistGate>
+    </Provider>
+);
 
-AppRegistry.registerComponent(appName, () => App); 
+AppRegistry.registerComponent(appName, () => AppWrapper);

src/App.js

@@ -1,23 +1,24 @@
 import React from 'react';
-
+import { StyleSheet, View, ActivityIndicator } from 'react-native';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
-import { StyleSheet, View } from 'react-native';
+import { store, persistor } from './appredux/store';
-import { ActivityIndicator } from 'react-native-paper';
+import AppRoutes from './navigation/AppRoutes';
-import { persistor, store } from './appredux/store';
-import AppRoutes from './navigation/AppRoutes'
 import Toast from 'react-native-toast-message';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { colors } from '../src/utils/color'
+import { colors } from '../src/utils/color';
 
 const App = () => {
 	return (
 		<Provider store={store}>
-			<PersistGate loading={
+			<PersistGate
+				loading={
 					<View style={styles.container}>
 						<ActivityIndicator size='large' style={{ backgroundColor: colors.pureWhite }} animating={true} color={colors.blue} />
 					</View>
-			} persistor={persistor}>
+				}
+				persistor={persistor}
+			>
 				<GestureHandlerRootView style={{ flex: 1 }}>
 					<AppRoutes />
 					<Toast position='bottom' visibilityTime={5000} />
@@ -27,7 +28,6 @@ const App = () => {
 	);
 };
 
-
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,