Conversation
…navigation Replace @react-navigation/bottom-tabs with react-native-bottom-tabs to leverage native iOS tab bar components for improved performance and native UI consistency. Changes: - Add react-native-bottom-tabs and @bottom-tabs/react-navigation dependencies - Update root tabs to use createNativeBottomTabNavigator - Replace tab bar icons with SF Symbols (book.fill, safari.fill, person.crop.circle.fill) - Update useBottomTabBarHeight imports across home and profile pages - Remove custom BlurView tab bar background in favor of native styling - Update iOS Podfile.lock with SwiftUIIntrospect dependency 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Summary of ChangesHello @AnnatarHe, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly refactors the application's bottom tab navigation system on iOS. By transitioning from a JavaScript-based solution to Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request successfully migrates the bottom tab navigation to react-native-bottom-tabs, which is a positive change for performance and native UI consistency on iOS. The dependency updates and the main navigator refactoring in root-tabs.tsx are well-executed. However, I've identified a significant issue in src/pages/square/index.tsx where the bottom tab bar height is no longer accounted for, which could lead to UI bugs. I've also pointed out some minor code cleanup opportunities in src/routes/root-tabs.tsx to remove commented-out code.
| ItemSeparatorComponent={() => <View style={styles.separator} />} | ||
| ListFooterComponent={<View style={{ height: bh + insets.bottom + 16 }} />} | ||
| estimatedItemSize={itemSizeCellHeight} | ||
| ListFooterComponent={<View style={{ height: 0 + insets.bottom + 16 }} />} |
There was a problem hiding this comment.
There are a couple of issues with the changes around this line:
-
Incorrect Footer Height: The
ListFooterComponentheight is now calculated with0instead of the bottom tab bar height (bh). This will likely cause the last items in the list to be hidden behind the tab bar. You should import and useuseBottomTabBarHeightfromreact-native-bottom-tabsto get the correct height, similar to how it's done in thehome.page.tsxandprofile.page.tsxfiles. -
Missing
estimatedItemSize: TheestimatedItemSizeprop was removed from theFlashList. This prop is important forFlashListperformance and should be restored.
To fix this, you'll need to:
- Add
import { useBottomTabBarHeight } from 'react-native-bottom-tabs'; - Call the hook in the component:
const bh = useBottomTabBarHeight(); - Update the
FlashListprops as follows:
ListFooterComponent={<View style={{ height: bh + insets.bottom + 16 }} />}
estimatedItemSize={itemSizeCellHeight}| // tabBarIcon: ({ color, size }) => <HomeIcon color={color} size={size} /> | ||
| tabBarIcon: () => ({ sfSymbol: 'book.fill' }) |
There was a problem hiding this comment.
This commented-out code is no longer needed and should be removed to improve code clarity and maintainability.
tabBarIcon: () => ({ sfSymbol: 'book.fill' })
| // tabBarIcon: ({ color, size }) => ( | ||
| // <GlobeAmericasIcon color={color} size={size} /> | ||
| // ) | ||
| tabBarIcon: () => ({ sfSymbol: 'safari.fill' }) |
There was a problem hiding this comment.
This commented-out code is no longer needed and should be removed to improve code clarity and maintainability.
tabBarIcon: () => ({ sfSymbol: 'safari.fill' })
| // tabBarIcon: ({ color, size }) => <UserIcon color={color} size={size} /> | ||
| tabBarIcon: () => ({ sfSymbol: 'person.crop.circle.fill' }) |
There was a problem hiding this comment.
This commented-out code is no longer needed and should be removed to improve code clarity and maintainability.
tabBarIcon: () => ({ sfSymbol: 'person.crop.circle.fill' })
1 participant
Summary
This PR migrates the bottom tab navigation from
@react-navigation/bottom-tabstoreact-native-bottom-tabsto leverage native iOS tab bar components, providing better performance and native UI consistency.Changes
react-native-bottom-tabsand@bottom-tabs/react-navigationpackagescreateNativeBottomTabNavigatorinstead ofcreateBottomTabNavigatorbook.fill,safari.fill,person.crop.circle.fill)useBottomTabBarHeightimports in home and profile pagesBenefits
Test plan
🤖 Generated with Claude Code