feat: add dark theme support for navigation and paper components

Author: Devasy

frontend/App.js

@@ -1,13 +1,16 @@
+import { useColorScheme } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { PaperProvider } from 'react-native-paper';
 import { AuthProvider } from './context/AuthContext';
 import AppNavigator from './navigation/AppNavigator';
-import { paperTheme } from './utils/theme';
+import { paperTheme, paperThemeDark } from './utils/theme';
 
 export default function App() {
+  const scheme = useColorScheme();
+  const theme = scheme === 'dark' ? paperThemeDark : paperTheme;
   return (
     <AuthProvider>
-      <PaperProvider theme={paperTheme}>
+      <PaperProvider theme={theme}>
         <GestureHandlerRootView style={{ flex: 1 }}>
           <AppNavigator />
         </GestureHandlerRootView>

frontend/navigation/AppNavigator.js

@@ -1,8 +1,8 @@
 import { NavigationContainer } from '@react-navigation/native';
 import { useContext } from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { ActivityIndicator, StyleSheet, useColorScheme, View } from 'react-native';
 import { AuthContext } from '../context/AuthContext';
-import { navTheme } from '../utils/theme';
+import { navTheme, navThemeDark } from '../utils/theme';
 import AuthNavigator from './AuthNavigator';
 import MainNavigator from './MainNavigator';
 
@@ -17,8 +17,10 @@ const AppNavigator = () => {
     );
   }
 
+  const scheme = useColorScheme();
+  const theme = scheme === 'dark' ? navThemeDark : navTheme;
   return (
-    <NavigationContainer theme={navTheme}>
+    <NavigationContainer theme={theme}>
       {token ? <MainNavigator /> : <AuthNavigator />}
     </NavigationContainer>
   );

frontend/screens/GroupDetailsScreen.js

@@ -1,5 +1,5 @@
 import { useTheme } from "@react-navigation/native";
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { Alert, FlatList, StyleSheet, Text, View } from "react-native";
 import {
   ActivityIndicator,
@@ -68,10 +68,13 @@ const GroupDetailsScreen = ({ route, navigation }) => {
     }
   }, [token, groupId]);
 
