iOS 26 (#9047)

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

src/components/Dialog/index.tsx

@@ -38,7 +38,7 @@ import {
   type DialogOuterProps,
 } from '#/components/Dialog/types'
 import {createInput} from '#/components/forms/TextField'
-import {IS_ANDROID, IS_IOS} from '#/env'
+import {IS_ANDROID, IS_IOS, IS_LIQUID_GLASS} from '#/env'
 import {BottomSheet, BottomSheetSnapPoint} from '../../../modules/bottom-sheet'
 import {
   type BottomSheetSnapPointChangeEvent,
@@ -166,7 +166,8 @@ export function Outer({
   return (
     <BottomSheet
       ref={ref}
-      cornerRadius={20}
+      // device-bezel radius when undefined
+      cornerRadius={IS_LIQUID_GLASS ? undefined : 20}
       backgroundColor={t.atoms.bg.backgroundColor}
       {...nativeOptions}
       onSnapPointChange={onSnapPointChange}
@@ -181,6 +182,9 @@ export function Outer({
   )
 }
 
+/**
+ * @deprecated use `Dialog.ScrollableInner` instead
+ */
 export function Inner({children, style, header}: DialogInnerProps) {
   const insets = useSafeAreaInsets()
   return (
@@ -190,9 +194,9 @@ export function Inner({children, style, header}: DialogInnerProps) {
         style={[
           a.pt_2xl,
           a.px_xl,
-          {
-            paddingBottom: insets.bottom + insets.top,
-          },
+          IS_LIQUID_GLASS
+            ? a.pb_2xl
+            : {paddingBottom: insets.bottom + insets.top},
           style,
         ]}>
         {children}
@@ -253,7 +257,7 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
       <KeyboardAwareScrollView
         contentContainerStyle={[
           a.pt_2xl,
-          a.px_xl,
+          IS_LIQUID_GLASS ? a.px_2xl : a.px_xl,
           {paddingBottom},
           contentContainerStyle,
         ]}
@@ -342,7 +346,7 @@ export function FlatListFooter({children}: {children: React.ReactNode}) {
         a.pt_md,
         {
           paddingBottom: platform({
-            ios: tokens.space.md + bottom,
+            ios: tokens.space.md + bottom + (IS_LIQUID_GLASS ? top : 0),
             android: tokens.space.md + bottom + top,
           }),
         },

src/components/Dialog/shared.tsx

@@ -8,6 +8,7 @@ import {
 
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
+import {IS_LIQUID_GLASS} from '#/env'
 
 export function Header({
   renderLeft,
@@ -35,7 +36,7 @@ export function Header({
         a.flex_row,
         a.justify_center,
         a.align_center,
-        {minHeight: 50},
+        {minHeight: IS_LIQUID_GLASS ? 64 : 50},
         a.border_b,
         t.atoms.border_contrast_medium,
         t.atoms.bg,
@@ -44,11 +45,15 @@ export function Header({
         style,
       ]}>
       {renderLeft && (
-        <View style={[a.absolute, {left: 6}]}>{renderLeft()}</View>
+        <View style={[a.absolute, {left: IS_LIQUID_GLASS ? 12 : 6}]}>
+          {renderLeft()}
+        </View>
       )}
       {children}
       {renderRight && (
-        <View style={[a.absolute, {right: 6}]}>{renderRight()}</View>
+        <View style={[a.absolute, {right: IS_LIQUID_GLASS ? 12 : 6}]}>
+          {renderRight()}
+        </View>
       )}
     </View>
   )

src/components/Dialog/sheet-wrapper.ts

@@ -1,7 +1,7 @@
 import {useCallback} from 'react'
 import {SystemBars} from 'react-native-edge-to-edge'
 
-import {IS_IOS} from '#/env'
+import {IS_IOS, IS_LIQUID_GLASS} from '#/env'
 
 /**
  * If we're calling a system API like the image picker that opens a sheet
@@ -9,7 +9,7 @@ import {IS_IOS} from '#/env'
  */
 export function useSheetWrapper() {
   return useCallback(async <T>(promise: Promise<T>): Promise<T> => {
-    if (IS_IOS) {
+    if (IS_IOS && !IS_LIQUID_GLASS) {
       const entry = SystemBars.pushStackEntry({
         style: {
           statusBar: 'light',