From 37c1d39c41377cdd08224857d75c57418192d1c6 Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammarahmed6506@gmail.com>
Date: Thu, 12 Sep 2024 15:05:52 +0500
Subject: [PATCH] mobile: fix statusbar flicker on launch app

---
 apps/mobile/app/hooks/use-app-events.tsx  |  5 +++-
 apps/mobile/app/navigation/tabs-holder.js | 20 ++++++----------
 apps/mobile/app/stores/use-theme-store.ts | 28 ++++++++++++++++++++++-
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/apps/mobile/app/hooks/use-app-events.tsx b/apps/mobile/app/hooks/use-app-events.tsx
index e6399334b..5b3968ef1 100644
--- a/apps/mobile/app/hooks/use-app-events.tsx
+++ b/apps/mobile/app/hooks/use-app-events.tsx
@@ -96,6 +96,7 @@ import { getGithubVersion } from "../utils/github-version";
 import { tabBarRef } from "../utils/global-refs";
 import { sleep } from "../utils/time";
 import { NotesnookModule } from "../utils/notesnook-module";
+import { changeSystemBarColors } from "../stores/use-theme-store";
 
 const onCheckSyncStatus = async (type: SyncStatusEvent) => {
   const { disableSync, disableAutoSync } = SettingsService.get();
@@ -355,7 +356,9 @@ const IsDatabaseMigrationRequired = () => {
 const initializeDatabase = async (password?: string) => {
   if (useUserStore.getState().appLocked) return;
   if (!db.isInitialized) {
-    RNBootSplash.hide({ fade: true });
+    RNBootSplash.hide({ fade: false });
+    changeSystemBarColors();
+
     DatabaseLogger.info("Initializing database");
     try {
       await setupDatabase(password);
diff --git a/apps/mobile/app/navigation/tabs-holder.js b/apps/mobile/app/navigation/tabs-holder.js
index c937d5dda..fc0040fc3 100644
--- a/apps/mobile/app/navigation/tabs-holder.js
+++ b/apps/mobile/app/navigation/tabs-holder.js
@@ -24,7 +24,6 @@ import {
 } from "@sayem314/react-native-keep-awake";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Dimensions, Platform, StatusBar, View } from "react-native";
-import changeNavigationBarColor from "react-native-navigation-bar-color";
 import {
   addOrientationListener,
   addSpecificOrientationListener,
@@ -72,6 +71,7 @@ import {
 import { editorRef, tabBarRef } from "../utils/global-refs";
 import { sleep } from "../utils/time";
 import { NavigationStack } from "./navigation-stack";
+import { changeSystemBarColors } from "../stores/use-theme-store";
 
 const _TabsHolder = () => {
   const { colors, isDark } = useThemeColors();
@@ -386,18 +386,12 @@ const _TabsHolder = () => {
     };
   }, []);
 
-  useEffect(() => {
-    function updateSystemBars() {
-      changeNavigationBarColor(colors.primary.background, isDark, true);
-      StatusBar.setBackgroundColor("transparent");
-      StatusBar.setTranslucent(true);
-      StatusBar.setBarStyle(isDark ? "light-content" : "dark-content");
-    }
-    updateSystemBars();
-    setTimeout(() => {
-      updateSystemBars();
-    }, 1000);
-  }, [colors.primary.background, isDark]);
+  // useEffect(() => {
+  //   changeSystemBarColors();
+  //   setTimeout(() => {
+  //     changeSystemBarColors();
+  //   }, 1000);
+  // }, [colors.primary.background, isDark]);
 
   return (
     <View
diff --git a/apps/mobile/app/stores/use-theme-store.ts b/apps/mobile/app/stores/use-theme-store.ts
index 59b4a7102..b3fdd14d3 100644
--- a/apps/mobile/app/stores/use-theme-store.ts
+++ b/apps/mobile/app/stores/use-theme-store.ts
@@ -18,11 +18,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { ThemeDefinition } from "@notesnook/theme";
-import { Appearance } from "react-native";
+import { Appearance, StatusBar } from "react-native";
 import create, { State } from "zustand";
 import SettingsService from "../services/settings";
 import switchTheme from "react-native-theme-switch-animation";
 
+import changeNavigationBarColor from "react-native-navigation-bar-color";
 export interface ThemeStore extends State {
   lightTheme: ThemeDefinition;
   darkTheme: ThemeDefinition;
@@ -32,6 +33,28 @@ export interface ThemeStore extends State {
   setColorScheme: (colorScheme?: "dark" | "light") => void;
 }
 
+export function changeSystemBarColors() {
+  const change = () => {
+    let currTheme =
+      useThemeStore.getState().colorScheme === "dark"
+        ? SettingsService.getProperty("darkTheme")
+        : SettingsService.getProperty("lighTheme");
+
+    const isDark = useThemeStore.getState().colorScheme === "dark";
+    changeNavigationBarColor(
+      currTheme.scopes.base.primary.background,
+      isDark,
+      false
+    );
+    StatusBar.setBackgroundColor("transparent" as any);
+    StatusBar.setTranslucent(true);
+    StatusBar.setBarStyle(isDark ? "light-content" : "dark-content");
+  };
+  change();
+  setTimeout(change, 400);
+  setTimeout(change, 1000);
+}
+
 function switchThemeWithAnimation(fn: () => void) {
   switchTheme({
     switchThemeFunction: fn,
@@ -55,12 +78,14 @@ export const useThemeStore = create<ThemeStore>((set, get) => ({
   setDarkTheme: (darkTheme) => {
     switchThemeWithAnimation(() => {
       set({ darkTheme });
+      changeSystemBarColors();
       SettingsService.setProperty("darkTheme", darkTheme);
     });
   },
   setLightTheme: (lightTheme) => {
     switchThemeWithAnimation(() => {
       set({ lightTheme });
+      changeSystemBarColors();
       SettingsService.setProperty("lighTheme", lightTheme);
     });
   },
@@ -75,6 +100,7 @@ export const useThemeStore = create<ThemeStore>((set, get) => ({
       set({
         colorScheme: nextColorScheme
       });
+      changeSystemBarColors();
       if (!SettingsService.getProperty("useSystemTheme")) {
         SettingsService.set({
           colorScheme: nextColorScheme