fix(android): change blur type color based by ui mode#103
Conversation
|
Warning Rate limit exceeded
To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThis pull request introduces dark mode support for blur effects on Android. The Changes
Sequence Diagram(s)sequenceDiagram
participant System as System<br/>(Config Change)
participant View as ReactNativeBlurView<br/>or ProgressiveBlurView
participant BlurType as BlurType.Companion
participant Config as Configuration
System->>View: onConfigurationChanged(newConfig)
View->>View: setBlurType(currentBlurType)
View->>BlurType: fromString(type, resources.configuration)
BlurType->>Config: Detect isDarkMode from configuration.uiMode
BlurType-->>View: Return LIGHT or DARK variant<br/>with updated overlayColor
View->>View: Apply overlay color to blur effect
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsGit: Failed to clone repository. Please run the Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 0/1 reviews remaining, refill in 31 minutes and 8 seconds.Comment |
There was a problem hiding this comment.
Actionable comments posted: 4
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt`:
- Around line 472-476: The onConfigurationChanged override currently always
calls setBlurType(currentBlurType), which causes liquidGlass views to lose their
overlay/tint after orientation/theme changes; fix by guarding that call so it
does not run for liquid glass views (e.g., check the viewType field and only
call setBlurType(currentBlurType) when viewType != "liquidGlass"), or
alternatively make setBlurType respect an existing liquidGlass mode flag inside
ReactNativeBlurView so it early-returns for that mode.
In `@src/LiquidGlassView.tsx`:
- Around line 29-37: The JSDoc `@platform` tag for the glassOpacity prop is
incorrect because glassOpacity is used in both the BlurView branch and the
fallback path (it feeds into overlayColorWithAlpha via Math.floor(glassOpacity *
255)); update the comment for glassOpacity (symbol: glassOpacity) to remove or
broaden the `@platform` restriction (e.g., make it apply to all platforms or note
that it influences fallback rendering on Android/iOS <26) and ensure any doc
text references overlayColorWithAlpha so readers know glassOpacity affects the
fallback alpha computation as well.
- Around line 10-17: Update the JSDoc for the glassType prop to accurately
reflect where it is used: change the `@platform` tag and description on glassType
(in the LiquidGlassView component/type) to state that glassType only applies
when ReactNativeLiquidGlassView is rendered (iOS API 26+), and note that on iOS
<26 and on Android the component falls back to BlurView which ignores glassType;
ensure the docs explicitly mention the fallback behavior and platform/version
caveat.
- Around line 19-27: The JSDoc for the LiquidGlassView prop glassTintColor is
misleading because the fallback builds overlayColorWithAlpha by concatenating an
alpha hex suffix, which only works with hex color strings; update the
documentation for glassTintColor to state it must be a hex color in the form
"#RRGGBB" (or "#RRGGBBAA" if supported) and remove the “color names” claim, and
optionally mention that non-hex values will be ignored or cause fallback
behavior; reference LiquidGlassView and the overlayColorWithAlpha construction
in your update so callers know the required format.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b727c26c-7581-449c-b309-eb073d50440c
📒 Files selected for processing (10)
android/src/main/java/com/sbaiahmed1/reactnativeblur/BlurType.ktandroid/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.ktandroid/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeProgressiveBlurView.ktsrc/BlurView.tsxsrc/LiquidGlassContainer.tsxsrc/LiquidGlassView.tsxsrc/ProgressiveBlurView.tsxsrc/ReactNativeBlurSwitchNativeComponent.tssrc/ReactNativeLiquidGlassContainerNativeComponent.tssrc/ReactNativeLiquidGlassViewNativeComponent.ts
💤 Files with no reviewable changes (3)
- src/ReactNativeLiquidGlassViewNativeComponent.ts
- src/ReactNativeLiquidGlassContainerNativeComponent.ts
- src/ReactNativeBlurSwitchNativeComponent.ts
…onfigurationChanged method
When the UI mode changed for light or dark in Android, the blur types
regular,prominent,systemultrathinmaterial,systemthinmaterial,systemmaterial,systemthickmaterial, andsystemchromematerialmust have been changed according to the UI selected. This behavior already exists in iOS, but it has been added in Android now.In light mode:

In dark mode:

Summary by CodeRabbit
New Features
Documentation
reducedTransparencyFallbackColor,spacing).