diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 46d125cb..06953737 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -9,7 +9,7 @@ import { WALLET_COLOR_PALETTE } from '@/constants/wallet-colors'; import { useTabAnimation } from '@/hooks/use-tab-animation'; import { useWallet } from '@/hooks/wallet-store'; import { Wallet } from '@/types/wallet'; -import { isIOS18OrHigher } from '@/utils/platform'; +import { isIOS26OrHigher } from '@/utils/platform'; import { LinearGradient } from 'expo-linear-gradient'; import { Stack, router } from 'expo-router'; import { ArrowDownLeft, ArrowUpRight, Check, Eye, EyeOff, Plus, TrendingUp, WifiOff, X } from 'lucide-react-native'; @@ -577,7 +577,7 @@ function WalletScreenContent() { animationType="slide" onRequestClose={handleCancelEdit} > - {isIOS18OrHigher() ? ( + {isIOS26OrHigher() ? ( diff --git a/components/LiquidGlassView.tsx b/components/LiquidGlassView.tsx index b5330f79..c074000a 100644 --- a/components/LiquidGlassView.tsx +++ b/components/LiquidGlassView.tsx @@ -35,7 +35,7 @@ interface LiquidGlassViewProps { /** * LiquidGlassView component * - * Renders a blur effect with iOS 18+ liquid glass materials when available. + * Renders a blur effect with iOS 26+ liquid glass materials when available. * Falls back to standard blur on older iOS versions and renders a semi-transparent * view on Android. * diff --git a/docs/DOCS_SUMMARY.md b/docs/DOCS_SUMMARY.md index 4ea91c26..a0164e13 100644 --- a/docs/DOCS_SUMMARY.md +++ b/docs/DOCS_SUMMARY.md @@ -131,7 +131,7 @@ **Implementation:** - Platform detection using React Native `Platform` API -- Helper functions: `isIOS18OrHigher()`, `getLiquidGlassTint(isDark)` +- Helper functions: `isIOS26OrHigher()`, `getLiquidGlassTint(isDark)` - `LiquidGlassView` component for translucent backgrounds - Migration from `expo-router` Tabs to NativeTabs for iOS 26+ support diff --git a/docs/archive/iOS26_LIQUID_GLASS.md b/docs/archive/iOS26_LIQUID_GLASS.md index 6fb077a9..b04396eb 100644 --- a/docs/archive/iOS26_LIQUID_GLASS.md +++ b/docs/archive/iOS26_LIQUID_GLASS.md @@ -1,10 +1,10 @@ -# iOS 18 Liquid Glass UI Implementation +# iOS 26 Liquid Glass UI Implementation -This document describes the iOS 18 Liquid Glass UI feature implementation for the BitSleuth Wallet app. +This document describes the iOS 26 Liquid Glass UI feature implementation for the BitSleuth Wallet app. ## Overview -Starting with iOS 18, Apple introduced new system blur materials that create a "liquid glass" effect. These materials provide a modern, translucent appearance that adapts to the content behind them, creating depth and visual hierarchy in the UI. +Starting with iOS 26, Apple introduced new system blur materials that create a "liquid glass" effect. These materials provide a modern, translucent appearance that adapts to the content behind them, creating depth and visual hierarchy in the UI. ## Implementation @@ -12,14 +12,14 @@ Starting with iOS 18, Apple introduced new system blur materials that create a " The app detects iOS version using the `Platform` API from React Native. A utility module (`utils/platform.ts`) provides helper functions: -- `isIOS18OrHigher()`: Returns true if the device is running iOS 18 or later +- `isIOS26OrHigher()`: Returns true if the device is running iOS 26 or later - `getLiquidGlassTint(isDark)`: Returns the appropriate blur tint for chrome materials - `getThinMaterialTint(isDark)`: Returns the appropriate blur tint for thin materials - `getUltraThinMaterialTint(isDark)`: Returns the appropriate blur tint for ultra-thin materials ### LiquidGlassView Component -A reusable component (`components/LiquidGlassView.tsx`) wraps the `expo-blur` BlurView with iOS 18-aware logic: +A reusable component (`components/LiquidGlassView.tsx`) wraps the `expo-blur` BlurView with iOS 26-aware logic: ```tsx import { LiquidGlassView } from '@/components/LiquidGlassView'; @@ -45,17 +45,17 @@ The liquid glass effect has been applied to: 1. **Tab Bar Navigation** (`app/(tabs)/_layout.tsx`) - Uses the `LiquidGlassView` component with the 'chrome' variant - - Uses `systemChromeMaterialLight`/`systemChromeMaterialDark` on iOS 18+ + - Uses `systemChromeMaterialLight`/`systemChromeMaterialDark` on iOS 26+ - Provides a translucent, modern tab bar that shows content behind it - - Automatically falls back to solid background on iOS < 18 + - Automatically falls back to solid background on iOS < 26 2. **Modal Overlays** (`app/(tabs)/index.tsx`) - Edit wallet modal uses ultra-thin material for the backdrop - Creates a subtle blur effect while maintaining visibility of background content -### iOS 18 System Materials +### iOS 26 System Materials -The following blur styles are available on iOS 18+: +The following blur styles are available on iOS 26+: - `systemUltraThinMaterial` / `systemUltraThinMaterialLight` / `systemUltraThinMaterialDark` - `systemThinMaterial` / `systemThinMaterialLight` / `systemThinMaterialDark` @@ -65,7 +65,7 @@ The following blur styles are available on iOS 18+: ### Fallback Behavior -On iOS versions prior to 18: +On iOS versions prior to 26: - Standard blur tints are used ('light', 'dark', 'extraLight') - The visual effect is similar but uses the older blur API @@ -75,13 +75,13 @@ On Android: ## User Experience -For users on iOS 18 or later: +For users on iOS 26 or later: - Tab bar appears with a modern, translucent liquid glass effect - Modal overlays use subtle blur effects -- The UI feels more modern and in line with iOS 18 design language +- The UI feels more modern and in line with iOS 26 design language - Content behind translucent elements is slightly visible, creating depth -For users on iOS < 18 or Android: +For users on iOS < 26 or Android: - Standard blur effects or semi-transparent backgrounds are used - Functionality remains identical - Visual appearance is similar but uses older techniques @@ -96,11 +96,11 @@ For users on iOS < 18 or Android: ## Testing To test the liquid glass effect: -1. Run the app on iOS 18+ device or simulator +1. Run the app on iOS 26+ device or simulator 2. Navigate between tabs to see the translucent tab bar 3. Open the wallet edit modal to see the ultra-thin material overlay 4. Verify that content behind translucent elements is subtly visible -5. Test on iOS < 18 to ensure graceful fallback +5. Test on iOS < 26 to ensure graceful fallback ## Future Enhancements @@ -115,4 +115,4 @@ Potential areas for future liquid glass implementation: - [Expo Blur Documentation](https://docs.expo.dev/versions/latest/sdk/blur-view/) - [Apple Human Interface Guidelines - Materials](https://developer.apple.com/design/human-interface-guidelines/materials) -- [iOS 18 Release Notes](https://developer.apple.com/documentation/ios-ipados-release-notes) +- [iOS 26 Release Notes](https://developer.apple.com/documentation/ios-ipados-release-notes) diff --git a/utils/platform.ts b/utils/platform.ts index 2333ee2d..5eb22992 100644 --- a/utils/platform.ts +++ b/utils/platform.ts @@ -1,10 +1,10 @@ import { Platform } from 'react-native'; /** - * Check if the device is running iOS 18 or higher - * @returns {boolean} True if iOS 18+, false otherwise + * Check if the device is running iOS 26 or higher + * @returns {boolean} True if iOS 26+, false otherwise */ -export function isIOS18OrHigher(): boolean { +export function isIOS26OrHigher(): boolean { if (Platform.OS !== 'ios') { return false; } @@ -12,12 +12,12 @@ export function isIOS18OrHigher(): boolean { // Get iOS version const version = Platform.Version; - // Platform.Version on iOS returns a string like "18.0" or a number + // Platform.Version on iOS returns a string like "26.0" or a number const majorVersion = typeof version === 'string' ? parseInt(version.split('.')[0], 10) : version; - return majorVersion >= 18; + return majorVersion >= 26; } /** @@ -30,17 +30,17 @@ export function isIOS(): boolean { /** * Get the appropriate blur tint based on iOS version and theme - * For iOS 18+, use the new system materials for liquid glass effect + * For iOS 26+, use the new system materials for liquid glass effect * @param isDark - Whether dark mode is enabled * @returns {string} The blur tint to use */ export function getLiquidGlassTint(isDark: boolean): string { - if (isIOS18OrHigher()) { - // Use the new iOS 18 system materials for liquid glass effect + if (isIOS26OrHigher()) { + // Use the new iOS 26 system materials for liquid glass effect return isDark ? 'systemChromeMaterialDark' : 'systemChromeMaterialLight'; } - // Fallback to standard blur for iOS < 18 + // Fallback to standard blur for iOS < 26 return isDark ? 'dark' : 'light'; } @@ -50,7 +50,7 @@ export function getLiquidGlassTint(isDark: boolean): string { * @returns {string} The blur tint to use */ export function getUltraThinMaterialTint(isDark: boolean): string { - if (isIOS18OrHigher()) { + if (isIOS26OrHigher()) { return isDark ? 'systemUltraThinMaterialDark' : 'systemUltraThinMaterialLight'; } @@ -63,7 +63,7 @@ export function getUltraThinMaterialTint(isDark: boolean): string { * @returns {string} The blur tint to use */ export function getThinMaterialTint(isDark: boolean): string { - if (isIOS18OrHigher()) { + if (isIOS26OrHigher()) { return isDark ? 'systemThinMaterialDark' : 'systemThinMaterialLight'; }