feat: implement theming with react-native-paper and navigation, enhance UI components

Author: Devasy

frontend/App.js

@@ -1,13 +1,16 @@
-import React from 'react';
-import AppNavigator from './navigation/AppNavigator';
+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';
 
 export default function App() {
   return (
     <AuthProvider>
-      <PaperProvider>
-        <AppNavigator />
+      <PaperProvider theme={paperTheme}>
+        <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,7 +1,8 @@
-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, View } from 'react-native';
 import { AuthContext } from '../context/AuthContext';
+import { navTheme } from '../utils/theme';
 import AuthNavigator from './AuthNavigator';
 import MainNavigator from './MainNavigator';
 
@@ -17,7 +18,7 @@ const AppNavigator = () => {
   }
 
   return (
-    <NavigationContainer>
+    <NavigationContainer theme={navTheme}>
       {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/screens/GroupDetailsScreen.js

@@ -1,3 +1,4 @@
+import { useTheme } from "@react-navigation/native";
 import { useContext, useEffect, useState } from "react";
 import { Alert, FlatList, StyleSheet, Text, View } from "react-native";
 import {
@@ -50,6 +51,8 @@ const GroupDetailsScreen = ({ route, navigation }) => {
     }
   };
 
+  const { colors } = useTheme();
+
   useEffect(() => {
     navigation.setOptions({
       title: groupName,
@@ -76,23 +79,23 @@ const GroupDetailsScreen = ({ route, navigation }) => {
     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)}
@@ -227,7 +230,8 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   card: {
-    marginBottom: 16,
+  marginBottom: 16,
+  borderRadius: 16,
   },
   expensesTitle: {
     marginTop: 16,