Feat/soc uivisual effects#38
Merged
Merged
Conversation
- BorderRadius implementation with React Native's built-in style system for consistency. - Remove SwiftUI wrapper and implement UIKit-only solution following Expo's approach. - Update component to properly handle border radius through layout metrics.
Contributor
Reviewer's GuideThis PR introduces a dedicated LiquidGlassView component alongside a native iOS SwiftUI/UIView-based implementation for advanced glass effects, while stripping out legacy liquidGlass code from the existing BlurView, updating example usages, and applying required build fixes for iOS and Android. Entity relationship diagram for LiquidGlassView props and native mappingerDiagram
LiquidGlassView {
glassType string
glassTintColor string
glassOpacity number
reducedTransparencyFallbackColor string
isInteractive boolean
ignoreSafeArea boolean
}
ReactNativeLiquidGlassViewNativeComponent {
glassType string
glassTintColor string
glassOpacity number
reducedTransparencyFallbackColor string
isInteractive boolean
ignoreSafeArea boolean
}
LiquidGlassView ||--|| ReactNativeLiquidGlassViewNativeComponent : "props mapped"
ReactNativeLiquidGlassViewNativeComponent ||--|| ReactNativeLiquidGlassView : "native props"
ReactNativeLiquidGlassView ||--|| LiquidGlassContainerView : "updates properties"
Class diagram for new LiquidGlassView and related native componentsclassDiagram
class LiquidGlassView {
+glassType: GlassType
+glassTintColor: string
+glassOpacity: number
+reducedTransparencyFallbackColor: string
+isInteractive: boolean
+ignoreSafeArea: boolean
+style: ViewStyle
+children: React.ReactNode
}
class ReactNativeLiquidGlassViewNativeComponent {
+glassType: GlassType
+glassTintColor: string
+glassOpacity: Double
+reducedTransparencyFallbackColor: string
+isInteractive: boolean
+ignoreSafeArea: boolean
}
class ReactNativeLiquidGlassView {
+colorFromString(colorString: NSString): UIColor
+updateProps(props, oldProps)
+finalizeUpdates(updateMask)
+layoutSubviews()
+updateLayoutMetrics(layoutMetrics, oldLayoutMetrics)
+mountChildComponentView(childComponentView, index)
+unmountChildComponentView(childComponentView, index)
}
class ReactNativeLiquidGlassViewHelper {
+createLiquidGlassViewWithFrame(frame: CGRect): LiquidGlassContainerView
+updateLiquidGlassView(liquidGlassView, withGlassTintColor: UIColor)
+updateLiquidGlassView(liquidGlassView, withGlassOpacity: Double)
+updateLiquidGlassView(liquidGlassView, withGlassType: String)
+updateLiquidGlassView(liquidGlassView, withIsInteractive: Bool)
+updateLiquidGlassView(liquidGlassView, withIgnoringSafeArea: Bool)
+updateLiquidGlassView(liquidGlassView, withReducedTransparencyFallbackColor: UIColor)
}
class LiquidGlassContainerView {
+glassTintColor: UIColor
+glassOpacity: Double
+glassType: String
+reducedTransparencyFallbackColor: UIColor
+isInteractive: Bool
+ignoreSafeArea: Bool
+setBorderRadius(radius: CGFloat)
+getContentView(): UIView
}
LiquidGlassView --> ReactNativeLiquidGlassViewNativeComponent
ReactNativeLiquidGlassViewNativeComponent --> ReactNativeLiquidGlassView
ReactNativeLiquidGlassView --> ReactNativeLiquidGlassViewHelper
ReactNativeLiquidGlassViewHelper --> LiquidGlassContainerView
LiquidGlassContainerView --> UIView
Class diagram showing removal of liquidGlass props from BlurViewclassDiagram
class BlurView {
-glassType: GlassType
-glassTintColor: string
-glassOpacity: number
-type: 'blur' | 'liquidGlass'
-isInteractive: boolean
-ignoreSafeArea: boolean
+blurType: BlurType
+blurAmount: number
+reducedTransparencyFallbackColor: string
+style: ViewStyle
+children: React.ReactNode
}
%% The above attributes were removed from BlurView in this PR
File-Level Changes
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Hey there - I've reviewed your changes - here's some feedback:
- There’s a lot of dead/unused code left in native files (e.g. the commented‐out liquidGlass branch in BasicColoredView.swift and unused methods in ReactNativeBlurViewHelper); consider removing those to simplify maintenance.
- The
LiquidGlassViewfallback always uses a hardcodedblurAmount={70}on unsupported platforms—consider making that configurable or reusing a prop so appearance is consistent. - The Podfile workarounds for glog feel orthogonal to the glass feature—splitting them into a separate commit or PR would keep this feature diff more focused.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- There’s a lot of dead/unused code left in native files (e.g. the commented‐out liquidGlass branch in BasicColoredView.swift and unused methods in ReactNativeBlurViewHelper); consider removing those to simplify maintenance.
- The `LiquidGlassView` fallback always uses a hardcoded `blurAmount={70}` on unsupported platforms—consider making that configurable or reusing a prop so appearance is consistent.
- The Podfile workarounds for glog feel orthogonal to the glass feature—splitting them into a separate commit or PR would keep this feature diff more focused.
## Individual Comments
### Comment 1
<location> `ios/ReactNativeLiquidGlassView.mm:33-42` </location>
<code_context>
+ // Prevent excessively long strings that could cause performance issues
</code_context>
<issue_to_address>
**suggestion (performance):** Color parsing in ReactNativeLiquidGlassView is robust but could be optimized.
Repeated NSLog warnings for invalid colors could clutter logs and impact performance. Consider rate-limiting or aggregating these warnings to reduce overhead.
Suggested implementation:
```
+ (UIColor *)colorFromString:(NSString *)colorString {
// Rate-limited warning for invalid color strings
static NSUInteger invalidColorWarningCount = 0;
static const NSUInteger invalidColorWarningThreshold = 5;
static BOOL invalidColorWarningThresholdReached = NO;
// Input validation
if (!colorString || [colorString isEqualToString:@""] || colorString.length == 0) {
if (invalidColorWarningCount < invalidColorWarningThreshold) {
NSLog(@"[ReactNativeLiquidGlassView] Warning: Color string is nil or empty, using default clear color");
invalidColorWarningCount++;
if (invalidColorWarningCount == invalidColorWarningThreshold) {
NSLog(@"[ReactNativeLiquidGlassView] Further invalid color warnings will be suppressed.");
invalidColorWarningThresholdReached = YES;
}
}
return [UIColor clearColor]; // Default color
}
// Prevent excessively long strings that could cause performance issues
if (colorString.length > 50) {
if (invalidColorWarningCount < invalidColorWarningThreshold) {
NSLog(@"[ReactNativeLiquidGlassView] Warning: Color string too long, using default clear color");
invalidColorWarningCount++;
if (invalidColorWarningCount == invalidColorWarningThreshold) {
NSLog(@"[ReactNativeLiquidGlassView] Further invalid color warnings will be suppressed.");
invalidColorWarningThresholdReached = YES;
}
}
return [UIColor clearColor];
}
```
If there are other places in `colorFromString:` where invalid color warnings are logged (e.g., for unrecognized color names or invalid hex formats), you should wrap those NSLog statements with the same rate-limiting logic using `invalidColorWarningCount` and the threshold.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
…better layout control
fix: correct QmBlurView dependency notation in build.gradle refactor: override setIgnoreSafeArea method in ReactNativeBlurViewManager
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
LIQUID GLASS - Implemented ReactNativeLiquidGlassViewHelper for managing liquid glass view properties.
Summary by Sourcery
Introduce a new LiquidGlassView component with native iOS 26+ liquid glass effects and fallbacks, remove glass props from BlurView, update examples to use the new component, and add build fixes for glog.
New Features:
Enhancements:
Build: