Skip to content

fix(android): change blur type color based by ui mode#103

Merged
sbaiahmed1 merged 2 commits into
mainfrom
fix/add-support-android-ui-mode-night
May 4, 2026
Merged

fix(android): change blur type color based by ui mode#103
sbaiahmed1 merged 2 commits into
mainfrom
fix/add-support-android-ui-mode-night

Conversation

@DanielAraldi
Copy link
Copy Markdown
Collaborator

@DanielAraldi DanielAraldi commented May 1, 2026

When the UI mode changed for light or dark in Android, the blur types regular, prominent, systemultrathinmaterial, systemthinmaterial, systemmaterial, systemthickmaterial, and systemchromematerial must 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:
light

In dark mode:
dark

Summary by CodeRabbit

  • New Features

    • Blur effects now automatically adapt to system light and dark mode changes on Android.
  • Documentation

    • Updated platform availability annotations clarifying iOS-only properties (reducedTransparencyFallbackColor, spacing).
    • Enhanced property descriptions with structured documentation tags for better clarity.

@DanielAraldi DanielAraldi requested a review from sbaiahmed1 May 1, 2026 15:29
@DanielAraldi DanielAraldi self-assigned this May 1, 2026
@DanielAraldi DanielAraldi added bug Something isn't working android Android only labels May 1, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 1, 2026

Warning

Rate limit exceeded

@DanielAraldi has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 31 minutes and 8 seconds before requesting another review.

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 @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 8ded875e-d67b-49b6-8c3e-7adc034b6503

📥 Commits

Reviewing files that changed from the base of the PR and between f5b39cf and dc4638a.

📒 Files selected for processing (2)
  • android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt
  • src/LiquidGlassView.tsx
📝 Walkthrough

Walkthrough

This pull request introduces dark mode support for blur effects on Android. The BlurType enum is redesigned with explicit LIGHT and DARK variants, and the fromString method now accepts a Configuration parameter to determine system dark mode state. Android blur views track their current blur type and reapply it when system configuration changes. Multiple TypeScript documentation comments are updated or removed.

Changes

Cohort / File(s) Summary
Android Blur Type Redesign
android/src/main/java/com/sbaiahmed1/reactnativeblur/BlurType.kt
Replaced single/mixed blur type variants with explicit LIGHT/DARK alternatives; updated fromString method signature to accept Configuration parameter and select appropriate variant based on dark mode state; adjusted ARGB overlay color values.
Android Blur View Configuration Handling
android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt, android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeProgressiveBlurView.kt
Added currentBlurType field to track last applied blur type; updated setBlurType to use configuration-aware BlurType.fromString; added onConfigurationChanged override to reapply blur type when system configuration changes.
TypeScript Documentation Updates
src/BlurView.tsx, src/ProgressiveBlurView.tsx
Removed hex color string documentation and added @platform iOS JSDoc annotation for reducedTransparencyFallbackColor property.
TypeScript JSDoc Restructuring
src/LiquidGlassContainer.tsx, src/LiquidGlassView.tsx
Converted plain-text platform descriptions and notes to structured JSDoc @description and @platform tags; added explicit @default annotations where applicable.
TypeScript Native Component Documentation Cleanup
src/ReactNativeBlurSwitchNativeComponent.ts, src/ReactNativeLiquidGlassContainerNativeComponent.ts, src/ReactNativeLiquidGlassViewNativeComponent.ts
Removed JSDoc documentation blocks for NativeProps interface properties; no type or default value 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
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Suggested reviewers

  • sbaiahmed1

Poem

🐰 A rabbit hops through light and shade,
Dark modes dance where blurs are made,
Config whispers, views adapt with grace,
Documentation finds its rightful place!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: adapting blur type colors based on Android UI mode (light/dark), matching the PR's primary objective.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/add-support-android-ui-mode-night

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.


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.

❤️ Share
Review rate limit: 0/1 reviews remaining, refill in 31 minutes and 8 seconds.

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between 292fbde and f5b39cf.

📒 Files selected for processing (10)
  • android/src/main/java/com/sbaiahmed1/reactnativeblur/BlurType.kt
  • android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt
  • android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeProgressiveBlurView.kt
  • src/BlurView.tsx
  • src/LiquidGlassContainer.tsx
  • src/LiquidGlassView.tsx
  • src/ProgressiveBlurView.tsx
  • src/ReactNativeBlurSwitchNativeComponent.ts
  • src/ReactNativeLiquidGlassContainerNativeComponent.ts
  • src/ReactNativeLiquidGlassViewNativeComponent.ts
💤 Files with no reviewable changes (3)
  • src/ReactNativeLiquidGlassViewNativeComponent.ts
  • src/ReactNativeLiquidGlassContainerNativeComponent.ts
  • src/ReactNativeBlurSwitchNativeComponent.ts

Comment thread src/LiquidGlassView.tsx
Comment thread src/LiquidGlassView.tsx
Comment thread src/LiquidGlassView.tsx
@sbaiahmed1 sbaiahmed1 merged commit 3879838 into main May 4, 2026
6 checks passed
@sbaiahmed1 sbaiahmed1 deleted the fix/add-support-android-ui-mode-night branch May 4, 2026 07:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

android Android only bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants