feat: add searchable country dropdown and fix dropdown UX#1127
Conversation
Replace separate Country and Currency text inputs with a single country dropdown that automatically sets the currency. The dropdown displays full country names with currency codes (e.g., "Canada - CAD") and opens in a full-screen modal with a search bar for easy filtering. - Add COUNTRY_DATA mapping with 37 country-currency pairs in assets - Enhance FormDropdown with labelExtractor and fullScreen props - Add search functionality to filter options by name or currency - Add full-screen modal styles with header and search bar
![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 introduces a country and currency data helper, replaces the text inputs in the settings view with a new searchable, full-screen dropdown component, and improves layout padding using safe area insets. The review feedback provides several valuable improvements: ensuring cross-platform safe area support by importing SafeAreaView from react-native-safe-area-context, avoiding inline default prop functions to preserve memoization performance, replacing nested TouchableOpacity components with Pressable to prevent gesture conflicts with FlatList, and establishing a minimum bottom padding when safe area insets are zero.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
…s, move to Settings/common
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request refactors the settings and payment methods views by introducing safe area insets for bottom padding and replacing manual country/currency text inputs with a new searchable dropdown component (FormSearchDropdown). Feedback on these changes suggests wrapping key handlers and list renderers in useCallback within FormSearchDropdown to avoid performance degradation during typing, and adding a base padding offset to insets.bottom in PaymentMethodsView to ensure proper spacing on devices without a bottom safe area.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request introduces a searchable country dropdown in the settings view, supported by a new country data asset and reusable dropdown components (DropdownTrigger, FormDropdown, and FormSearchDropdown). It also integrates safe area insets for better layout padding on modern devices. The review feedback focuses on performance optimizations, such as memoizing list render functions using useCallback, improving runtime safety by handling potential null or undefined values in label extraction, and enhancing user experience by dismissing the keyboard when scrolling the search results.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request introduces a country and currency dataset, refactors multiple settings views to use a new PageScrollView component that respects safe area insets, and replaces the old dropdown component with a modularized FormDropdown and a searchable FormSearchDropdown. Feedback focuses on performance and layout robustness: memoizing inline styles in PageScrollView to avoid unnecessary re-renders, using readonly T[] in dropdown props to support readonly arrays, and replacing a fragile hardcoded spacer in the search modal header with absolute positioning for the Cancel button.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request introduces a new country and currency dataset, modularizes settings dropdowns with new DropdownTrigger, FormDropdown, and FormSearchDropdown components, and replaces standard ScrollViews with a custom PageScrollView to handle safe area insets. Feedback from the review suggests improving the robustness of country helper functions by normalizing inputs, resolving potential Android scroll interference in FormDropdown by replacing a Pressable with a View, enhancing the search UX with autoFocus and an empty list state in FormSearchDropdown, and adding accessibility attributes to the DropdownTrigger component.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
|
2 participants
Summary
Replaces the free-text country/currency inputs in the Settings screen with a searchable full-screen dropdown backed by a predefined ISO country list. Also introduces a generic
FormDropdowncomponent used across Card, Apple Pay, and Google Pay settings views.Changes
FormDropdown— new generic dropdown component with two modes:FormSearchDropdown) — used for long lists (country codes)SettingsView— country field replaced withFormSearchDropdown(full-screen, searchable); currency is now derived automatically from the selected countryCardSettingsView— address visibility, KCP visibility, social security switched toFormDropdownApplePaySettingsView— shipping type switched toFormDropdownGooglePaySettingsView— total price status switched toFormDropdownCountryView+getFlagEmoji— displays selected country with flag emoji in the checkout headerPageScrollView— new reusable component encapsulatingScrollViewwithStyles.pageand dynamic safe-area-aware bottom padding; applied to all 5 settings views andPaymentMethodsViewViewreplaced withPressableto prevent overlay dismissal when tapping empty space inside the dropdownStyles.dropdownScreenshots