authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-08-30 23:47:39-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-30 23:47:39-07:00
log9b2d04317c68233782e0630464ac86d77d0686f3
treef53842d3df8b705d7185b508febbe0d23b75eec2
parente9c4775e8738381140af4e5248507b15fc1cd491
signature Signed by PGP key B5690EEEBB952194

fix(mobile): replace Callstack glass with Expo glass (#8862)

5 files changed, 39 insertions(+), 50 deletions(-)

apps/mobile/package.json-1
......@@ -45,7 +45,6 @@
4545 "typecheck": "tsc --noEmit"
4646 },
4747 "dependencies": {
48 "@callstack/liquid-glass": "^0.7.1",
4948 "@clerk/expo": "catalog:",
5049 "@effect/atom-react": "catalog:",
5150 "@expo-google-fonts/dm-sans": "^0.4.2",
apps/mobile/src/features/threads/GitActionProgressOverlay.tsx+9-8
......@@ -1,5 +1,5 @@
11import * as Haptics from "expo-haptics";
2import { isLiquidGlassSupported, LiquidGlassView } from "@callstack/liquid-glass";
2import { GlassView } from "expo-glass-effect";
33import { SymbolView } from "../../components/AppSymbol";
44import { useCallback, useEffect, useRef } from "react";
55import { ActivityIndicator, Pressable, StyleSheet, useColorScheme, View } from "react-native";
......@@ -11,11 +11,12 @@ import { APP_BAR_HEIGHT } from "../../lib/layoutMetrics";
1111import { themeColorWithAlpha } from "../../lib/mobileTheme";
1212import { tryOpenExternalUrl } from "../../lib/openExternalUrl";
1313import { useUniwindTheme } from "../../lib/useUniwindTheme";
14import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
1415import type { GitActionProgress } from "../../state/use-vcs-action-state";
1516
1617const OVERLAY_LAYOUT_TRANSITION = LinearTransition.duration(220);
1718const OVERLAY_TOP_GAP = 8;
18const AnimatedLiquidGlassView = Animated.createAnimatedComponent(LiquidGlassView);
19const AnimatedGlassView = Animated.createAnimatedComponent(GlassView);
1920
2021export function GitActionProgressOverlay(props: {
2122 readonly progress: GitActionProgress;
......@@ -52,7 +53,7 @@ export function GitActionProgressOverlay(props: {
5253
5354 return (
5455 <Animated.View
55 entering={isLiquidGlassSupported ? undefined : FadeIn.duration(200)}
56 entering={NATIVE_LIQUID_GLASS_SUPPORTED ? undefined : FadeIn.duration(200)}
5657 exiting={FadeOut.duration(150)}
5758 className="absolute inset-x-3 z-[100]"
5859 style={{ top: insets.top + APP_BAR_HEIGHT + OVERLAY_TOP_GAP }}
......@@ -102,7 +103,7 @@ function OverlayContent(props: { readonly progress: GitActionProgress }) {
102103 </>
103104 );
104105
105 if (isLiquidGlassSupported) {
106 if (NATIVE_LIQUID_GLASS_SUPPORTED) {
106107 return (
107108 <Animated.View
108109 layout={OVERLAY_LAYOUT_TRANSITION}
......@@ -116,10 +117,10 @@ function OverlayContent(props: { readonly progress: GitActionProgress }) {
116117 shadowRadius: 18,
117118 }}
118119 >
119 <AnimatedLiquidGlassView
120 <AnimatedGlassView
120121 colorScheme={isDarkMode ? "dark" : "light"}
121 effect="regular"
122 interactive
122 glassEffectStyle="regular"
123 isInteractive
123124 layout={OVERLAY_LAYOUT_TRANSITION}
124125 tintColor={glassTint}
125126 style={{
......@@ -136,7 +137,7 @@ function OverlayContent(props: { readonly progress: GitActionProgress }) {
136137 >
137138 {content}
138139 </Animated.View>
139 </AnimatedLiquidGlassView>
140 </AnimatedGlassView>
140141 </Animated.View>
141142 );
142143 }
apps/mobile/src/features/threads/floating-working-control.tsx+28-25
......@@ -1,8 +1,4 @@
1import {
2 isLiquidGlassSupported,
3 LiquidGlassContainerView,
4 LiquidGlassView,
5} from "@callstack/liquid-glass";
1import { GlassContainer, GlassView } from "expo-glass-effect";
62import { useEffect, useState } from "react";
73import { Text as SystemText, View } from "react-native";
84import Animated, {
......@@ -18,6 +14,7 @@ import { withUniwind } from "uniwind";
1814
1915import { AppText as Text } from "../../components/AppText";
2016import { ControlPill } from "../../components/ControlPill";
17import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
2118
2219const CONTROL_HEIGHT = 44;
2320const CONTROL_COMPOSER_GAP = 8;
......@@ -31,9 +28,15 @@ const CONTROL_TIMING = {
3128} as const;
3229const CONTROL_SEPARATION = (16 + CONTROL_HEIGHT) / 2;
3330
34const UniwindLiquidGlassView = withUniwind(LiquidGlassView);
35const UniwindLiquidGlassContainerView = withUniwind(LiquidGlassContainerView);
36const AnimatedLiquidGlassView = Animated.createAnimatedComponent(UniwindLiquidGlassView);
31// Expo reapplies glass after native layout and window reattachment, when UIKit
32// can otherwise leave the label visible but lose the material behind it.
33const UniwindGlassView = withUniwind(GlassView, {
34 style: { fromClassName: "className" },
35});
36const UniwindGlassContainer = withUniwind(GlassContainer, {
37 style: { fromClassName: "className" },
38});
39const AnimatedGlassView = Animated.createAnimatedComponent(UniwindGlassView);
3740
3841export const FLOATING_WORKING_CONTROL_COVERAGE = CONTROL_HEIGHT + CONTROL_COMPOSER_GAP;
3942
......@@ -68,29 +71,29 @@ export function FloatingWorkingControl(props: {
6871 pointerEvents="box-none"
6972 className="absolute left-0 right-0 z-20 items-center"
7073 style={{ top: -FLOATING_WORKING_CONTROL_COVERAGE }}
71 entering={isLiquidGlassSupported ? undefined : CONTROL_ENTERING}
72 exiting={isLiquidGlassSupported ? undefined : CONTROL_EXITING}
74 entering={NATIVE_LIQUID_GLASS_SUPPORTED ? undefined : CONTROL_ENTERING}
75 exiting={NATIVE_LIQUID_GLASS_SUPPORTED ? undefined : CONTROL_EXITING}
7376 >
74 {props.startedAt !== null && isLiquidGlassSupported ? (
75 <UniwindLiquidGlassContainerView
77 {props.startedAt !== null && NATIVE_LIQUID_GLASS_SUPPORTED ? (
78 <UniwindGlassContainer
7679 spacing={GLASS_MERGE_SPACING}
7780 pointerEvents="box-none"
7881 className="flex-row items-center gap-4"
7982 >
80 <AnimatedLiquidGlassView
83 <AnimatedGlassView
8184 colorScheme={props.colorScheme}
82 effect="regular"
85 glassEffectStyle="regular"
8386 pointerEvents="none"
8487 className="h-11 justify-center overflow-hidden rounded-full"
8588 style={timerStyle}
8689 >
8790 <WorkingDuration startedAt={props.startedAt} />
88 </AnimatedLiquidGlassView>
91 </AnimatedGlassView>
8992
90 <AnimatedLiquidGlassView
93 <AnimatedGlassView
9194 colorScheme={props.colorScheme}
92 effect="regular"
93 interactive
95 glassEffectStyle="regular"
96 isInteractive
9497 pointerEvents={props.showScrollToEnd ? "auto" : "none"}
9598 accessibilityElementsHidden={!props.showScrollToEnd}
9699 importantForAccessibility={props.showScrollToEnd ? "auto" : "no-hide-descendants"}
......@@ -100,8 +103,8 @@ export function FloatingWorkingControl(props: {
100103 <Animated.View style={arrowContentStyle}>
101104 <ScrollToEndButton disabled={!props.showScrollToEnd} onPress={props.onScrollToEnd} />
102105 </Animated.View>
103 </AnimatedLiquidGlassView>
104 </UniwindLiquidGlassContainerView>
106 </AnimatedGlassView>
107 </UniwindGlassContainer>
105108 ) : props.startedAt !== null ? (
106109 <View pointerEvents="box-none" className="flex-row items-center gap-4">
107110 <Animated.View
......@@ -128,15 +131,15 @@ export function FloatingWorkingControl(props: {
128131 />
129132 </Animated.View>
130133 </View>
131 ) : isLiquidGlassSupported ? (
132 <UniwindLiquidGlassView
134 ) : NATIVE_LIQUID_GLASS_SUPPORTED ? (
135 <UniwindGlassView
133136 colorScheme={props.colorScheme}
134 effect="regular"
135 interactive
137 glassEffectStyle="regular"
138 isInteractive
136139 className="h-11 w-11 items-center justify-center overflow-hidden rounded-full"
137140 >
138141 <ScrollToEndButton onPress={props.onScrollToEnd} />
139 </UniwindLiquidGlassView>
142 </UniwindGlassView>
140143 ) : (
141144 <ControlPill
142145 accessibilityLabel="Scroll to end"
docs/user/mobile-appearance.md+2-2
......@@ -4,8 +4,8 @@ T3 Code Mobile includes the T3 Code, T3 Chat, Grove, Ocean, Ember, and Iris them
44light and dark colors that apply throughout the app, including code reviews, file previews, the
55terminal, native headers, and sheets.
66
7On supported iOS versions, the new-task and thread composers use the system glass material.
8Other platforms use a themed background.
7On supported iOS versions, the new-task and thread composers, working timer, and scroll-to-end
8button use the system glass material. Other platforms use a themed background.
99
1010To change themes:
1111
pnpm-lock.yaml-14
......@@ -211,9 +211,6 @@ importers:
211211
212212 apps/mobile:
213213 dependencies:
214 '@callstack/liquid-glass':
215 specifier: ^0.7.1
216 version: 0.7.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7)(bufferutil@4.1.0)(utf-8-validate@6.0.6))(@types/react@19.2.16)(bufferutil@4.1.0)(react@19.2.3)(utf-8-validate@6.0.6))(react@19.2.3)
217214 '@clerk/expo':
218215 specifier: 4.2.0
219216 version: 4.2.0(patch_hash=72e426f44fc1cde16fc2cbba3d1e96cdca7c6d957faa73d0fe6b43948608a6c1)(1fcd0592788ddcf326eeeb90d875ed47)
......@@ -1700,12 +1697,6 @@ packages:
17001697 cpu: [x64]
17011698 os: [win32]
17021699
1703 '@callstack/liquid-glass@0.7.1':
1704 resolution: {integrity: sha512-N2rzs8g3kneI5G/98AZdVtjc6OUFBBFwPxVGVMoXUEI7QiioB4+aWwbImg5h8Z3Vb/T+fgLYWmmNhi27wHwE4g==}
1705 peerDependencies:
1706 react: '*'
1707 react-native: '*'
1708
17091700 '@capsizecss/unpack@4.0.1':
17101701 resolution: {integrity: sha512-CuNiSqg7+e1cO/GjffyMOm5Tt2jUF9CWHHnvQ/UkqvtkGfHdgwEC0wpmq7fkN3gxwpRnrAN0WzO3vREKmNolMQ==}
17111702 engines: {node: '>=18'}
......@@ -11398,11 +11389,6 @@ snapshots:
1139811389 '@bruits/satteri-win32-x64-msvc@0.9.3':
1139911390 optional: true
1140011391
11401 '@callstack/liquid-glass@0.7.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7)(bufferutil@4.1.0)(utf-8-validate@6.0.6))(@types/react@19.2.16)(bufferutil@4.1.0)(react@19.2.3)(utf-8-validate@6.0.6))(react@19.2.3)':
11402 dependencies:
11403 react: 19.2.3
11404 react-native: 0.86.3(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7)(bufferutil@4.1.0)(utf-8-validate@6.0.6))(@types/react@19.2.16)(bufferutil@4.1.0)(react@19.2.3)(utf-8-validate@6.0.6)
11405
1140611392 '@capsizecss/unpack@4.0.1':
1140711393 dependencies:
1140811394 fontkitten: 1.0.3