Implement theming with react-native-paper and navigation enhancements #148
Conversation
WalkthroughImplements centralized light/dark theming for React Native Paper and React Navigation, integrates theme usage across App, navigators, and key screens, and adds gesture handling. HomeScreen is refactored with swipe actions, per-item settlement status, animations, and a create-group modal. Adds the gesture-handler dependency and required top-level import. Changes
Sequence Diagram(s)sequenceDiagram
participant OS as OS
participant App as App (Providers)
participant Theme as useColorScheme
participant Paper as PaperProvider
participant Nav as NavigationContainer
participant GH as GestureHandlerRootView
OS->>App: Launch
App->>Theme: Get color scheme
Theme-->>App: "light" or "dark"
App->>Paper: Provide paperTheme or paperThemeDark
App->>GH: Wrap navigator
GH->>Nav: Mount with navTheme or navThemeDark
Nav-->>App: Render screens
sequenceDiagram
participant Home as HomeScreen
participant API as fetchGroups()
participant Settle as calculateSettlementStatus()
participant UI as GroupItem
participant Nav as Navigation
Home->>API: Load groups
loop batched (size=5)
API->>Settle: For each group/user
Settle-->>API: {isSettled, netBalance, owes/owed}
API-->>Home: Partial statuses
Home->>UI: Update list items
end
UI->>Nav: Swipe Right: AddExpense / Settings
UI->>Nav: Swipe Left: GroupDetails
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #148 +/- ##
=======================================
Coverage 72.79% 72.79%
=======================================
Files 17 17
Lines 1669 1669
Branches 154 154
=======================================
Hits 1215 1215
Misses 400 400
Partials 54 54
🚀 New features to boost your workflow:
|
…or better readability and structure
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
frontend/navigation/GroupsStackNavigator.js (1)
19-19: Consider removing redundant animation option.The
GroupDetailsscreen already inheritsanimation: 'slide_from_right'from the navigator'sscreenOptions, so explicitly setting it again in the screen-specific options is redundant.- <Stack.Screen name="GroupDetails" component={GroupDetailsScreen} options={{ animation: 'slide_from_right' }} /> + <Stack.Screen name="GroupDetails" component={GroupDetailsScreen} />frontend/navigation/MainNavigator.js (1)
17-17: Consider using theme colors for inactive tint.The hardcoded hex color
#64748BfortabBarInactiveTintColorcould be replaced with a theme color for better consistency.- tabBarInactiveTintColor: '#64748B', + tabBarInactiveTintColor: colors.onSurfaceVariant || '#64748B',frontend/screens/GroupDetailsScreen.js (1)
90-90: Consider using theme-based status colors.The hardcoded success and error colors (
#16A34A,#DC2626) could potentially use the theme's status colors for better consistency.Consider referencing the theme's status colors defined in
frontend/utils/theme.js:- balanceColor = "#16A34A"; + balanceColor = colors.success || "#16A34A";- balanceColor = "#DC2626"; + balanceColor = colors.error || "#DC2626";However, this would require ensuring these status colors are available in the navigation theme or accessing them through a different method.
Also applies to: 93-93
frontend/screens/HomeScreen.js (2)
41-42: Consider adding URL validation for securityWhile the regex check for image URLs is functional, consider using a more robust URL validation to prevent potential security issues with malformed URLs.
- const isImage = item.imageUrl && /^(https?:|data:image)/.test(item.imageUrl); + const isImage = item.imageUrl && /^(https?:\/\/|data:image\/)/.test(item.imageUrl);
244-252: Consider using individual animations per itemThe current implementation uses a single shared
itemAnimvalue for all list items, which means all items will animate together. For a more polished effect where items animate in sequence as they appear, consider using individual animation values per item.This could be achieved by moving the animation initialization into the
GroupItemcomponent itself, or by using a library likereact-native-reanimatedfor more sophisticated list animations.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (9)
frontend/App.js(1 hunks)frontend/index.js(1 hunks)frontend/navigation/AppNavigator.js(2 hunks)frontend/navigation/GroupsStackNavigator.js(1 hunks)frontend/navigation/MainNavigator.js(3 hunks)frontend/package.json(1 hunks)frontend/screens/GroupDetailsScreen.js(4 hunks)frontend/screens/HomeScreen.js(10 hunks)frontend/utils/theme.js(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (6)
frontend/navigation/GroupsStackNavigator.js (2)
frontend/navigation/AccountStackNavigator.js (2)
Stack(6-6)Stack(8-15)frontend/navigation/AuthNavigator.js (2)
Stack(6-6)Stack(8-15)
frontend/screens/HomeScreen.js (5)
frontend/screens/GroupDetailsScreen.js (2)
formatCurrency(31-31)useTheme(54-54)frontend/utils/currency.js (2)
formatCurrency(8-16)formatCurrency(8-16)frontend/utils/theme.js (2)
tokens(60-60)tokens(60-60)frontend/context/AuthContext.js (3)
AuthContext(10-10)AuthContext(10-10)token(14-14)frontend/navigation/MainNavigator.js (1)
useTheme(11-11)
frontend/App.js (3)
frontend/navigation/AppNavigator.js (3)
scheme(11-11)theme(12-12)AppNavigator(9-27)frontend/utils/theme.js (4)
paperThemeDark(74-91)paperThemeDark(74-91)paperTheme(28-45)paperTheme(28-45)frontend/context/AuthContext.js (2)
AuthProvider(12-190)AuthProvider(12-190)
frontend/screens/GroupDetailsScreen.js (3)
frontend/screens/GroupSettingsScreen.js (1)
members(45-45)frontend/utils/balanceCalculator.js (2)
members(46-46)getMemberName(67-72)frontend/utils/currency.js (2)
formatCurrency(8-16)formatCurrency(8-16)
frontend/navigation/AppNavigator.js (3)
frontend/context/AuthContext.js (2)
AuthContext(10-10)AuthContext(10-10)frontend/App.js (2)
scheme(9-9)theme(10-10)frontend/utils/theme.js (4)
navThemeDark(93-104)navThemeDark(93-104)navTheme(47-58)navTheme(47-58)
frontend/navigation/MainNavigator.js (5)
frontend/screens/HomeScreen.js (1)
useTheme(151-151)frontend/screens/GroupDetailsScreen.js (1)
useTheme(54-54)frontend/navigation/GroupsStackNavigator.js (1)
GroupsStackNavigator(10-25)frontend/navigation/AuthNavigator.js (1)
Stack(8-15)frontend/navigation/AccountStackNavigator.js (1)
Stack(8-15)
🔇 Additional comments (24)
frontend/package.json (1)
24-24: LGTM! Appropriate gesture handler dependency added.The addition of
react-native-gesture-handlerv2.28.0 aligns well with the swipe functionality being introduced in HomeScreen and supports the overall gesture capabilities needed for the enhanced user interactions in this PR.frontend/navigation/GroupsStackNavigator.js (1)
12-17: Good navigation styling consistency.The global
screenOptionsconfiguration provides consistent animation and header styling across all screens in the Groups stack, which improves the overall user experience.frontend/utils/theme.js (5)
7-26: Well-structured color palette with clear semantic naming.The palette provides good semantic color definitions with appropriate contrast ratios for a finance app. The neutral, brand, status, and text color organization makes the theme maintainable and easy to understand.
28-45: Properly structured Paper theme configuration.The theme correctly extends the default MD3 light theme and maps palette colors to appropriate Paper theme properties. The roundness value of 12 provides a modern, consistent look across UI components.
47-58: Navigation theme properly configured.The navigation theme correctly maps palette colors to React Navigation's theme structure, ensuring consistent theming across navigation components.
63-72: Well-designed dark palette.The dark theme maintains appropriate contrast ratios while preserving the brand identity. The background colors provide good readability in dark mode environments.
74-91: Dark themes properly implemented.Both
paperThemeDarkandnavThemeDarkcorrectly extend their respective default dark themes and apply the dark palette colors appropriately, ensuring consistent theming across light and dark modes.Also applies to: 93-104
frontend/navigation/MainNavigator.js (2)
3-3: Proper theme integration.The addition of
useThemehook and its usage to extract colors provides dynamic theming support for the tab navigator, which integrates well with the centralized theme system.Also applies to: 11-11
13-26: Well-implemented theme-aware tab styling.The tab navigator properly uses theme colors for active tint, background, and borders while maintaining good visual hierarchy with appropriate padding and height adjustments.
frontend/screens/GroupDetailsScreen.js (4)
1-2: Good theme and performance optimizations.The addition of
useThemefor dynamic theming anduseMemofor performance optimization shows attention to both UX and performance considerations.
71-77: Excellent performance optimization with memoized member lookup.The
membersMapimplementation usinguseMemoandMapprovides O(1) member name lookups, significantly improving performance over the previous O(n) array search pattern, especially for groups with many members.
86-86: Improved theme integration for balance colors.Good use of theme colors as the base with appropriate hardcoded colors for positive/negative balances that maintain semantic meaning across light/dark themes.
Also applies to: 90-90, 93-93
237-237: Nice visual enhancement with increased border radius.The increased border radius from the default to 16 provides a more modern, polished appearance that aligns well with the overall theme's roundness of 12.
frontend/screens/HomeScreen.js (5)
1-20: Good use of theming system!The imports are properly organized and correctly import the new theming utilities. The use of
useThemefrom React Navigation and thetokensfrom the custom theme module shows proper integration with the centralized theming system.
23-147: Well-structured component refactoring with excellent separation of concerns!The extraction of
GroupItemas a separate component is a great architectural decision that:
- Properly manages hooks per item (avoiding hook rules violations)
- Encapsulates item-specific animations and gestures cleanly
- Improves code organization and maintainability
The implementation of swipe gestures with clear action buttons is intuitive and the use of theme tokens for colors ensures consistency.
165-186: Robust error handling in settlement calculationGood implementation with proper error handling that returns safe defaults when API calls fail. The graceful degradation ensures the UI remains functional even when settlement data is unavailable.
196-211: Excellent chunked processing implementation!The chunked approach for fetching settlement statuses (processing 5 groups at a time) is a smart optimization that:
- Prevents overwhelming the API with too many concurrent requests
- Provides progressive updates to the UI
- Maintains good performance characteristics
This is a well-thought-out solution for handling potentially large lists of groups.
298-301: Good FlatList optimizations!The performance optimizations with
initialNumToRender,windowSize, andremoveClippedSubviewsare appropriate for potentially long lists. These will help maintain smooth scrolling performance.frontend/index.js (1)
1-10: Correct placement of gesture handler importThe import of
react-native-gesture-handleris correctly placed at the top level, which is required for proper initialization of the gesture system before any other code runs.frontend/navigation/AppNavigator.js (2)
9-13: Clean implementation of theme switchingThe color scheme detection and theme selection logic is well-implemented. The conditional assignment based on the system's color scheme provides a seamless dark/light mode experience.
22-26: Proper theme integration with NavigationContainerThe theme is correctly applied to the NavigationContainer, ensuring consistent theming across all navigation UI elements.
frontend/App.js (3)
8-10: Consistent theme selection patternGood consistency with the theme selection logic used in AppNavigator. Both components use the same pattern for detecting and applying the appropriate theme based on the system color scheme.
14-16: Proper gesture handler setupThe GestureHandlerRootView is correctly placed as a wrapper with the required
flex: 1style, ensuring gestures work throughout the app hierarchy.
11-18: Well-structured component hierarchyThe component tree is properly organized:
- AuthProvider at the root for authentication context
- PaperProvider with dynamic theme for UI components
- GestureHandlerRootView for gesture support
- AppNavigator for navigation
This hierarchy ensures all features work correctly together.
Introduce a centralized theming system for the application using react-native-paper and React Navigation, improving the UI components and overall user experience.
Summary by CodeRabbit
New Features
UI/UX
Chores