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

Author: bogdandobritoiu

packages/core-mobile/app/new/common/components/NavigationBarButton.tsx

@@ -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
@@ -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,

packages/core-mobile/app/new/common/utils/isIOS26.tsx

@@ -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'

packages/core-mobile/app/new/features/track/screens/TrackTokenDetailScreen.tsx

@@ -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%'
@@ -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>
     )

packages/core-mobile/app/new/routes/(signedIn)/(modals)/accountSettings/connectedSites.tsx

@@ -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 {
@@ -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
+          }}>
+          <Text variant="buttonSmall">Disconnect all</Text>
+        </TouchableOpacity>
+      )
     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>
     )
   }

packages/core-mobile/app/new/routes/(signedIn)/(tabs)/browser/history.tsx

@@ -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'
@@ -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
+          onPress={removeAll}
+          style={{
+            paddingHorizontal: 10
+          }}>
+          <Text variant="buttonSmall">Clear all</Text>
+        </TouchableOpacity>
+      )
+
     return (
       <NavigationBarButton>
-        {hasHistory && (
-          <Button type="secondary" size="small" onPress={removeAll}>
-            Clear all
-          </Button>
-        )}
+        <Button type="secondary" size="small" onPress={removeAll}>
+          Clear all
+        </Button>
       </NavigationBarButton>
     )
   }