Fix white flash on dark mode

cmgustavo · Sep 12, 2024 · 8b3a2f6 · 8b3a2f6
1 parent 05ddfc6
commit 8b3a2f6
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 40 deletions.
diff --git a/ios/WorkNotes/Info.plist b/ios/WorkNotes/Info.plist
@@ -26,14 +26,35 @@
 	<true/>
 	<key>NSAppTransportSecurity</key>
 	<dict>
-	  <!-- Do not change NSAllowsArbitraryLoads to true, or you will risk app rejection! -->
 		<key>NSAllowsArbitraryLoads</key>
 		<false/>
 		<key>NSAllowsLocalNetworking</key>
 		<true/>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
+	<key>UIAppFonts</key>
+	<array>
+		<string>AntDesign.ttf</string>
+		<string>Entypo.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>Feather.ttf</string>
+		<string>FontAwesome.ttf</string>
+		<string>FontAwesome5_Brands.ttf</string>
+		<string>FontAwesome5_Regular.ttf</string>
+		<string>FontAwesome5_Solid.ttf</string>
+		<string>FontAwesome6_Brands.ttf</string>
+		<string>FontAwesome6_Regular.ttf</string>
+		<string>FontAwesome6_Solid.ttf</string>
+		<string>Foundation.ttf</string>
+		<string>Ionicons.ttf</string>
+		<string>MaterialIcons.ttf</string>
+		<string>MaterialCommunityIcons.ttf</string>
+		<string>SimpleLineIcons.ttf</string>
+		<string>Octicons.ttf</string>
+		<string>Zocial.ttf</string>
+		<string>Fontisto.ttf</string>
+	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -48,27 +69,5 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-  <key>UIAppFonts</key>
-  <array>
-    <string>AntDesign.ttf</string>
-    <string>Entypo.ttf</string>
-    <string>EvilIcons.ttf</string>
-    <string>Feather.ttf</string>
-    <string>FontAwesome.ttf</string>
-    <string>FontAwesome5_Brands.ttf</string>
-    <string>FontAwesome5_Regular.ttf</string>
-    <string>FontAwesome5_Solid.ttf</string>
-    <string>FontAwesome6_Brands.ttf</string>
-    <string>FontAwesome6_Regular.ttf</string>
-    <string>FontAwesome6_Solid.ttf</string>
-    <string>Foundation.ttf</string>
-    <string>Ionicons.ttf</string>
-    <string>MaterialIcons.ttf</string>
-    <string>MaterialCommunityIcons.ttf</string>
-    <string>SimpleLineIcons.ttf</string>
-    <string>Octicons.ttf</string>
-    <string>Zocial.ttf</string>
-    <string>Fontisto.ttf</string>
-  </array>
 </dict>
 </plist>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,4 @@
 import React, {useEffect} from 'react';
-import {SafeAreaProvider} from 'react-native-safe-area-context';
-
 import {useAppDispatch} from './store';
 import {initializeApp} from './store/app';
 import MainNavigation from './components/main-navigation';
@@ -15,11 +13,9 @@ const App = () => {
   }, []);
 
   return (
-    <SafeAreaProvider>
-      <PreferencesProvider>
-        <MainNavigation />
-      </PreferencesProvider>
-    </SafeAreaProvider>
+    <PreferencesProvider>
+      <MainNavigation />
+    </PreferencesProvider>
   );
 };
 

diff --git a/src/context/PreferencesContext.tsx b/src/context/PreferencesContext.tsx
@@ -1,11 +1,12 @@
 import React, {createContext, useState, useEffect, useContext} from 'react';
-import {useColorScheme, ColorSchemeName} from 'react-native';
+import {useColorScheme, ColorSchemeName, StatusBar} from 'react-native';
 import {useAppDispatch, useAppSelector, RootState} from '../store';
 import {setColorScheme} from '../store/app/app.actions';
 import {PaperProvider} from 'react-native-paper';
 import {NavigationContainer} from '@react-navigation/native';
 import CombinedDefaultTheme from '../themes/light';
 import CombinedDarkTheme from '../themes/dark';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
 
 // Define the type for your context
 type PreferencesContextType = {
@@ -48,12 +49,20 @@ export const PreferencesProvider = ({
   };
 
   return (
-    <PreferencesContext.Provider
-      value={{colorTheme, setColorTheme: handleSetColorTheme}}>
-      <PaperProvider theme={appTheme}>
-        <NavigationContainer theme={appTheme}>{children}</NavigationContainer>
-      </PaperProvider>
-    </PreferencesContext.Provider>
+    <SafeAreaProvider style={{backgroundColor: appTheme.colors.background}}>
+      <StatusBar
+        animated={true}
+        barStyle={colorTheme === 'dark' ? 'light-content' : 'dark-content'}
+        backgroundColor={'transparent'}
+        translucent={true}
+      />
+      <PreferencesContext.Provider
+        value={{colorTheme, setColorTheme: handleSetColorTheme}}>
+        <PaperProvider theme={appTheme}>
+          <NavigationContainer theme={appTheme}>{children}</NavigationContainer>
+        </PaperProvider>
+      </PreferencesContext.Provider>
+    </SafeAreaProvider>
   );
 };
 

diff --git a/src/screens/home.tsx b/src/screens/home.tsx
@@ -1,7 +1,12 @@
 import React, {useLayoutEffect, useEffect} from 'react';
 import {View} from 'react-native';
-import {useTheme, FAB, ActivityIndicator, IconButton} from 'react-native-paper';
-import Icon from 'react-native-vector-icons/FontAwesome';
+import {
+  useTheme,
+  FAB,
+  Text,
+  ActivityIndicator,
+  IconButton,
+} from 'react-native-paper';
 
 import {useAppDispatch, useAppSelector, RootState} from '../store';
 import {initializeNotes} from '../store/notes';

diff --git a/src/screens/preferences.tsx b/src/screens/preferences.tsx
@@ -68,7 +68,7 @@ const Preferences = ({route, navigation}) => {
         <List.Subheader>
           <Text variant="titleMedium">About</Text>
         </List.Subheader>
-        <List.Item title="Version" right={props => <Text>0.0.1</Text>} />
+        <List.Item title="Version" right={props => <Text>v0.0.1</Text>} />
         <Divider />
       </List.Section>
     </View>