Merge pull request #76 from alrescha79-cmd/fix/ui-improvement

fix(ui): improve pull-to-refresh and splash screen timing

Author: alrescha79-cmd

app.config.ts

@@ -25,7 +25,7 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
     ...config,
     name: 'Huawei Manager',
     slug: 'hm-mobile',
-    version: '1.1.05',
+    version: '1.1.07',
     orientation: 'portrait',
     icon: './assets/logo.png',
     userInterfaceStyle: 'automatic',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hm-mobile",
-  "version": "1.1.05",
+  "version": "1.1.07",
   "main": "index.js",
   "scripts": {
     "start": "expo start",

src/app/(tabs)/home.tsx

@@ -774,10 +774,12 @@ export default function HomeScreen() {
             <RefreshControl
               refreshing={isRefreshing}
               onRefresh={handleRefresh}
-              tintColor={isDark ? '#FFFFFF' : 'transparent'}
-              colors={isDark ? ['#FFFFFF'] : ['transparent']}
+              // Hide native spinner completely - use ModernRefreshIndicator instead
+              tintColor="transparent"
+              colors={['transparent']}
               progressBackgroundColor="transparent"
-              progressViewOffset={50}
+              progressViewOffset={-1000}
+              style={{ backgroundColor: 'transparent' }}
             />
           }
         >

src/app/(tabs)/sms.tsx

@@ -392,10 +392,12 @@ export default function SMSScreen() {
               <RefreshControl
                 refreshing={isRefreshing}
                 onRefresh={handleRefresh}
-                tintColor={isDark ? '#FFFFFF' : 'transparent'}
-                colors={isDark ? ['#FFFFFF'] : ['transparent']}
+                // Hide native spinner completely - use ModernRefreshIndicator instead
+                tintColor="transparent"
+                colors={['transparent']}
                 progressBackgroundColor="transparent"
-                progressViewOffset={50}
+                progressViewOffset={-1000}
+                style={{ backgroundColor: 'transparent' }}
               />
             }
           >

src/app/(tabs)/wifi.tsx

@@ -679,10 +679,12 @@ export default function WiFiScreen() {
             <RefreshControl
               refreshing={isRefreshing}
               onRefresh={handleRefresh}
-              tintColor={isDark ? '#FFFFFF' : 'transparent'}
-              colors={isDark ? ['#FFFFFF'] : ['transparent']}
+              // Hide native spinner completely - use ModernRefreshIndicator instead
+              tintColor="transparent"
+              colors={['transparent']}
               progressBackgroundColor="transparent"
-              progressViewOffset={50}
+              progressViewOffset={-1000}
+              style={{ backgroundColor: 'transparent' }}
             />
           }
           keyboardShouldPersistTaps="handled"

src/app/_layout.tsx

@@ -75,22 +75,22 @@ export default function RootLayout() {
     const [isRestoringSession, setIsRestoringSession] = useState(false);
     const [authReady, setAuthReady] = useState(false); // Track when auth check is complete
 
-    // Hide splash screen when BOTH fonts loaded AND auth checked
+    // Hide native splash screen when fonts loaded (show AnimatedSplashScreen during login)
     const onLayoutRootView = useCallback(async () => {
-        if (fontsLoaded && authReady) {
-            // Small delay for smoother transition
-            await new Promise(resolve => setTimeout(resolve, 200));
+        if (fontsLoaded) {
+            // Hide native splash immediately when fonts ready
+            // AnimatedSplashScreen will show until auth is complete
             await SplashScreen.hideAsync();
             setAppIsReady(true);
         }
-    }, [fontsLoaded, authReady]);
+    }, [fontsLoaded]);
 
-    // Trigger splash hide when ready
+    // Trigger native splash hide when fonts ready
     useEffect(() => {
-        if (fontsLoaded && authReady) {
+        if (fontsLoaded) {
             onLayoutRootView();
         }
-    }, [fontsLoaded, authReady, onLayoutRootView]);
+    }, [fontsLoaded, onLayoutRootView]);
 
     // Handle Android Navigation Bar Colors
     useEffect(() => {
@@ -384,8 +384,8 @@ export default function RootLayout() {
         }
     }, [isAuthenticated, segments]);
 
-    // Show animated splash screen while loading
-    if (!fontsLoaded || !appIsReady) {
+    // Show animated splash screen while loading fonts or during login
+    if (!fontsLoaded || !authReady) {
         return <AnimatedSplashScreen isLoading={true} />;
     }