Skip to content

CP-13356 - iOS 26 - Broken button on Browser history and Connected sites #3568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bogdandobritoiu merged 3 commits into from
Feb 13, 2026
Merged

CP-13356 - iOS 26 - Broken button on Browser history and Connected sites #3568

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
da448ed
fix iOS 26 browser and connected websites
bogdandobritoiu Feb 11, 2026
e1e21dc
Merge branch 'main' into CP-13356
bogdandobritoiu Feb 11, 2026
c8e7930
Merge branch 'main' into CP-13356
bogdandobritoiu Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/core-mobile/app/new/common/components/NavigationBarButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { TouchableOpacity, View } from '@avalabs/k2-alpine'
import { isIOS26 } from 'common/utils/isIOS26'
import React, { useMemo } from 'react'
import {
Platform,
StyleProp,
TouchableOpacityProps,
ViewStyle
} from 'react-native'
import DeviceInfo from 'react-native-device-info'

interface NavigationBarButtonProps extends TouchableOpacityProps {
onPress?: () => void
Expand All @@ -27,7 +27,7 @@ const NavigationBarButton = React.forwardRef<
ref
): JSX.Element => {
const containerStyle: ViewStyle = useMemo(() => {
if (DeviceInfo.getSystemVersion() >= '26' && Platform.OS === 'ios') {
if (isIOS26) {
return {
height: 36,
width: 36,
Expand Down
5 changes: 5 additions & 0 deletions packages/core-mobile/app/new/common/utils/isIOS26.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { Platform } from 'react-native'
import DeviceInfo from 'react-native-device-info'

export const isIOS26 =
DeviceInfo.getSystemVersion() >= '26' && Platform.OS === 'ios'
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
DeviceInfo.getSystemVersion() >= '26' && Platform.OS === 'ios'
parseFloat(DeviceInfo.getSystemVersion()) >= 26 && Platform.OS === 'ios'

Copilot uses AI. Check for mistakes.
15 changes: 10 additions & 5 deletions packages/core-mobile/app/new/features/track/screens/TrackTokenDetailScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ import { getDomainFromUrl } from 'utils/getDomainFromUrl/getDomainFromUrl'
import { isPositiveNumber } from 'utils/isPositiveNumber/isPositiveNumber'
import { formatLargeCurrency } from 'utils/Utils'
import { useDebouncedCallback } from 'use-debounce'
import { isIOS26 } from 'common/utils/isIOS26'
import { useTrackTokenActions } from '../hooks/useTrackTokenActions'

const MAX_VALUE_WIDTH = '80%'
Expand Down Expand Up @@ -321,15 +322,19 @@ const TrackTokenDetailScreen = (): JSX.Element => {
<FavoriteBarButton
isFavorite={isFavorite}
onPress={handleFavorite}
style={{ paddingRight: 12 }}
style={isIOS26 ? { paddingHorizontal: 12 } : { paddingRight: 12 }}
/>
)}
<ShareBarButton
onPress={handleShare}
style={{
paddingRight: 12,
paddingLeft: 8
}}
style={
isIOS26
? { paddingHorizontal: 12 }
: {
paddingRight: 12,
paddingLeft: 8
}
}
/>
</View>
)
Expand Down
22 changes: 16 additions & 6 deletions packages/core-mobile/app/new/routes/(signedIn)/(modals)/accountSettings/connectedSites.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import React, { useCallback, useMemo, useState } from 'react'
import { DappLogo } from 'common/components/DappLogo'
import { ErrorState } from 'common/components/ErrorState'
import NavigationBarButton from 'common/components/NavigationBarButton'
import { isIOS26 } from 'common/utils/isIOS26'

const ConnectedSitesScreen = (): JSX.Element => {
const {
Expand Down Expand Up @@ -167,14 +168,23 @@ const ConnectedSitesScreen = (): JSX.Element => {

const renderSeparator = (): JSX.Element => <View sx={{ height: 12 }} />

const renderHeaderRight = (): JSX.Element => {
const renderHeaderRight = (): JSX.Element | null => {
if (allApprovedDapps.length === 0) return null
if (isIOS26)
return (
<TouchableOpacity
onPress={disconnectAll}
style={{
paddingHorizontal: 10
}}>
Comment on lines +177 to +179
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
<Text variant="buttonSmall">Disconnect all</Text>
</TouchableOpacity>
Comment on lines +175 to +181
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
)
return (
<NavigationBarButton>
{allApprovedDapps.length ? (
<Button size="small" onPress={disconnectAll} type="secondary">
Disconnect all
</Button>
) : null}
<Button size="small" onPress={disconnectAll} type="secondary">
Disconnect all
</Button>
</NavigationBarButton>
)
}
Expand Down
31 changes: 24 additions & 7 deletions packages/core-mobile/app/new/routes/(signedIn)/(tabs)/browser/history.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
import { Button, SearchBar, showAlert } from '@avalabs/k2-alpine'
import {
Button,
SearchBar,
showAlert,
Text,
TouchableOpacity
} from '@avalabs/k2-alpine'
import { useNavigation } from '@react-navigation/native'
import { ErrorState } from 'common/components/ErrorState'
import { ListScreen } from 'common/components/ListScreen'
import NavigationBarButton from 'common/components/NavigationBarButton'
import { useBottomTabBarHeight } from 'common/hooks/useBottomTabBarHeight'
import { isIOS26 } from 'common/utils/isIOS26'
import { BrowserItem } from 'features/browser/components/BrowserItem'
import { useSearchHistory } from 'features/browser/hooks/useSearchHistory'
import { prepareFaviconToLoad } from 'features/browser/utils'
Expand Down Expand Up @@ -104,14 +111,24 @@ const HistoryScreen = (): JSX.Element => {
)
}

const renderHeaderRight = (): JSX.Element => {
const renderHeaderRight = (): JSX.Element | null => {
if (!hasHistory) return null
if (isIOS26)
return (
<TouchableOpacity
Copy link
Contributor

@B0Y3R-AVA B0Y3R-AVA Feb 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

curious why we haven't just defaulted to using TouchableOpacity instead of if else'ing it here?

Copy link
Contributor Author

@bogdandobritoiu bogdandobritoiu Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

iOS 26 has default buttons for navigation, had to restyle them and remove the gray background from those buttons

onPress={removeAll}
style={{
paddingHorizontal: 10
}}>
Comment on lines +120 to +122
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
<Text variant="buttonSmall">Clear all</Text>
</TouchableOpacity>
Comment on lines +118 to +124
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
)

return (
<NavigationBarButton>
{hasHistory && (
<Button type="secondary" size="small" onPress={removeAll}>
Clear all
</Button>
)}
<Button type="secondary" size="small" onPress={removeAll}>
Clear all
</Button>
</NavigationBarButton>
)
}
Expand Down
Loading