callstack / callstack/liquid-glass
LiquidGlassView blurs text behind it and active label color not syncing during slide
- Dominant language
- Objective-C++
- Stars
- 1.7k
- Forks
- 64
- Avg merge
- 2d 13h
- Merged PRs (30d)
- 1
Description
### Before submitting a new issue
- [x] I tested using the latest version of the library, as the bug might be already fixed.
- [x] I tested using a [supported version](https://github.com/reactwg/react-native-releases/blob/main/docs/support.md) of react native.
- [x] I checked for possible duplicate issues, with possible answers.
### Bug summary
Hi 👋
I’m using @callstack/liquid-glass and the glass effect is working fine.
But I’m facing two issues while using it for a sliding segmented/tab style UI:
Text labels behind LiquidGlassView get blurred, making them hard to read.
While sliding the glass pill, the active label color does not update when the glass reaches that label.
It feels like the glass is affecting text rendering instead of acting purely as a background material.
### Demo
https://github.com/user-attachments/assets/0638ae57-271a-4d76-8fca-0075994fb231
### 🧪 Environment
React Native: 0.85.2
Reanimated: 4.3.0
@callstack/liquid-glass: 0.8.0
iOS Simulator: iPhone 17 Pro Max
### 📱 Expected behavior
Glass effect works as background only
Text stays crisp and not blurred
Active label color updates smoothly with glass position, Just like iOS native bottom tab bar labels colors updating with upper liquid glass sliding.
### ❌ Actual behavior
Text becomes blurred under glass
Active state not syncing from glass position
### Library version
^0.8.0
### Environment info
```shell
System:
OS: macOS 26.5.1
CPU: (8) arm64 Apple M1
Memory: 119.78 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 22.21.1
path: /Users/apple/.nvm/versions/node/v22.21.1/bin/node
Yarn:
version: 1.22.22
path: /opt/homebrew/bin/yarn
npm:
version: 10.9.4
path: /Users/apple/.nvm/versions/node/v22.21.1/bin/npm
Watchman:
version: 2025.03.10.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /Users/apple/.rvm/gems/ruby-3.4.1/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 25.2
- iOS 26.2
- macOS 26.2
- tvOS 26.2
- visionOS 26.2
- watchOS 26.2
Android SDK:
API Levels:
- "28"
- "31"
- "33"
- "34"
- "35"
- "36"
Build Tools:
- 34.0.0
- 35.0.0
- 36.0.0
System Images:
- android-35 | Google Play ARM 64 v8a
- android-36 | Google Play ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2024.2 AI-242.23339.11.2421.12700392
Xcode:
version: 26.2/17C52
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.13
path: /usr/bin/javac
Ruby:
version: 3.4.1
path: /Users/apple/.rvm/rubies/ruby-3.4.1/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 20.1.0
wanted: 20.1.0
react:
installed: 19.2.3
wanted: 19.2.3
react-native:
installed: 0.85.2
wanted: 0.85.2
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
```
### Steps to reproduce
1. Install @callstack/liquid-glass with npm or yarn
2. implement according to docs
### Reproducible example repository
https://github.com/muhammad-kumail/liquid-glass-test
Contributor guide
Assessment
This issue has not been assessed yet.