-  const getMemberName = (userId) => {
-    const member = members.find((m) => m.userId === userId);
-    return member ? member.user.name : "Unknown";
-  };
+  const membersMap = useMemo(() => {
+    const map = new Map();
+    members.forEach((m) => map.set(m.userId, m.user?.name || 'Unknown'));
+    return map;
+  }, [members]);
+
+  const getMemberName = (userId) => membersMap.get(userId) || 'Unknown';
 
   const renderExpense = ({ item }) => {
     const userSplit = item.splits.find((s) => s.userId === user._id);
@@ -230,8 +233,8 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   card: {
-  marginBottom: 16,
-  borderRadius: 16,
+    marginBottom: 16,
+    borderRadius: 16,
   },
   expensesTitle: {
     marginTop: 16,

frontend/screens/HomeScreen.js

@@ -1,5 +1,5 @@
 import { useTheme } from "@react-navigation/native";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { Alert, Animated, FlatList, Pressable, StyleSheet, View } from "react-native";
 import Swipeable from "react-native-gesture-handler/Swipeable";
 import {
@@ -16,11 +16,11 @@ import {
 } from "react-native-paper";
 import { createGroup, getGroups, getOptimizedSettlements } from "../api/groups";
 import { AuthContext } from "../context/AuthContext";
-import { formatCurrency, getCurrencySymbol } from "../utils/currency";
+import { formatCurrency } from "../utils/currency";
 import { tokens } from "../utils/theme";
 
 const HomeScreen = ({ navigation }) => {
-  const { token, logout, user } = useContext(AuthContext);
+  const { token, user } = useContext(AuthContext);
   const { colors } = useTheme();
   const [groups, setGroups] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -80,17 +80,23 @@ const HomeScreen = ({ navigation }) => {
 
       // Fetch settlement status for each group
       if (user?._id) {
-        const settlementPromises = groupsList.map(async (group) => {
-          const status = await calculateSettlementStatus(group._id, user._id);
-          return { groupId: group._id, status };
-        });
-
-        const settlementResults = await Promise.all(settlementPromises);
-        const settlementMap = {};
-        settlementResults.forEach(({ groupId, status }) => {
-          settlementMap[groupId] = status;
-        });
-        setGroupSettlements(settlementMap);
+        const chunkSize = 5;
+        // clear previous while loading fresh data
+        setGroupSettlements({});
+        for (let i = 0; i < groupsList.length; i += chunkSize) {
+          const slice = groupsList.slice(i, i + chunkSize);
+          const results = await Promise.all(
+            slice.map(async (group) => ({
+              groupId: group._id,
+              status: await calculateSettlementStatus(group._id, user._id),
+            }))
+          );
+          const partial = results.reduce((acc, { groupId, status }) => {
+            acc[groupId] = status;
+            return acc;
+          }, {});
+          setGroupSettlements((prev) => ({ ...prev, ...partial }));
+        }
       }
     } catch (error) {
       console.error("Failed to fetch groups:", error);
@@ -125,7 +131,7 @@ const HomeScreen = ({ navigation }) => {
     }
   };
 
-  const currencySymbol = getCurrencySymbol();
+  // const currencySymbol = getCurrencySymbol(); // not used on this screen currently
 
   // Simple mount animation for list items
   const itemAnim = useRef(new Animated.Value(0)).current;
@@ -137,7 +143,7 @@ const HomeScreen = ({ navigation }) => {
     }).start();
   }, [groups]);
 
-  const renderGroup = ({ item, index }) => {
+  const renderGroup = useCallback(({ item, index }) => {
     const settlementStatus = groupSettlements[item._id];
 
     // Generate settlement status text
@@ -248,7 +254,12 @@ const HomeScreen = ({ navigation }) => {
           opacity: itemAnim,
         }}
       >
-        <Swipeable renderRightActions={renderRightActions} renderLeftActions={renderLeftActions}>
+        <Swipeable
+          renderRightActions={renderRightActions}
+          renderLeftActions={renderLeftActions}
+          friction={2}
+          overshootFriction={8}
+        >
           <Pressable onPress={openDetails} onPressIn={onPressIn} onPressOut={onPressOut}>
             <Card style={[styles.card, { backgroundColor: colors.card }]}> 
               <Card.Title
@@ -277,7 +288,7 @@ const HomeScreen = ({ navigation }) => {
         </Swipeable>
       </Animated.View>
     );
-  };
+  }, [groupSettlements, colors, itemAnim, navigation]);
 
   return (
     <View style={styles.container}>
@@ -326,6 +337,9 @@ const HomeScreen = ({ navigation }) => {
           renderItem={renderGroup}
           keyExtractor={(item) => item._id}
           contentContainerStyle={styles.list}
+          initialNumToRender={8}
+          windowSize={10}
+          removeClippedSubviews
           ListEmptyComponent={
             <Text style={styles.emptyText}>
               No groups found. Create or join one!

frontend/utils/theme.js

@@ -1,8 +1,8 @@
 // Centralized theme for react-native-paper (MD3) and React Navigation
 // Formal, modern palette suitable for finance/expense tracking, with bold accents
 
-import { DefaultTheme as DefaultNavTheme } from '@react-navigation/native';
-import { MD3LightTheme as DefaultPaperTheme } from 'react-native-paper';
+import { DarkTheme as DefaultNavDark, DefaultTheme as DefaultNavTheme } from '@react-navigation/native';
+import { MD3DarkTheme as DefaultPaperDark, MD3LightTheme as DefaultPaperTheme } from 'react-native-paper';
 
 const palette = {
   // Neutrals
@@ -58,3 +58,47 @@ export const navTheme = {
 };
 
 export const tokens = palette;
+
+// Dark theme variant
+const darkPalette = {
+  ...palette,
+  background: '#0B1220',
+  surface: '#0F172A',
+  surfaceVariant: '#111827',
+  outline: '#1F2937',
+  primary: '#3B82F6',
+  text: '#E5E7EB',
+  textMuted: '#9CA3AF',
+};
+
+export const paperThemeDark = {
+  ...DefaultPaperDark,
+  colors: {
+    ...DefaultPaperDark.colors,
+    primary: darkPalette.primary,
+    onPrimary: darkPalette.onPrimary,
+    secondary: darkPalette.secondary,
+    tertiary: darkPalette.tertiary,
+    background: darkPalette.background,
+    surface: darkPalette.surface,
+    surfaceVariant: darkPalette.surfaceVariant,
+    outline: darkPalette.outline,
+    error: darkPalette.danger,
+    onSurface: darkPalette.text,
+    onSurfaceVariant: darkPalette.textMuted,
+  },
+  roundness: 12,
+};
+
+export const navThemeDark = {
+  ...DefaultNavDark,
+  colors: {
+    ...DefaultNavDark.colors,
+    primary: darkPalette.primary,
+    background: darkPalette.background,
+    card: darkPalette.surface,
+    text: darkPalette.text,
+    border: darkPalette.outline,
+    notification: darkPalette.secondary,
+  },
+};