From c391d2969e278609ba76fd817624e8093eaa7963 Mon Sep 17 00:00:00 2001
From: farhantock <achmadfarhanmushafa@gmail.com>
Date: Wed, 31 Jul 2024 14:15:09 +0700
Subject: [PATCH] update config react native paper

---
 index.js   | 70 ++++++++++++++++++++++++++++++++++++++++++++----------
 src/App.js | 24 +++++++++----------
 2 files changed, 69 insertions(+), 25 deletions(-)

diff --git a/index.js b/index.js
index b99d497..a5380f3 100644
--- a/index.js
+++ b/index.js
@@ -1,25 +1,69 @@
-/**
- * @format
- */
-
-import { AppRegistry } from 'react-native';
+import React from 'react';
+import { AppRegistry, StatusBar, View, StyleSheet, useColorScheme } from 'react-native';
+import { Provider, useSelector } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+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 { PaperProvider, useTheme } from 'react-native-paper';
+import { persistor, store } from './src/appredux/store';
+
+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
-LogBox.ignoreAllLogs();
+    const lightTheme = {
+        ...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);
diff --git a/src/App.js b/src/App.js
index 36792d7..840ed98 100644
--- a/src/App.js
+++ b/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 { ActivityIndicator } from 'react-native-paper';
-import { persistor, store } from './appredux/store';
-import AppRoutes from './navigation/AppRoutes'
+import { store, persistor } 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={
-				<View style={styles.container}>
-					<ActivityIndicator size='large' style={{ backgroundColor: colors.pureWhite }} animating={true} color={colors.blue} />
-				</View>
-			} persistor={persistor}>
+			<PersistGate
+				loading={
+					<View style={styles.container}>
+						<ActivityIndicator size='large' style={{ backgroundColor: colors.pureWhite }} animating={true} color={colors.blue} />
+					</View>
+				}
+				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,