fix: theme switching delay and screen animation flickering

App.tsx

@@ -1,9 +1,10 @@
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { Provider as ReactNativePaperProvider } from "react-native-paper";
 import { Provider as ReduxProvider } from "react-redux";
+import { PersistGate } from "redux-persist/integration/react";
 
 import Navigation from "./navigation";
-import { store } from "./redux/store";
+import { store, persistor } from "./redux/store";
 import useCachedResources from "./hooks/useCachedResources";
 
 export default function App() {
@@ -15,9 +16,12 @@ export default function App() {
     return (
       <SafeAreaProvider>
         <ReduxProvider store={store}>
-          <ReactNativePaperProvider>
-            <Navigation />
-          </ReactNativePaperProvider>
+          {/* @ts-ignore */}
+          <PersistGate loading={null} persistor={persistor}>
+            <ReactNativePaperProvider>
+              <Navigation />
+            </ReactNativePaperProvider>
+          </PersistGate>
         </ReduxProvider>
       </SafeAreaProvider>
     );

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "Docu Wallet",
     "slug": "docu-wallet",
-    "version": "1.0.0",
+    "version": "1.0.1",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
     "scheme": "myapp",

hooks/useTheme.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import Colors from "../constants/Colors";
 import { setDarkMode } from "../redux/features/appTheme/appThemeSlice";
@@ -11,8 +11,10 @@ function useTheme() {
   const colorScheme = useColorScheme();
   const dispatch = useAppDispatch();
 
+  const memoizedAppearance = useMemo(() => appearance, [appearance]);
+
   useEffect(() => {
-    if (appearance === "system") {
+    if (memoizedAppearance === "system") {
       const colorTheme = colorScheme === "dark" ? Colors.dark : Colors.light;
       setTheme(colorTheme);
       dispatch(setDarkMode(colorScheme === "dark" ? true : false));
@@ -23,7 +25,7 @@ function useTheme() {
     } else {
       setTheme(Colors.light);
     }
-  }, [isDark, colorScheme, appearance]);
+  }, [isDark, colorScheme, memoizedAppearance]);
 
   return theme;
 }

metro.config.js

@@ -1,4 +1,6 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
-const { getDefaultConfig } = require('expo/metro-config');
+const { getDefaultConfig } = require("expo/metro-config");
 
-module.exports = getDefaultConfig(__dirname);
+const defaultConfig = getDefaultConfig(__dirname);
+defaultConfig.resolver.sourceExts = ["jsx", "js", "ts", "tsx", "mjs"];
+module.exports = defaultConfig;

navigation/index.tsx

@@ -60,7 +60,12 @@ const Stack = createNativeStackNavigator<RootStackParamList>();
 function RootNavigator() {
   return (
     // @ts-ignore
-    <Stack.Navigator>
+    <Stack.Navigator
+      defaultScreenOptions={{
+        animation: "slide_from_bottom",
+        statusBarAnimation: "slide",
+      }}
+    >
       <Stack.Screen
         name="Root"
         component={TopTabNavigator}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "document-keeper",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "start": "expo start --dev-client",
     "android": "expo run:android",
@@ -16,6 +16,7 @@
     "@babel/preset-env": "^7.16.11",
     "@expo/vector-icons": "^12.0.0",
     "@nozbe/watermelondb": "^0.24.0",
+    "@react-native-async-storage/async-storage": "~1.15.0",
     "@react-native-clipboard/clipboard": "^1.8.5",
     "@react-native-material/core": "^1.3.7",
     "@react-navigation/material-top-tabs": "^6.2.1",
@@ -41,7 +42,6 @@
     "react-dom": "17.0.1",
     "react-native": "0.64.3",
     "react-native-blob-util": "^0.15.0",
-    "react-native-mmkv-storage": "^0.7.2",
     "react-native-pager-view": "5.4.9",
     "react-native-paper": "^4.12.0",
     "react-native-pdf": "^6.5.0",
@@ -50,6 +50,8 @@
     "react-native-tab-view": "^3.1.1",
     "react-native-web": "0.17.1",
     "react-redux": "^7.2.8",
+    "redux": "^4.2.0",
+    "redux-persist": "^6.0.0",
     "sharp-cli": "^1.15.0"
   },
   "devDependencies": {

redux/features/appTheme/appThemeSlice.ts

@@ -1,18 +1,10 @@
-import { Appearance as SystemAppearance } from "react-native";
-
 import { createSlice } from "@reduxjs/toolkit";
-import { MMKVLoader } from "react-native-mmkv-storage";
 
 import { AppTheme } from "./types";
 
-const MMKV = new MMKVLoader().initialize();
-const appearanceString = MMKV.getString("appearance");
-
-const { isDark, appearance } = getAppThemeData(appearanceString);
-
 const initialState: AppTheme = {
-  isDark,
-  appearance,
+  isDark: false,
+  appearance: "system",
 };
 
 const appThemeSlice = createSlice({
@@ -22,10 +14,6 @@ const appThemeSlice = createSlice({
     setAppAppearance: (state, action) => {
       state.isDark = action.payload.isDark;
       state.appearance = action.payload.appearance;
-      MMKV.setStringAsync(
-        "appearance",
-        action.payload.appearance as string
-      ).catch(() => {});
     },
     setDarkMode: (state, action) => {
       state.isDark = action.payload as boolean;
@@ -36,26 +24,3 @@ const appThemeSlice = createSlice({
 export const { setAppAppearance, setDarkMode } = appThemeSlice.actions;
 
 export default appThemeSlice.reducer;
-
-function getAppThemeData(appearance: string | null | undefined): AppTheme {
-  switch (appearance) {
-    case "dark":
-      return {
-        isDark: true,
-        appearance: "dark",
-      };
-
-    case "light":
-      return {
-        isDark: false,
-        appearance: "light",
-      };
-
-    default:
-      const colorScheme = SystemAppearance.getColorScheme();
-      return {
-        isDark: colorScheme === "dark" ? true : false,
-        appearance: "system",
-      };
-  }
-}

redux/store.ts

@@ -1,15 +1,30 @@
 import { configureStore, combineReducers } from "@reduxjs/toolkit";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { persistReducer, persistStore } from "redux-persist";
+
 import appThemeReducer from "./features/appTheme/appThemeSlice";
 import addNoteReducer from "./features/addNote/addNoteSlice";
 
-const reducer = combineReducers({
+const persistConfig = {
+  key: "root",
+  storage: AsyncStorage,
+};
+
+const rootReducer = combineReducers({
   appTheme: appThemeReducer,
   addNote: addNoteReducer,
 });
 
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
 export const store = configureStore({
-  reducer: reducer,
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }),
 });
+export const persistor = persistStore(store);
 
 export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;