Commit 9b2d043

Browse files
juliusmarmingejuliusmarminge
authored
fix(mobile): replace Callstack glass with Expo glass (#8862)
1 parent e9c4775 commit 9b2d043

5 files changed

Lines changed: 39 additions & 50 deletions

File tree

‎apps/mobile/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -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‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import*asHapticsfrom"expo-haptics";
2-
import{isLiquidGlassSupported,LiquidGlassView}from"@callstack/liquid-glass";
2+
import{GlassView}from"expo-glass-effect";
33
import{SymbolView}from"../../components/AppSymbol";
44
import{useCallback,useEffect,useRef}from"react";
55
import{ActivityIndicator,Pressable,StyleSheet,useColorScheme,View}from"react-native";
@@ -11,11 +11,12 @@ import { APP_BAR_HEIGHT } from "../../lib/layoutMetrics";
1111
import{themeColorWithAlpha}from"../../lib/mobileTheme";
1212
import{tryOpenExternalUrl}from"../../lib/openExternalUrl";
1313
import{useUniwindTheme}from"../../lib/useUniwindTheme";
14+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
1415
importtype{GitActionProgress}from"../../state/use-vcs-action-state";
1516

1617
constOVERLAY_LAYOUT_TRANSITION=LinearTransition.duration(220);
1718
constOVERLAY_TOP_GAP=8;
18-
constAnimatedLiquidGlassView=Animated.createAnimatedComponent(LiquidGlassView);
19+
constAnimatedGlassView=Animated.createAnimatedComponent(GlassView);
1920

2021
exportfunctionGitActionProgressOverlay(props: {
2122
readonlyprogress: 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‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
import{
2-
isLiquidGlassSupported,
3-
LiquidGlassContainerView,
4-
LiquidGlassView,
5-
}from"@callstack/liquid-glass";
1+
import{GlassContainer,GlassView}from"expo-glass-effect";
62
import{useEffect,useState}from"react";
73
import{TextasSystemText,View}from"react-native";
84
importAnimated,{
@@ -18,6 +14,7 @@ import { withUniwind } from "uniwind";
1814

1915
import{AppTextasText}from"../../components/AppText";
2016
import{ControlPill}from"../../components/ControlPill";
17+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
2118

2219
constCONTROL_HEIGHT=44;
2320
constCONTROL_COMPOSER_GAP=8;
@@ -31,9 +28,15 @@ const CONTROL_TIMING = {
3128
}asconst;
3229
constCONTROL_SEPARATION=(16+CONTROL_HEIGHT)/2;
3330

34-
constUniwindLiquidGlassView=withUniwind(LiquidGlassView);
35-
constUniwindLiquidGlassContainerView=withUniwind(LiquidGlassContainerView);
36-
constAnimatedLiquidGlassView=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.
33+
constUniwindGlassView=withUniwind(GlassView,{
34+
style: {fromClassName: "className"},
35+
});
36+
constUniwindGlassContainer=withUniwind(GlassContainer,{
37+
style: {fromClassName: "className"},
38+
});
39+
constAnimatedGlassView=Animated.createAnimatedComponent(UniwindGlassView);
3740

3841
exportconstFLOATING_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
<WorkingDurationstartedAt={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.Viewstyle={arrowContentStyle}>
101104
<ScrollToEndButtondisabled={!props.showScrollToEnd}onPress={props.onScrollToEnd}/>
102105
</Animated.View>
103-
</AnimatedLiquidGlassView>
104-
</UniwindLiquidGlassContainerView>
106+
</AnimatedGlassView>
107+
</UniwindGlassContainer>
105108
) : props.startedAt!==null ? (
106109
<ViewpointerEvents="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
<ScrollToEndButtononPress={props.onScrollToEnd}/>
139-
</UniwindLiquidGlassView>
142+
</UniwindGlassView>
140143
) : (
141144
<ControlPill
142145
accessibilityLabel="Scroll to end"

‎docs/user/mobile-appearance.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ T3 Code Mobile includes the T3 Code, T3 Chat, Grove, Ocean, Ember, and Iris them
44
light and dark colors that apply throughout the app, including code reviews, file previews, the
55
terminal, native headers, and sheets.
66

7-
On supported iOS versions, the new-task and thread composers use the system glass material.
8-
Other platforms use a themed background.
7+
On supported iOS versions, the new-task and thread composers, working timer, and scroll-to-end
8+
button use the system glass material. Other platforms use a themed background.
99

1010
To change themes:
1111

‎pnpm-lock.yaml‎

Lines changed: 0 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Commit 9b2d043
Browse files
juliusmarmingejuliusmarminge
authored
fix(mobile): replace Callstack glass with Expo glass (#8862)
1 parent e9c4775 commit 9b2d043
5 files changed
Lines changed: 39 additions & 50 deletions
File tree
‎apps/mobile/package.json‎
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -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‎
Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import*asHapticsfrom"expo-haptics";
2-
import{isLiquidGlassSupported,LiquidGlassView}from"@callstack/liquid-glass";
2+
import{GlassView}from"expo-glass-effect";
33
import{SymbolView}from"../../components/AppSymbol";
44
import{useCallback,useEffect,useRef}from"react";
55
import{ActivityIndicator,Pressable,StyleSheet,useColorScheme,View}from"react-native";
@@ -11,11 +11,12 @@ import { APP_BAR_HEIGHT } from "../../lib/layoutMetrics";
1111
import{themeColorWithAlpha}from"../../lib/mobileTheme";
1212
import{tryOpenExternalUrl}from"../../lib/openExternalUrl";
1313
import{useUniwindTheme}from"../../lib/useUniwindTheme";
14+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
1415
importtype{GitActionProgress}from"../../state/use-vcs-action-state";
1516

1617
constOVERLAY_LAYOUT_TRANSITION=LinearTransition.duration(220);
1718
constOVERLAY_TOP_GAP=8;
18-
constAnimatedLiquidGlassView=Animated.createAnimatedComponent(LiquidGlassView);
19+
constAnimatedGlassView=Animated.createAnimatedComponent(GlassView);
1920

2021
exportfunctionGitActionProgressOverlay(props: {
2122
readonlyprogress: 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‎
Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
import{
2-
isLiquidGlassSupported,
3-
LiquidGlassContainerView,
4-
LiquidGlassView,
5-
}from"@callstack/liquid-glass";
1+
import{GlassContainer,GlassView}from"expo-glass-effect";
62
import{useEffect,useState}from"react";
73
import{TextasSystemText,View}from"react-native";
84
importAnimated,{
@@ -18,6 +14,7 @@ import { withUniwind } from "uniwind";
1814

1915
import{AppTextasText}from"../../components/AppText";
2016
import{ControlPill}from"../../components/ControlPill";
17+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
2118

2219
constCONTROL_HEIGHT=44;
2320
constCONTROL_COMPOSER_GAP=8;
@@ -31,9 +28,15 @@ const CONTROL_TIMING = {
3128
}asconst;
3229
constCONTROL_SEPARATION=(16+CONTROL_HEIGHT)/2;
3330

34-
constUniwindLiquidGlassView=withUniwind(LiquidGlassView);
35-
constUniwindLiquidGlassContainerView=withUniwind(LiquidGlassContainerView);
36-
constAnimatedLiquidGlassView=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.
33+
constUniwindGlassView=withUniwind(GlassView,{
34+
style: {fromClassName: "className"},
35+
});
36+
constUniwindGlassContainer=withUniwind(GlassContainer,{
37+
style: {fromClassName: "className"},
38+
});
39+
constAnimatedGlassView=Animated.createAnimatedComponent(UniwindGlassView);
3740

3841
exportconstFLOATING_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
<WorkingDurationstartedAt={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.Viewstyle={arrowContentStyle}>
101104
<ScrollToEndButtondisabled={!props.showScrollToEnd}onPress={props.onScrollToEnd}/>
102105
</Animated.View>
103-
</AnimatedLiquidGlassView>
104-
</UniwindLiquidGlassContainerView>
106+
</AnimatedGlassView>
107+
</UniwindGlassContainer>
105108
) : props.startedAt!==null ? (
106109
<ViewpointerEvents="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
<ScrollToEndButtononPress={props.onScrollToEnd}/>
139-
</UniwindLiquidGlassView>
142+
</UniwindGlassView>
140143
) : (
141144
<ControlPill
142145
accessibilityLabel="Scroll to end"
‎docs/user/mobile-appearance.md‎
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ T3 Code Mobile includes the T3 Code, T3 Chat, Grove, Ocean, Ember, and Iris them
44
light and dark colors that apply throughout the app, including code reviews, file previews, the
55
terminal, native headers, and sheets.
66

7-
On supported iOS versions, the new-task and thread composers use the system glass material.
8-
Other platforms use a themed background.
7+
On supported iOS versions, the new-task and thread composers, working timer, and scroll-to-end
8+
button use the system glass material. Other platforms use a themed background.
99

1010
To change themes:
1111

‎pnpm-lock.yaml‎
Lines changed: 0 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit 9b2d043
Browse files
juliusmarmingejuliusmarminge
authored
fix(mobile): replace Callstack glass with Expo glass (#8862)
1 parent e9c4775 commit 9b2d043
5 files changed
Lines changed: 39 additions & 50 deletions
File tree
‎apps/mobile/package.json‎
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -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‎
Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import*asHapticsfrom"expo-haptics";
2-
import{isLiquidGlassSupported,LiquidGlassView}from"@callstack/liquid-glass";
2+
import{GlassView}from"expo-glass-effect";
33
import{SymbolView}from"../../components/AppSymbol";
44
import{useCallback,useEffect,useRef}from"react";
55
import{ActivityIndicator,Pressable,StyleSheet,useColorScheme,View}from"react-native";
@@ -11,11 +11,12 @@ import { APP_BAR_HEIGHT } from "../../lib/layoutMetrics";
1111
import{themeColorWithAlpha}from"../../lib/mobileTheme";
1212
import{tryOpenExternalUrl}from"../../lib/openExternalUrl";
1313
import{useUniwindTheme}from"../../lib/useUniwindTheme";
14+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
1415
importtype{GitActionProgress}from"../../state/use-vcs-action-state";
1516

1617
constOVERLAY_LAYOUT_TRANSITION=LinearTransition.duration(220);
1718
constOVERLAY_TOP_GAP=8;
18-
constAnimatedLiquidGlassView=Animated.createAnimatedComponent(LiquidGlassView);
19+
constAnimatedGlassView=Animated.createAnimatedComponent(GlassView);
1920

2021
exportfunctionGitActionProgressOverlay(props: {
2122
readonlyprogress: 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‎
Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
import{
2-
isLiquidGlassSupported,
3-
LiquidGlassContainerView,
4-
LiquidGlassView,
5-
}from"@callstack/liquid-glass";
1+
import{GlassContainer,GlassView}from"expo-glass-effect";
62
import{useEffect,useState}from"react";
73
import{TextasSystemText,View}from"react-native";
84
importAnimated,{
@@ -18,6 +14,7 @@ import { withUniwind } from "uniwind";
1814

1915
import{AppTextasText}from"../../components/AppText";
2016
import{ControlPill}from"../../components/ControlPill";
17+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
2118

2219
constCONTROL_HEIGHT=44;
2320
constCONTROL_COMPOSER_GAP=8;
@@ -31,9 +28,15 @@ const CONTROL_TIMING = {
3128
}asconst;
3229
constCONTROL_SEPARATION=(16+CONTROL_HEIGHT)/2;
3330

34-
constUniwindLiquidGlassView=withUniwind(LiquidGlassView);
35-
constUniwindLiquidGlassContainerView=withUniwind(LiquidGlassContainerView);
36-
constAnimatedLiquidGlassView=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.
33+
constUniwindGlassView=withUniwind(GlassView,{
34+
style: {fromClassName: "className"},
35+
});
36+
constUniwindGlassContainer=withUniwind(GlassContainer,{
37+
style: {fromClassName: "className"},
38+
});
39+
constAnimatedGlassView=Animated.createAnimatedComponent(UniwindGlassView);
3740

3841
exportconstFLOATING_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
<WorkingDurationstartedAt={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.Viewstyle={arrowContentStyle}>
101104
<ScrollToEndButtondisabled={!props.showScrollToEnd}onPress={props.onScrollToEnd}/>
102105
</Animated.View>
103-
</AnimatedLiquidGlassView>
104-
</UniwindLiquidGlassContainerView>
106+
</AnimatedGlassView>
107+
</UniwindGlassContainer>
105108
) : props.startedAt!==null ? (
106109
<ViewpointerEvents="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
<ScrollToEndButtononPress={props.onScrollToEnd}/>
139-
</UniwindLiquidGlassView>
142+
</UniwindGlassView>
140143
) : (
141144
<ControlPill
142145
accessibilityLabel="Scroll to end"
‎docs/user/mobile-appearance.md‎
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ T3 Code Mobile includes the T3 Code, T3 Chat, Grove, Ocean, Ember, and Iris them
44
light and dark colors that apply throughout the app, including code reviews, file previews, the
55
terminal, native headers, and sheets.
66

7-
On supported iOS versions, the new-task and thread composers use the system glass material.
8-
Other platforms use a themed background.
7+
On supported iOS versions, the new-task and thread composers, working timer, and scroll-to-end
8+
button use the system glass material. Other platforms use a themed background.
99

1010
To change themes:
1111

‎pnpm-lock.yaml‎
Lines changed: 0 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit 9b2d043
Browse files
juliusmarmingejuliusmarminge
authored
fix(mobile): replace Callstack glass with Expo glass (#8862)
1 parent e9c4775 commit 9b2d043
5 files changed
Lines changed: 39 additions & 50 deletions
File tree
‎apps/mobile/package.json‎
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -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‎
Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import*asHapticsfrom"expo-haptics";
2-
import{isLiquidGlassSupported,LiquidGlassView}from"@callstack/liquid-glass";
2+
import{GlassView}from"expo-glass-effect";
33
import{SymbolView}from"../../components/AppSymbol";
44
import{useCallback,useEffect,useRef}from"react";
55
import{ActivityIndicator,Pressable,StyleSheet,useColorScheme,View}from"react-native";
@@ -11,11 +11,12 @@ import { APP_BAR_HEIGHT } from "../../lib/layoutMetrics";
1111
import{themeColorWithAlpha}from"../../lib/mobileTheme";
1212
import{tryOpenExternalUrl}from"../../lib/openExternalUrl";
1313
import{useUniwindTheme}from"../../lib/useUniwindTheme";
14+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
1415
importtype{GitActionProgress}from"../../state/use-vcs-action-state";
1516

1617
constOVERLAY_LAYOUT_TRANSITION=LinearTransition.duration(220);
1718
constOVERLAY_TOP_GAP=8;
18-
constAnimatedLiquidGlassView=Animated.createAnimatedComponent(LiquidGlassView);
19+
constAnimatedGlassView=Animated.createAnimatedComponent(GlassView);
1920

2021
exportfunctionGitActionProgressOverlay(props: {
2122
readonlyprogress: 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‎
Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
import{
2-
isLiquidGlassSupported,
3-
LiquidGlassContainerView,
4-
LiquidGlassView,
5-
}from"@callstack/liquid-glass";
1+
import{GlassContainer,GlassView}from"expo-glass-effect";
62
import{useEffect,useState}from"react";
73
import{TextasSystemText,View}from"react-native";
84
importAnimated,{
@@ -18,6 +14,7 @@ import { withUniwind } from "uniwind";
1814

1915
import{AppTextasText}from"../../components/AppText";
2016
import{ControlPill}from"../../components/ControlPill";
17+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
2118

2219
constCONTROL_HEIGHT=44;
2320
constCONTROL_COMPOSER_GAP=8;
@@ -31,9 +28,15 @@ const CONTROL_TIMING = {
3128
}asconst;
3229
constCONTROL_SEPARATION=(16+CONTROL_HEIGHT)/2;
3330

34-
constUniwindLiquidGlassView=withUniwind(LiquidGlassView);
35-
constUniwindLiquidGlassContainerView=withUniwind(LiquidGlassContainerView);
36-
constAnimatedLiquidGlassView=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.
33+
constUniwindGlassView=withUniwind(GlassView,{
34+
style: {fromClassName: "className"},
35+
});
36+
constUniwindGlassContainer=withUniwind(GlassContainer,{
37+
style: {fromClassName: "className"},
38+
});
39+
constAnimatedGlassView=Animated.createAnimatedComponent(UniwindGlassView);
3740

3841
exportconstFLOATING_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
<WorkingDurationstartedAt={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.Viewstyle={arrowContentStyle}>
101104
<ScrollToEndButtondisabled={!props.showScrollToEnd}onPress={props.onScrollToEnd}/>
102105
</Animated.View>
103-
</AnimatedLiquidGlassView>
104-
</UniwindLiquidGlassContainerView>
106+
</AnimatedGlassView>
107+
</UniwindGlassContainer>
105108
) : props.startedAt!==null ? (
106109
<ViewpointerEvents="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
<ScrollToEndButtononPress={props.onScrollToEnd}/>
139-
</UniwindLiquidGlassView>
142+
</UniwindGlassView>
140143
) : (
141144
<ControlPill
142145
accessibilityLabel="Scroll to end"
‎docs/user/mobile-appearance.md‎
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ T3 Code Mobile includes the T3 Code, T3 Chat, Grove, Ocean, Ember, and Iris them
44
light and dark colors that apply throughout the app, including code reviews, file previews, the
55
terminal, native headers, and sheets.
66

7-
On supported iOS versions, the new-task and thread composers use the system glass material.
8-
Other platforms use a themed background.
7+
On supported iOS versions, the new-task and thread composers, working timer, and scroll-to-end
8+
button use the system glass material. Other platforms use a themed background.
99

1010
To change themes:
1111

‎pnpm-lock.yaml‎
Lines changed: 0 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Commit 9b2d043
Browse files
juliusmarmingejuliusmarminge
authored
fix(mobile): replace Callstack glass with Expo glass (#8862)
1 parent e9c4775 commit 9b2d043
5 files changed
Lines changed: 39 additions & 50 deletions
File tree
‎apps/mobile/package.json‎
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -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‎
Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import*asHapticsfrom"expo-haptics";
2-
import{isLiquidGlassSupported,LiquidGlassView}from"@callstack/liquid-glass";
2+
import{GlassView}from"expo-glass-effect";
33
import{SymbolView}from"../../components/AppSymbol";
44
import{useCallback,useEffect,useRef}from"react";
55
import{ActivityIndicator,Pressable,StyleSheet,useColorScheme,View}from"react-native";
@@ -11,11 +11,12 @@ import { APP_BAR_HEIGHT } from "../../lib/layoutMetrics";
1111
import{themeColorWithAlpha}from"../../lib/mobileTheme";
1212
import{tryOpenExternalUrl}from"../../lib/openExternalUrl";
1313
import{useUniwindTheme}from"../../lib/useUniwindTheme";
14+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
1415
importtype{GitActionProgress}from"../../state/use-vcs-action-state";
1516

1617
constOVERLAY_LAYOUT_TRANSITION=LinearTransition.duration(220);
1718
constOVERLAY_TOP_GAP=8;
18-
constAnimatedLiquidGlassView=Animated.createAnimatedComponent(LiquidGlassView);
19+
constAnimatedGlassView=Animated.createAnimatedComponent(GlassView);
1920

2021
exportfunctionGitActionProgressOverlay(props: {
2122
readonlyprogress: 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‎
Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
import{
2-
isLiquidGlassSupported,
3-
LiquidGlassContainerView,
4-
LiquidGlassView,
5-
}from"@callstack/liquid-glass";
1+
import{GlassContainer,GlassView}from"expo-glass-effect";
62
import{useEffect,useState}from"react";
73
import{TextasSystemText,View}from"react-native";
84
importAnimated,{
@@ -18,6 +14,7 @@ import { withUniwind } from "uniwind";
1814

1915
import{AppTextasText}from"../../components/AppText";
2016
import{ControlPill}from"../../components/ControlPill";
17+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
2118

2219
constCONTROL_HEIGHT=44;
2320
constCONTROL_COMPOSER_GAP=8;
@@ -31,9 +28,15 @@ const CONTROL_TIMING = {
3128
}asconst;
3229
constCONTROL_SEPARATION=(16+CONTROL_HEIGHT)/2;
3330

34-
constUniwindLiquidGlassView=withUniwind(LiquidGlassView);
35-
constUniwindLiquidGlassContainerView=withUniwind(LiquidGlassContainerView);
36-
constAnimatedLiquidGlassView=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.
33+
constUniwindGlassView=withUniwind(GlassView,{
34+
style: {fromClassName: "className"},
35+
});
36+
constUniwindGlassContainer=withUniwind(GlassContainer,{
37+
style: {fromClassName: "className"},
38+
});
39+
constAnimatedGlassView=Animated.createAnimatedComponent(UniwindGlassView);
3740

3841
exportconstFLOATING_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
<WorkingDurationstartedAt={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.Viewstyle={arrowContentStyle}>
101104
<ScrollToEndButtondisabled={!props.showScrollToEnd}onPress={props.onScrollToEnd}/>
102105
</Animated.View>
103-
</AnimatedLiquidGlassView>
104-
</UniwindLiquidGlassContainerView>
106+
</AnimatedGlassView>
107+
</UniwindGlassContainer>
105108
) : props.startedAt!==null ? (
106109
<ViewpointerEvents="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
<ScrollToEndButtononPress={props.onScrollToEnd}/>
139-
</UniwindLiquidGlassView>
142+
</UniwindGlassView>
140143
) : (
141144
<ControlPill
142145
accessibilityLabel="Scroll to end"
‎docs/user/mobile-appearance.md‎
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ T3 Code Mobile includes the T3 Code, T3 Chat, Grove, Ocean, Ember, and Iris them
44
light and dark colors that apply throughout the app, including code reviews, file previews, the
55
terminal, native headers, and sheets.
66

7-
On supported iOS versions, the new-task and thread composers use the system glass material.
8-
Other platforms use a themed background.
7+
On supported iOS versions, the new-task and thread composers, working timer, and scroll-to-end
8+
button use the system glass material. Other platforms use a themed background.
99

1010
To change themes:
1111

‎pnpm-lock.yaml‎
Lines changed: 0 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit 9b2d043
Browse files
juliusmarmingejuliusmarminge
authored
fix(mobile): replace Callstack glass with Expo glass (#8862)
1 parent e9c4775 commit 9b2d043
5 files changed
Lines changed: 39 additions & 50 deletions
File tree
‎apps/mobile/package.json‎
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -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‎
Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import*asHapticsfrom"expo-haptics";
2-
import{isLiquidGlassSupported,LiquidGlassView}from"@callstack/liquid-glass";
2+
import{GlassView}from"expo-glass-effect";
33
import{SymbolView}from"../../components/AppSymbol";
44
import{useCallback,useEffect,useRef}from"react";
55
import{ActivityIndicator,Pressable,StyleSheet,useColorScheme,View}from"react-native";
@@ -11,11 +11,12 @@ import { APP_BAR_HEIGHT } from "../../lib/layoutMetrics";
1111
import{themeColorWithAlpha}from"../../lib/mobileTheme";
1212
import{tryOpenExternalUrl}from"../../lib/openExternalUrl";
1313
import{useUniwindTheme}from"../../lib/useUniwindTheme";
14+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
1415
importtype{GitActionProgress}from"../../state/use-vcs-action-state";
1516

1617
constOVERLAY_LAYOUT_TRANSITION=LinearTransition.duration(220);
1718
constOVERLAY_TOP_GAP=8;
18-
constAnimatedLiquidGlassView=Animated.createAnimatedComponent(LiquidGlassView);
19+
constAnimatedGlassView=Animated.createAnimatedComponent(GlassView);
1920

2021
exportfunctionGitActionProgressOverlay(props: {
2122
readonlyprogress: 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‎
Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
import{
2-
isLiquidGlassSupported,
3-
LiquidGlassContainerView,
4-
LiquidGlassView,
5-
}from"@callstack/liquid-glass";
1+
import{GlassContainer,GlassView}from"expo-glass-effect";
62
import{useEffect,useState}from"react";
73
import{TextasSystemText,View}from"react-native";
84
importAnimated,{
@@ -18,6 +14,7 @@ import { withUniwind } from "uniwind";
1814

1915
import{AppTextasText}from"../../components/AppText";
2016
import{ControlPill}from"../../components/ControlPill";
17+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
2118

2219
constCONTROL_HEIGHT=44;
2320
constCONTROL_COMPOSER_GAP=8;
@@ -31,9 +28,15 @@ const CONTROL_TIMING = {
3128
}asconst;
3229
constCONTROL_SEPARATION=(16+CONTROL_HEIGHT)/2;
3330

34-
constUniwindLiquidGlassView=withUniwind(LiquidGlassView);
35-
constUniwindLiquidGlassContainerView=withUniwind(LiquidGlassContainerView);
36-
constAnimatedLiquidGlassView=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.
33+
constUniwindGlassView=withUniwind(GlassView,{
34+
style: {fromClassName: "className"},
35+
});
36+
constUniwindGlassContainer=withUniwind(GlassContainer,{
37+
style: {fromClassName: "className"},
38+
});
39+
constAnimatedGlassView=Animated.createAnimatedComponent(UniwindGlassView);
3740

3841
exportconstFLOATING_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
<WorkingDurationstartedAt={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.Viewstyle={arrowContentStyle}>
101104
<ScrollToEndButtondisabled={!props.showScrollToEnd}onPress={props.onScrollToEnd}/>
102105
</Animated.View>
103-
</AnimatedLiquidGlassView>
104-
</UniwindLiquidGlassContainerView>
106+
</AnimatedGlassView>
107+
</UniwindGlassContainer>
105108
) : props.startedAt!==null ? (
106109
<ViewpointerEvents="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
<ScrollToEndButtononPress={props.onScrollToEnd}/>
139-
</UniwindLiquidGlassView>
142+
</UniwindGlassView>
140143
) : (
141144
<ControlPill
142145
accessibilityLabel="Scroll to end"
‎docs/user/mobile-appearance.md‎
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ T3 Code Mobile includes the T3 Code, T3 Chat, Grove, Ocean, Ember, and Iris them
44
light and dark colors that apply throughout the app, including code reviews, file previews, the
55
terminal, native headers, and sheets.
66

7-
On supported iOS versions, the new-task and thread composers use the system glass material.
8-
Other platforms use a themed background.
7+
On supported iOS versions, the new-task and thread composers, working timer, and scroll-to-end
8+
button use the system glass material. Other platforms use a themed background.
99

1010
To change themes:
1111

‎pnpm-lock.yaml‎
Lines changed: 0 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Commit 9b2d043
Browse files
juliusmarmingejuliusmarminge
authored
fix(mobile): replace Callstack glass with Expo glass (#8862)
1 parent e9c4775 commit 9b2d043
5 files changed
Lines changed: 39 additions & 50 deletions
File tree
‎apps/mobile/package.json‎
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -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‎
Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import*asHapticsfrom"expo-haptics";
2-
import{isLiquidGlassSupported,LiquidGlassView}from"@callstack/liquid-glass";
2+
import{GlassView}from"expo-glass-effect";
33
import{SymbolView}from"../../components/AppSymbol";
44
import{useCallback,useEffect,useRef}from"react";
55
import{ActivityIndicator,Pressable,StyleSheet,useColorScheme,View}from"react-native";
@@ -11,11 +11,12 @@ import { APP_BAR_HEIGHT } from "../../lib/layoutMetrics";
1111
import{themeColorWithAlpha}from"../../lib/mobileTheme";
1212
import{tryOpenExternalUrl}from"../../lib/openExternalUrl";
1313
import{useUniwindTheme}from"../../lib/useUniwindTheme";
14+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
1415
importtype{GitActionProgress}from"../../state/use-vcs-action-state";
1516

1617
constOVERLAY_LAYOUT_TRANSITION=LinearTransition.duration(220);
1718
constOVERLAY_TOP_GAP=8;
18-
constAnimatedLiquidGlassView=Animated.createAnimatedComponent(LiquidGlassView);
19+
constAnimatedGlassView=Animated.createAnimatedComponent(GlassView);
1920

2021
exportfunctionGitActionProgressOverlay(props: {
2122
readonlyprogress: 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‎
Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
import{
2-
isLiquidGlassSupported,
3-
LiquidGlassContainerView,
4-
LiquidGlassView,
5-
}from"@callstack/liquid-glass";
1+
import{GlassContainer,GlassView}from"expo-glass-effect";
62
import{useEffect,useState}from"react";
73
import{TextasSystemText,View}from"react-native";
84
importAnimated,{
@@ -18,6 +14,7 @@ import { withUniwind } from "uniwind";
1814

1915
import{AppTextasText}from"../../components/AppText";
2016
import{ControlPill}from"../../components/ControlPill";
17+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
2118

2219
constCONTROL_HEIGHT=44;
2320
constCONTROL_COMPOSER_GAP=8;
@@ -31,9 +28,15 @@ const CONTROL_TIMING = {
3128
}asconst;
3229
constCONTROL_SEPARATION=(16+CONTROL_HEIGHT)/2;
3330

34-
constUniwindLiquidGlassView=withUniwind(LiquidGlassView);
35-
constUniwindLiquidGlassContainerView=withUniwind(LiquidGlassContainerView);
36-
constAnimatedLiquidGlassView=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.
33+
constUniwindGlassView=withUniwind(GlassView,{
34+
style: {fromClassName: "className"},
35+
});
36+
constUniwindGlassContainer=withUniwind(GlassContainer,{
37+
style: {fromClassName: "className"},
38+
});
39+
constAnimatedGlassView=Animated.createAnimatedComponent(UniwindGlassView);
3740

3841
exportconstFLOATING_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
<WorkingDurationstartedAt={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.Viewstyle={arrowContentStyle}>
101104
<ScrollToEndButtondisabled={!props.showScrollToEnd}onPress={props.onScrollToEnd}/>
102105
</Animated.View>
103-
</AnimatedLiquidGlassView>
104-
</UniwindLiquidGlassContainerView>
106+
</AnimatedGlassView>
107+
</UniwindGlassContainer>
105108
) : props.startedAt!==null ? (
106109
<ViewpointerEvents="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
<ScrollToEndButtononPress={props.onScrollToEnd}/>
139-
</UniwindLiquidGlassView>
142+
</UniwindGlassView>
140143
) : (
141144
<ControlPill
142145
accessibilityLabel="Scroll to end"
‎docs/user/mobile-appearance.md‎
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ T3 Code Mobile includes the T3 Code, T3 Chat, Grove, Ocean, Ember, and Iris them
44
light and dark colors that apply throughout the app, including code reviews, file previews, the
55
terminal, native headers, and sheets.
66

7-
On supported iOS versions, the new-task and thread composers use the system glass material.
8-
Other platforms use a themed background.
7+
On supported iOS versions, the new-task and thread composers, working timer, and scroll-to-end
8+
button use the system glass material. Other platforms use a themed background.
99

1010
To change themes:
1111

‎pnpm-lock.yaml‎
Lines changed: 0 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
0 commit comments
Comments
 (0)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Commit 9b2d043
Browse files
juliusmarmingejuliusmarminge
authored
fix(mobile): replace Callstack glass with Expo glass (#8862)
1 parent e9c4775 commit 9b2d043
5 files changed
Lines changed: 39 additions & 50 deletions
File tree
‎apps/mobile/package.json‎
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -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‎
Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import*asHapticsfrom"expo-haptics";
2-
import{isLiquidGlassSupported,LiquidGlassView}from"@callstack/liquid-glass";
2+
import{GlassView}from"expo-glass-effect";
33
import{SymbolView}from"../../components/AppSymbol";
44
import{useCallback,useEffect,useRef}from"react";
55
import{ActivityIndicator,Pressable,StyleSheet,useColorScheme,View}from"react-native";
@@ -11,11 +11,12 @@ import { APP_BAR_HEIGHT } from "../../lib/layoutMetrics";
1111
import{themeColorWithAlpha}from"../../lib/mobileTheme";
1212
import{tryOpenExternalUrl}from"../../lib/openExternalUrl";
1313
import{useUniwindTheme}from"../../lib/useUniwindTheme";
14+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
1415
importtype{GitActionProgress}from"../../state/use-vcs-action-state";
1516

1617
constOVERLAY_LAYOUT_TRANSITION=LinearTransition.duration(220);
1718
constOVERLAY_TOP_GAP=8;
18-
constAnimatedLiquidGlassView=Animated.createAnimatedComponent(LiquidGlassView);
19+
constAnimatedGlassView=Animated.createAnimatedComponent(GlassView);
1920

2021
exportfunctionGitActionProgressOverlay(props: {
2122
readonlyprogress: 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‎
Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
import{
2-
isLiquidGlassSupported,
3-
LiquidGlassContainerView,
4-
LiquidGlassView,
5-
}from"@callstack/liquid-glass";
1+
import{GlassContainer,GlassView}from"expo-glass-effect";
62
import{useEffect,useState}from"react";
73
import{TextasSystemText,View}from"react-native";
84
importAnimated,{
@@ -18,6 +14,7 @@ import { withUniwind } from "uniwind";
1814

1915
import{AppTextasText}from"../../components/AppText";
2016
import{ControlPill}from"../../components/ControlPill";
17+
import{NATIVE_LIQUID_GLASS_SUPPORTED}from"../../native/native-glass";
2118

2219
constCONTROL_HEIGHT=44;
2320
constCONTROL_COMPOSER_GAP=8;
@@ -31,9 +28,15 @@ const CONTROL_TIMING = {
3128
}asconst;
3229
constCONTROL_SEPARATION=(16+CONTROL_HEIGHT)/2;
3330

34-
constUniwindLiquidGlassView=withUniwind(LiquidGlassView);
35-
constUniwindLiquidGlassContainerView=withUniwind(LiquidGlassContainerView);
36-
constAnimatedLiquidGlassView=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.
33+
constUniwindGlassView=withUniwind(GlassView,{
34+
style: {fromClassName: "className"},
35+
});
36+
constUniwindGlassContainer=withUniwind(GlassContainer,{
37+
style: {fromClassName: "className"},
38+
});
39+
constAnimatedGlassView=Animated.createAnimatedComponent(UniwindGlassView);
3740

3841
exportconstFLOATING_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
<WorkingDurationstartedAt={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.Viewstyle={arrowContentStyle}>
101104
<ScrollToEndButtondisabled={!props.showScrollToEnd}onPress={props.onScrollToEnd}/>
102105
</Animated.View>
103-
</AnimatedLiquidGlassView>
104-
</UniwindLiquidGlassContainerView>
106+
</AnimatedGlassView>
107+
</UniwindGlassContainer>
105108
) : props.startedAt!==null ? (
106109
<ViewpointerEvents="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
<ScrollToEndButtononPress={props.onScrollToEnd}/>
139-
</UniwindLiquidGlassView>
142+
</UniwindGlassView>
140143
) : (
141144
<ControlPill
142145
accessibilityLabel="Scroll to end"
‎docs/user/mobile-appearance.md‎
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ T3 Code Mobile includes the T3 Code, T3 Chat, Grove, Ocean, Ember, and Iris them
44
light and dark colors that apply throughout the app, including code reviews, file previews, the
55
terminal, native headers, and sheets.
66

7-
On supported iOS versions, the new-task and thread composers use the system glass material.
8-
Other platforms use a themed background.
7+
On supported iOS versions, the new-task and thread composers, working timer, and scroll-to-end
8+
button use the system glass material. Other platforms use a themed background.
99

1010
To change themes:
1111

‎pnpm-lock.yaml‎
Lines changed: 0 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
0 commit comments
Comments
 (0)