iOS 26 - Update modal animation (#3646)

Author: bogdandobritoiu

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

@@ -1,5 +1,5 @@
 import { TouchableOpacity, View } from '@avalabs/k2-alpine'
-import { isIOS26 } from 'common/utils/isIOS26'
+import { isIOS26AndAbove } from 'common/utils/isIOS26AndAbove'
 import React, { useMemo } from 'react'
 import {
   Platform,
@@ -27,7 +27,7 @@ const NavigationBarButton = React.forwardRef<
     ref
   ): JSX.Element => {
     const containerStyle: ViewStyle = useMemo(() => {
-      if (isIOS26) {
+      if (isIOS26AndAbove) {
         return {
           height: 36,
           width: 36,

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

@@ -169,16 +169,12 @@ export const ScrollScreen = ({
 
   const renderHeaderContent = useCallback(() => {
     if (title || subtitle || renderHeader) {
+      const hasTitle = Boolean(title || subtitle)
       return (
         <View>
           <View
             ref={headerRef}
-            style={[
-              headerStyle,
-              {
-                gap: 8
-              }
-            ]}>
+            style={[headerStyle, hasTitle ? { gap: 8 } : undefined]}>
             {title ? (
               <Animated.View style={[animatedHeaderStyle]}>
                 <ScreenHeader
@@ -190,9 +186,10 @@ export const ScrollScreen = ({
             ) : null}
 
             {subtitle ? <Text variant="body1">{subtitle}</Text> : null}
+            {!hasTitle && renderHeader?.()}
           </View>
 
-          {renderHeader?.()}
+          {hasTitle && renderHeader?.()}
         </View>
       )
     } else {

packages/core-mobile/app/new/common/consts/screenOptions.tsx

@@ -4,6 +4,7 @@ import { AccountSettingBarButton } from 'common/components/AccountSettingBarButt
 import BackBarButton from 'common/components/BackBarButton'
 import { ConnectButton } from 'common/components/ConnectButton'
 import { ConnectedNotificationBarButton } from 'common/components/ConnectedNotificationBarButton'
+import { isIOS26AndAbove } from 'common/utils/isIOS26AndAbove'
 import React from 'react'
 import { Platform } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
@@ -32,10 +33,13 @@ export const stackScreensOptions: NativeStackNavigationOptions | undefined = {
 // Modals
 export const modalScreensOptions: NativeStackNavigationOptions = {
   ...commonNavigatorScreenOptions,
-  presentation: Platform.OS === 'ios' ? 'pageSheet' : 'formSheet',
+  presentation:
+    Platform.OS === 'ios' && !isIOS26AndAbove ? 'pageSheet' : 'formSheet',
   sheetElevation: 0,
   sheetInitialDetentIndex: 0,
-  sheetAllowedDetents: [Platform.OS === 'android' ? 0.93 : 0.99],
+  sheetAllowedDetents: [
+    Platform.OS === 'android' ? 0.93 : isIOS26AndAbove ? 0.98 : 0.99
+  ],
   headerLeft: () => <BackBarButton />,
   gestureEnabled: true,
   headerTransparent: true
@@ -53,25 +57,28 @@ export function useModalScreensOptions(): {
       contentStyle: {
         // Android formsheet in native-stack has a default top padding of insets.top
         // by removing the insets.top this we adjust the navigation bar position
-        marginTop: Platform.OS === 'android' ? -insets.top + 8 : undefined
+        marginTop: Platform.OS === 'android' ? -insets.top + 8 : undefined,
+        height: '100%'
       }
     },
     secondaryModalScreensOptions: {
-      ...modalScreensOptions,
+      ...secondaryModalScreensOptions,
       freezeOnBlur: true,
       contentStyle: {
         // Android formsheet in native-stack has a default top padding of insets.top
         // by removing the insets.top this we adjust the navigation bar position
-        marginTop: Platform.OS === 'android' ? -insets.top + 8 : undefined
-      },
-      sheetAllowedDetents: [Platform.OS === 'android' ? 0.92 : 0.99]
+        marginTop: Platform.OS === 'android' ? -insets.top + 8 : undefined,
+        height: '100%'
+      }
     }
   }
 }
 
 export const secondaryModalScreensOptions: NativeStackNavigationOptions = {
   ...modalScreensOptions,
-  sheetAllowedDetents: [Platform.OS === 'android' ? 0.92 : 0.99]
+  sheetAllowedDetents: [
+    Platform.OS === 'android' ? 0.92 : isIOS26AndAbove ? 0.97 : 0.99
+  ]
 }
 
 /**
@@ -88,7 +95,9 @@ export const secondaryModalScreensOptions: NativeStackNavigationOptions = {
 export const ledgerModalScreensOptions: NativeStackNavigationOptions = {
   ...modalScreensOptions,
   freezeOnBlur: Platform.OS === 'ios' ? false : undefined,
-  sheetAllowedDetents: [Platform.OS === 'android' ? 0.92 : 0.99]
+  sheetAllowedDetents: [
+    Platform.OS === 'android' ? 0.92 : isIOS26AndAbove ? 0.97 : 0.98
+  ]
 }
 
 export const modalStackNavigatorScreenOptions: NativeStackNavigationOptions = {

…e-mobile/app/new/common/utils/isIOS26.ts …/app/new/common/utils/isIOS26AndAbove.tspackages/core-mobile/app/new/common/utils/isIOS26.ts renamed to packages/core-mobile/app/new/common/utils/isIOS26AndAbove.ts packages/core-mobile/app/new/common/utils/isIOS26.ts renamed to packages/core-mobile/app/new/common/utils/isIOS26AndAbove.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native'
 import DeviceInfo from 'react-native-device-info'
 
-export const isIOS26 =
+export const isIOS26AndAbove =
   parseInt(DeviceInfo.getSystemVersion().split('.')[0] || '') >= 26 &&
   Platform.OS === 'ios'

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

@@ -26,7 +26,7 @@ import { AVAX_TOKEN_ID } from 'common/consts/swap'
 import { useFormatCurrency } from 'common/hooks/useFormatCurrency'
 import { useTokenDetails } from 'common/hooks/useTokenDetails'
 import { copyToClipboard } from 'common/utils/clipboard'
-import { isIOS26 } from 'common/utils/isIOS26'
+import { isIOS26AndAbove } from 'common/utils/isIOS26AndAbove'
 import { AVAX_COINGECKO_ID } from 'consts/coingecko'
 import { format } from 'date-fns'
 import { useBuy } from 'features/meld/hooks/useBuy'
@@ -324,13 +324,15 @@ const TrackTokenDetailScreen = (): JSX.Element => {
           <FavoriteBarButton
             isFavorite={isFavorite}
             onPress={handleFavorite}
-            style={isIOS26 ? { paddingHorizontal: 12 } : { paddingRight: 12 }}
+            style={
+              isIOS26AndAbove ? { paddingHorizontal: 12 } : { paddingRight: 12 }
+            }
           />
         )}
         <ShareBarButton
           onPress={handleShare}
           style={
-            isIOS26
+            isIOS26AndAbove
               ? { paddingHorizontal: 12 }
               : {
                   paddingRight: 12,

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

@@ -16,7 +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'
+import { isIOS26AndAbove } from 'common/utils/isIOS26AndAbove'
 
 const ConnectedSitesScreen = (): JSX.Element => {
   const {
@@ -170,7 +170,7 @@ const ConnectedSitesScreen = (): JSX.Element => {
 
   const renderHeaderRight = (): JSX.Element | null => {
     if (allApprovedDapps.length === 0) return null
-    if (isIOS26)
+    if (isIOS26AndAbove)
       return (
         <TouchableOpacity
           onPress={disconnectAll}

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

@@ -10,7 +10,7 @@ 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 { isIOS26AndAbove } from 'common/utils/isIOS26AndAbove'
 import { BrowserItem } from 'features/browser/components/BrowserItem'
 import { useSearchHistory } from 'features/browser/hooks/useSearchHistory'
 import { prepareFaviconToLoad } from 'features/browser/utils'
@@ -112,7 +112,7 @@ const HistoryScreen = (): JSX.Element => {
 
   const renderHeaderRight = (): JSX.Element | null => {
     if (!hasHistory) return null
-    if (isIOS26)
+    if (isIOS26AndAbove)
       return (
         <TouchableOpacity
           onPress={removeAll}