CP-13356 - iOS 26 - Broken button on Browser history and Connected sites#3568
CP-13356 - iOS 26 - Broken button on Browser history and Connected sites#3568bogdandobritoiu merged 3 commits intomainfrom
Conversation
bogdandobritoiu
requested review from
B0Y3R-AVA,
alexnicolae-ava,
atn4z7,
onghwan and
ruijialin-avalabs
as code owners
| if (!hasHistory) return null | ||
| if (isIOS26) | ||
| return ( | ||
| <TouchableOpacity |
There was a problem hiding this comment.
curious why we haven't just defaulted to using TouchableOpacity instead of if else'ing it here?
There was a problem hiding this comment.
iOS 26 has default buttons for navigation, had to restyle them and remove the gray background from those buttons
There was a problem hiding this comment.
Pull request overview
This PR fixes broken header right buttons on iOS 26 for the Browser History and Connected Sites screens. The issue stems from the NavigationBarButton component not rendering correctly on iOS 26, which is addressed by creating a utility to detect iOS 26 and conditionally rendering a TouchableOpacity with Text instead of the Button wrapper.
Changes:
- Created a new utility
isIOS26.tsxto detect iOS 26 devices - Updated NavigationBarButton component to use the new isIOS26 utility instead of inline version checking
- Added conditional rendering in Browser History and Connected Sites screens to use TouchableOpacity with Text on iOS 26 instead of NavigationBarButton with Button
- Adjusted padding styles in TrackTokenDetailScreen for FavoriteBarButton and ShareBarButton to properly space buttons on iOS 26
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/core-mobile/app/new/common/utils/isIOS26.tsx | New utility to detect iOS 26 devices by checking system version and platform |
| packages/core-mobile/app/new/common/components/NavigationBarButton.tsx | Refactored to use the new isIOS26 utility instead of inline version checking |
| packages/core-mobile/app/new/routes/(signedIn)/(tabs)/browser/history.tsx | Added iOS 26 workaround for "Clear all" button using TouchableOpacity instead of NavigationBarButton |
| packages/core-mobile/app/new/routes/(signedIn)/(modals)/accountSettings/connectedSites.tsx | Added iOS 26 workaround for "Disconnect all" button using TouchableOpacity instead of NavigationBarButton |
| packages/core-mobile/app/new/features/track/screens/TrackTokenDetailScreen.tsx | Adjusted padding styles for FavoriteBarButton and ShareBarButton to properly space buttons on iOS 26 |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import DeviceInfo from 'react-native-device-info' | ||
|
|
||
| export const isIOS26 = | ||
| DeviceInfo.getSystemVersion() >= '26' && Platform.OS === 'ios' |
There was a problem hiding this comment.
String comparison is used for version checking, which is not semantically correct and could lead to incorrect results in edge cases. For example, if the system version were '3.0' (unlikely but possible in edge cases), it would incorrectly evaluate to true since '3' > '2' lexicographically. The version should be parsed as a number before comparison. Consider using parseFloat(DeviceInfo.getSystemVersion()) >= 26 for more robust version checking.
| DeviceInfo.getSystemVersion() >= '26' && Platform.OS === 'ios' | |
| parseFloat(DeviceInfo.getSystemVersion()) >= 26 && Platform.OS === 'ios' |
| <TouchableOpacity | ||
| onPress={removeAll} | ||
| style={{ | ||
| paddingHorizontal: 10 | ||
| }}> | ||
| <Text variant="buttonSmall">Clear all</Text> | ||
| </TouchableOpacity> |
There was a problem hiding this comment.
The TouchableOpacity component with identical inline styles (paddingHorizontal: 10) and Text variant "buttonSmall" is duplicated across multiple files. Consider extracting this into a reusable component to reduce code duplication and ensure consistent styling across the application.
| <TouchableOpacity | ||
| onPress={disconnectAll} | ||
| style={{ | ||
| paddingHorizontal: 10 | ||
| }}> | ||
| <Text variant="buttonSmall">Disconnect all</Text> | ||
| </TouchableOpacity> |
There was a problem hiding this comment.
The TouchableOpacity component for iOS 26 is missing a testID prop, which is inconsistent with similar buttons in this file (e.g., line 107 has testID for the disconnect button). Consider adding a testID like "disconnect_all_ios26" to maintain testability.
| style={{ | ||
| paddingHorizontal: 10 | ||
| }}> |
There was a problem hiding this comment.
The inline style object is created on every render. For better performance, consider using useMemo to memoize the style object or defining it as a constant outside the component if it doesn't depend on any props or state.
| style={{ | ||
| paddingHorizontal: 10 | ||
| }}> |
There was a problem hiding this comment.
The inline style object is created on every render. For better performance, consider using useMemo to memoize the style object or defining it as a constant outside the component if it doesn't depend on any props or state.
3 participants
Description
Ticket: CP-13356
headerRight buttons on iOS 26 were not rendering correctly on Account Settings => Privacy and Security => Connected Sites as well as Browser => History
Screenshots/Videos
Before
After
Testing
Dev Testing (if applicable)
iOS - 7404
Android -7405
Checklist
Please check all that apply (if applicable)