Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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 app/(tabs)/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -577,7 +577,7 @@ function WalletScreenContent() {
animationType="slide"
onRequestClose={handleCancelEdit}
>
{isIOS18OrHigher() ? (
{isIOS26OrHigher() ? (
<LiquidGlassView variant="ultraThin" intensity={95} style={styles.modalOverlay}>
<View style={[styles.editModal, { backgroundColor: theme.colors.surface }]}>
<View style={styles.editModalHeader}>
Expand Down
2 changes: 1 addition & 1 deletion components/LiquidGlassView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down
2 changes: 1 addition & 1 deletion docs/DOCS_SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
32 changes: 16 additions & 16 deletions docs/archive/iOS26_LIQUID_GLASS.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
# 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

### Platform Detection

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';
Expand All @@ -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`
Expand All @@ -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

Expand All @@ -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
Expand All @@ -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

Expand All @@ -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)
22 changes: 11 additions & 11 deletions utils/platform.ts
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
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;
}

// 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;
}

/**
Expand All @@ -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';
}

Expand All @@ -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';
}

Expand All @@ -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';
}

Expand Down
Loading