Implement theming with react-native-paper and navigation enhancements

frontend/App.js

@@ -1,13 +1,19 @@
-import React from 'react';
-import AppNavigator from './navigation/AppNavigator';
+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, paperThemeDark } from './utils/theme';
 
 export default function App() {
+  const scheme = useColorScheme();
+  const theme = scheme === 'dark' ? paperThemeDark : paperTheme;
   return (
     <AuthProvider>
-      <PaperProvider>
-        <AppNavigator />
+      <PaperProvider theme={theme}>
+        <GestureHandlerRootView style={{ flex: 1 }}>
+          <AppNavigator />
+        </GestureHandlerRootView>
       </PaperProvider>
     </AuthProvider>
   );

frontend/index.js

@@ -1,4 +1,5 @@
 import { registerRootComponent } from 'expo';
+import 'react-native-gesture-handler';
 
 import App from './App';
 

frontend/navigation/AppNavigator.js

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

frontend/navigation/GroupsStackNavigator.js

@@ -9,9 +9,14 @@ const Stack = createNativeStackNavigator();
 
 const GroupsStackNavigator = () => {
   return (
-    <Stack.Navigator>
+    <Stack.Navigator
+      screenOptions={{
+        animation: 'slide_from_right',
+        headerShadowVisible: false,
+      }}
+    >
       <Stack.Screen name="GroupsList" component={HomeScreen} options={{ headerShown: false }}/>
-      <Stack.Screen name="GroupDetails" component={GroupDetailsScreen} />
+      <Stack.Screen name="GroupDetails" component={GroupDetailsScreen} options={{ animation: 'slide_from_right' }} />
       <Stack.Screen name="AddExpense" component={AddExpenseScreen} options={{ title: 'Add Expense' }} />
       <Stack.Screen name="JoinGroup" component={JoinGroupScreen} options={{ headerShown: false }} />
   <Stack.Screen name="GroupSettings" component={GroupSettingsScreen} options={{ title: 'Group Settings' }} />

frontend/navigation/MainNavigator.js

@@ -1,19 +1,33 @@
-import React from 'react';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import GroupsStackNavigator from './GroupsStackNavigator';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { useTheme } from '@react-navigation/native';
 import FriendsScreen from '../screens/FriendsScreen';
 import AccountStackNavigator from './AccountStackNavigator';
+import GroupsStackNavigator from './GroupsStackNavigator';
 
 const Tab = createBottomTabNavigator();
 
 const MainNavigator = () => {
+  const { colors } = useTheme();
   return (
-    <Tab.Navigator screenOptions={{ headerShown: false }}>
+    <Tab.Navigator
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: colors.primary,
+        tabBarInactiveTintColor: '#64748B',
+        tabBarStyle: {
+          backgroundColor: colors.card,
+          borderTopColor: colors.border,
+          height: 64,
+          paddingBottom: 10,
+          paddingTop: 8,
+        },
+      }}
+    >
       <Tab.Screen
         name="Groups"
         component={GroupsStackNavigator}
-        options={{
+  options={{
           tabBarIcon: ({ color, size }) => (
             <MaterialCommunityIcons name="account-group" color={color} size={size} />
           ),
@@ -22,7 +36,7 @@ const MainNavigator = () => {
       <Tab.Screen
         name="Friends"
         component={FriendsScreen}
-        options={{
+  options={{
           tabBarIcon: ({ color, size }) => (
             <MaterialCommunityIcons name="account-multiple" color={color} size={size} />
           ),
@@ -31,7 +45,7 @@ const MainNavigator = () => {
       <Tab.Screen
         name="Account"
         component={AccountStackNavigator}
-        options={{
+  options={{
           tabBarIcon: ({ color, size }) => (
             <MaterialCommunityIcons name="account-cog" color={color} size={size} />
           ),

frontend/package.json

@@ -21,6 +21,7 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-native": "0.79.5",
+    "react-native-gesture-handler": "^2.28.0",
     "react-native-paper": "^5.14.5",
     "react-native-safe-area-context": "^5.5.2",
     "react-native-screens": "^4.13.1",

frontend/screens/GroupDetailsScreen.js

@@ -1,4 +1,5 @@
-import { useContext, useEffect, useState } from "react";
+import { useTheme } from "@react-navigation/native";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { Alert, FlatList, StyleSheet, Text, View } from "react-native";
 import {
   ActivityIndicator,
@@ -50,6 +51,8 @@ const GroupDetailsScreen = ({ route, navigation }) => {
     }
   };
 
+  const { colors } = useTheme();
+
   useEffect(() => {
     navigation.setOptions({
       title: groupName,
@@ -65,34 +68,37 @@ 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);
     const userShare = userSplit ? userSplit.amount : 0;
     const paidByMe = (item.paidBy || item.createdBy) === user._id;
     const net = paidByMe ? item.amount - userShare : -userShare;
 
-    let balanceText;
-    let balanceColor = "black";
+  let balanceText;
+  let balanceColor = colors.text;
 
     if (net > 0) {
       balanceText = `You are owed ${formatCurrency(net)}`;
-      balanceColor = "green";
+  balanceColor = "#16A34A";
     } else if (net < 0) {
       balanceText = `You borrowed ${formatCurrency(Math.abs(net))}`;
-      balanceColor = "red";
+  balanceColor = "#DC2626";
     } else {
       balanceText = "You are settled for this expense.";
     }
 
     return (
-      <Card style={styles.card}>
+    <Card style={styles.card}>
         <Card.Content>
-          <Title>{item.description}</Title>
+      <Title>{item.description}</Title>
           <Paragraph>Amount: {formatCurrency(item.amount)}</Paragraph>
           <Paragraph>
             Paid by: {getMemberName(item.paidBy || item.createdBy)}
@@ -228,6 +234,7 @@ const styles = StyleSheet.create({
   },
   card: {
     marginBottom: 16,
+    borderRadius: 16,
   },
   expensesTitle: {
     marginTop: 16,