@sbaiahmed1/react-native-blur 0.2.1 → 0.3.0-beta.0

package/README.md

@@ -1,6 +1,6 @@
 # @sbaiahmed1/react-native-blur
 
-A modern React Native blur view component that provides native blur effects for both iOS and Android platforms.
+A modern React Native blur view component that provides native blur effects and **liquid glass effects** for both iOS and Android platforms.
 <div align="center">
   <p>
     <img src="https://img.shields.io/npm/v/@sbaiahmed1/react-native-blur?style=for-the-badge&color=blue" alt="npm version" />
@@ -11,28 +11,44 @@ A modern React Native blur view component that provides native blur effects for
 
   <p>
     <img src="https://img.shields.io/badge/New%20Architecture-Ready-purple?style=for-the-badge" alt="New Architecture" />
+    <img src="https://img.shields.io/badge/iOS%2026+-Liquid%20Glass-blue?style=for-the-badge" alt="Liquid Glass" />
+    <img src="https://img.shields.io/badge/SwiftUI-Powered-orange?style=for-the-badge" alt="SwiftUI" />
   </p>
 </div>
-## Demo
+
+## Liquid Glass Demo
+
+<div align="center">
+  <img src="liquidGlass.gif" alt="Liquid Glass Demo" width="300" />
+  <br>
+  <em>Liquid Glass effect in action</em>
+</div>
+
+## Blur Demo
 
 <div align="center">
   <img src="iOS-demo.gif" alt="iOS Demo" width="300" />
   <img src="android-demo.gif" alt="Android Demo" width="300" />
+
   <br>
   <em>iOS (left) and Android (right) blur effects in action</em>
 </div>
 
+
+
 ## Features
 
+- 🌊 **Liquid Glass Effects**: Revolutionary glass effects using iOS 26+ UIGlassEffect API
 - 🎨 **Multiple Blur Types**: Support for various blur styles including system materials on iOS
 - 📱 **Cross-Platform**: Works on both iOS and Android
 - ♿ **Accessibility**: Automatic fallback for reduced transparency settings
 - 🔧 **TypeScript**: Full TypeScript support with proper type definitions
 - 🚀 **Turbo Module**: Built with React Native's new architecture (Fabric)
-- 🎯 **Customizable**: Adjustable blur intensity and fallback colors
+- 🎯 **Customizable**: Adjustable blur intensity, glass tint colors, and opacity
 - 💡 **Performance Optimized**: Uses hardware acceleration for smooth rendering
 - 🛠️ **Easy to Use**: Simple API for quick integration into your React Native projects
-- 📦 **Modern**: Uses Kotlin for Android implementation and *will* use Swift for iOS, ensuring modern development practices
+- 📦 **Modern**: Uses SwiftUI for iOS and Kotlin for Android, ensuring cutting-edge development practices
+- 🔄 **Smart Fallbacks**: Graceful degradation from liquid glass to blur on older iOS versions
 
 ## 📊 Library Comparison
 
@@ -43,8 +59,9 @@ This section provides a detailed comparison between `@sbaiahmed1/react-native-bl
 | Feature                      | @sbaiahmed1/react-native-blur       | @react-native-community/blur          |
 |------------------------------|-------------------------------------|---------------------------------------|
 | **New Architecture Support** | ✅ Full Fabric/Turbo Module support  | ❌ Limited support (crashes on android |
-| **Android Real Blur**        | ✅ Hardware-accelerated real blur    | ✅ Hardware-accelerated real blur      |
+| **Android Real Blur**        | ✅ Hardware-accelerated real blur (including liquid glass) | ✅ Hardware-accelerated real blur      |
 | **iOS Blur Quality**         | ✅ Native UIVisualEffectView         | ✅ Native UIVisualEffectView           |
+| **Liquid Glass Effects**     | ✅ Full support (iOS 26+ UIGlassEffect & Android) | ❌ Not supported                       |
 | **TypeScript Support**       | ✅ Full TypeScript definitions       | ⚠️ Basic TypeScript support           |
 | **Maintenance Status**       | ✅ Actively maintained               | ⚠️ Community-maintained               |
 | **Bundle Size**              | 🟡 Moderate (includes BlurView lib) | 🟡 Moderate (includes BlurView lib)   |
@@ -54,7 +71,7 @@ This section provides a detailed comparison between `@sbaiahmed1/react-native-bl
 | **Documentation**            | ✅ Comprehensive with examples       | 🟡 Basic documentation                |
 
 **Advantages of @sbaiahmed1/react-native-blur:**
-- **True Android Blur**: Unlike the community version which only provides semi-transparent overlays on Android, our library delivers real hardware-accelerated blur effects on both platforms
+- **True Android Blur**: Unlike the community version which only provides semi-transparent overlays on Android, our library delivers real hardware-accelerated blur effects on both platforms, including liquid glass effects.
 - **Future-Ready**: Built from the ground up with React Native's new architecture (Fabric) in mind
 - **Modern Codebase**: Uses the latest development practices with Kotlin for Android
 - ** Uses Swift**: Use of Swift for iOS, ensuring modern and efficient native code
@@ -74,6 +91,7 @@ This section provides a detailed comparison between `@sbaiahmed1/react-native-bl
 | **Bare React Native** | ✅ Works with any RN project | ⚠️ Requires Expo configuration |
 | **Android Support** | ✅ Real blur effects | ❌ Semi-transparent view only |
 | **iOS Support** | ✅ Full native blur support | ✅ Full native blur support |
+| **Liquid Glass Effects** | ✅ Full support (iOS 26+ UIGlassEffect & Android) | ❌ Not supported |
 | **Bundle Size** | 🟡 Moderate | ✅ Lightweight (when using Expo) |
 | **Setup Complexity** | ✅ Simple npm install | 🟡 Requires Expo setup |
 | **Customization** | ✅ Extensive blur type options | 🟡 Limited blur types |
@@ -83,7 +101,7 @@ This section provides a detailed comparison between `@sbaiahmed1/react-native-bl
 
 **Advantages of @sbaiahmed1/react-native-blur:**
 - **No Vendor Lock-in**: Works with any React Native project without requiring Expo ecosystem
-- **Real Android Blur**: Provides actual blur effects on Android, not just transparency
+- **Real Android Blur**: Provides actual blur effects on Android, not just transparency, including liquid glass effects.
 - **Flexibility**: Can be used in brownfield apps, custom native modules, and any deployment scenario
 - **More Blur Types**: Extensive support for iOS system materials and custom blur types
 - **Direct Control**: Full control over native implementation without abstraction layers
@@ -149,7 +167,7 @@ import { BlurView } from '@sbaiahmed1/react-native-blur';
 ### Recommendation
 
 **Choose @sbaiahmed1/react-native-blur if:**
-- You want real blur effects on Android
+- You want real blur effects on Android, including liquid glass effects.
 - You're building for the new React Native architecture
 - You need maximum flexibility and don't want vendor lock-in
 - You want the latest performance optimizations
@@ -289,16 +307,48 @@ function MyComponent() {
 }
 ```
 
+### Liquid Glass Usage (iOS 26+)
+
+```tsx
+import React from 'react';
+import { BlurView } from '@sbaiahmed1/react-native-blur';
+
+function LiquidGlassComponent() {
+  return (
+    <BlurView
+      type="liquidGlass"
+      glassType="regular"
+      glassTintColor="#007AFF"
+      glassOpacity={0.8}
+      style={{
+        padding: 20,
+        borderRadius: 20,
+      }}
+    >
+      <Text>Beautiful liquid glass effect</Text>
+    </BlurView>
+  );
+}
+```
+
 ## Props
 
+All props are optional and have sensible defaults.
+
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `blurType` | `BlurType` | `'light'` | The type of blur effect to apply |
-| `blurAmount` | `number` | `10` | The intensity of the blur effect (0-100) |
-| `reducedTransparencyFallbackColor` | `string` | `undefined` | Fallback color when reduced transparency is enabled |
+| `type` | `'blur' \| 'liquidGlass'` | `'blur'` | The type of effect to apply |
+| `blurType` | `BlurType` | `'xlight'` | The type of blur effect to apply |
+| `blurAmount` | `number` | `10.0` | The intensity of the blur effect (0-100) |
+| `glassType` | `GlassType` | `'clear'` | The type of glass effect |
+| `glassTintColor` | `string` | `'clear'` | The tint color for glass effect |
+| `glassOpacity` | `number` | `1.0` | The opacity of glass effect (0-1) |
+| `reducedTransparencyFallbackColor` | `string` | `'#FFFFFF'` | Fallback color when reduced transparency is enabled |
 | `style` | `ViewStyle` | `undefined` | Style object for the blur view |
 | `children` | `ReactNode` | `undefined` | Child components to render inside the blur view |
 
+> **Note**: The `BlurType` and `GlassType` are exported types from the library. See [Blur Types](#blur-types) section below for all available values.
+
 ## Blur Types
 
 The following blur types are supported:
@@ -321,10 +371,15 @@ The following blur types are supported:
 ## Platform Differences
 
 ### iOS
-On iOS, this component uses `UIVisualEffectView` to provide true blur effects. All blur types are supported with their native implementations.
+On iOS, this component has been completely rewritten using **SwiftUI** for modern performance and features:
+
+- **iOS 26+**: Uses native `UIGlassEffect` API for true liquid glass effects with customizable tint colors and opacity
+- **iOS 13-25**: Uses enhanced `UIVisualEffectView` with precise blur intensity control
+- **Older iOS**: Graceful fallback to standard blur effects
+- **SwiftUI Integration**: Leverages SwiftUI's declarative UI for better performance and maintainability
 
 ### Android
-On Android, the component uses the BlurView library to provide real blur effects with hardware acceleration. The implementation supports multiple blur algorithms and gracefully falls back to translucent overlay approximation on devices with limited graphics capabilities.
+On Android, the component uses the BlurView library to provide real blur effects with hardware acceleration. The implementation supports multiple blur algorithms and gracefully falls back to translucent overlay approximation on devices with limited graphics capabilities. Liquid glass effects fall back to enhanced blur with tint overlay.
 
 ## Accessibility
 
@@ -340,36 +395,85 @@ You can customize the fallback color using the `reducedTransparencyFallbackColor
 This package includes full TypeScript definitions:
 
 ```tsx
-import { BlurView, BlurType, BlurViewProps } from '@sbaiahmed1/react-native-blur';
+import { BlurView, BlurType, GlassType, BlurViewProps } from '@sbaiahmed1/react-native-blur';
 
 // BlurType is exported for type checking
 const blurType: BlurType = 'systemMaterial';
 
+// GlassType for liquid glass effects
+const glassType: GlassType = 'regular';
+
 // BlurViewProps for component props
 interface MyComponentProps {
   blurProps: BlurViewProps;
 }
+
+// Example with all liquid glass properties
+const liquidGlassProps: BlurViewProps = {
+  type: 'liquidGlass',
+  glassType: 'regular',
+  glassTintColor: '#007AFF',
+  glassOpacity: 0.8,
+};
 ```
 
 ## Example App
 
-The package includes a comprehensive example app that demonstrates all blur types and features. To run the example:
+The package includes a comprehensive example app that demonstrates all blur types, liquid glass effects, and practical use cases. The example app features:
+
+- **Main Demo**: Interactive blur type selector with live preview
+- **Liquid Glass Examples**: Showcase of iOS 26+ glass effects with customizable properties
+- **Practical Use Cases**: Real-world examples like cards, modals, and overlays
+- **Comparison Views**: Side-by-side comparisons of different effects
+
+To run the example:
 
 ```bash
 cd example
-npm install
+yarn install
 # For iOS
-npx react-native run-ios
+yarn ios
 # For Android
-npx react-native run-android
+yarn android
 ```
 
 ## Performance Considerations
 
-- **iOS**: Native blur effects are hardware-accelerated and performant
+- **iOS**:
+  - **SwiftUI Implementation**: Enhanced performance with declarative UI updates
+  - **Liquid Glass (iOS 26+)**: Hardware-accelerated glass effects with minimal performance impact
+  - **Blur Effects**: Native blur effects are hardware-accelerated and performant
+  - **Smart Fallbacks**: Automatic degradation ensures smooth performance on older devices
 - **Android**: Real blur effects are hardware-accelerated with fallback to lightweight overlay when needed
-- Avoid using too many blur views simultaneously on lower-end devices
+- Avoid using too many blur/glass views simultaneously on lower-end devices
 - Consider using `reducedTransparencyFallbackColor` for better accessibility
+- Liquid glass effects automatically fall back to enhanced blur on Android and older iOS versions
+
+## What's New in v0.3.0
+
+### 🌊 Liquid Glass Effects (iOS 26+)
+- Revolutionary glass effects using Apple's new UIGlassEffect API
+- Customizable glass types: `clear` and `regular`
+- Adjustable tint colors and opacity for stunning visual effects
+- Automatic fallback to enhanced blur on older iOS versions and Android
+
+### 🔄 SwiftUI Rewrite
+- Complete iOS implementation rewritten using SwiftUI
+- Enhanced performance with declarative UI updates
+- Better integration with React Native's new architecture
+- Improved blur intensity control with precise animation handling
+
+### 📱 Enhanced Example App
+- New liquid glass demonstration section
+- Interactive property controls for real-time customization
+- Practical use case examples (cards, modals, overlays)
+- Comparison views for different effect types
+
+### 🛠️ Developer Experience
+- Full TypeScript support for all new properties
+- Improved component layout handling
+- Better accessibility support with smart fallbacks
+- Enhanced documentation and examples
 
 ## Contributing
 

package/ReactNativeBlur.podspec

@@ -13,7 +13,8 @@ Pod::Spec.new do |s|
   s.platforms    = { :ios => min_ios_version_supported }
   s.source       = { :git => "https://github.com/sbaiahmed1/sbaiahmed1-react-native-blur.git", :tag => "#{s.version}" }
 
-  s.source_files = "ios/**/*.{h,m,mm,cpp}"
+  s.source_files = "ios/**/*.{h,m,mm,cpp,swift}"
+  s.swift_version = '5.0'
   s.private_header_files = "ios/**/*.h"
 
  install_modules_dependencies(s)

package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurView.kt

@@ -22,6 +22,10 @@ class ReactNativeBlurView : BlurView {
   private var pendingStyleUpdate: Boolean = false
   private var originalBackgroundColor: Int? = null
   private var hasExplicitBackground: Boolean = false
+  private var glassTintColor: Int = Color.TRANSPARENT
+  private var glassOpacity: Float = 1.0f
+  private var viewType: String = "blur"
+  private var glassType: String = "clear"
 
   companion object {
     private const val TAG = "ReactNativeBlurView"
@@ -29,26 +33,26 @@ class ReactNativeBlurView : BlurView {
     private const val MAX_BLUR_RADIUS = 25f
     private const val DEFAULT_BLUR_RADIUS = 10f
     private const val DEBUG = false // Set to true for debug builds
-    
+
     // Cross-platform blur amount constants
     private const val MIN_BLUR_AMOUNT = 0f
     private const val MAX_BLUR_AMOUNT = 100f
     private const val DEFAULT_BLUR_AMOUNT = 10f
-    
+
     private fun logDebug(message: String) {
       if (DEBUG) {
         Log.d(TAG, message)
       }
     }
-    
+
     private fun logWarning(message: String) {
       Log.w(TAG, message)
     }
-    
+
     private fun logError(message: String, throwable: Throwable? = null) {
       Log.e(TAG, message, throwable)
     }
-    
+
     /**
      * Maps blur amount (0-100) to Android blur radius (0-25).
      * This ensures cross-platform consistency while respecting Android's limitations.
@@ -64,11 +68,11 @@ class ReactNativeBlurView : BlurView {
   constructor(context: Context?) : super(context) {
     initializeBlur()
   }
-  
+
   constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {
     initializeBlur()
   }
-  
+
   constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
     context,
     attrs,
@@ -86,21 +90,21 @@ class ReactNativeBlurView : BlurView {
     super.setBackgroundColor(Color.TRANSPARENT)
     logDebug("ReactNativeBlurView initialized")
   }
-  
+
   /**
    * Override setBackgroundColor to handle blur setup timing and background preservation.
    * @param color The background color to apply
    */
   override fun setBackgroundColor(color: Int) {
     logDebug("setBackgroundColor called: $color (isSetup: $isSetup)")
-    
+
     // Store the original background color if it's not transparent
     if (color != Color.TRANSPARENT) {
       originalBackgroundColor = color
       hasExplicitBackground = true
       logDebug("Stored explicit background color: $color")
     }
-    
+
     // If blur is not setup yet, defer setting the background
     if (!isSetup) {
       logDebug("Blur not setup, deferring background color")
@@ -114,7 +118,7 @@ class ReactNativeBlurView : BlurView {
       }
       return
     }
-    
+
     // If blur is setup and we have an explicit background, apply it carefully
      if (hasExplicitBackground && color != Color.TRANSPARENT) {
        logDebug("Applying background color over blur: $color")
@@ -124,17 +128,17 @@ class ReactNativeBlurView : BlurView {
        super.setBackgroundColor(Color.TRANSPARENT)
      }
    }
-   
+
    /**
     * Override setAlpha to handle blur setup timing.
     * @param alpha The alpha value to apply
     */
    override fun setAlpha(alpha: Float) {
      logDebug("setAlpha called: $alpha (isSetup: $isSetup)")
-     
+
      // Always apply alpha changes immediately as they don't interfere with blur setup
      super.setAlpha(alpha)
-     
+
      // If blur is not setup yet, trigger setup attempt
      if (!isSetup && isAttachedToWindow) {
        pendingStyleUpdate = true
@@ -146,17 +150,17 @@ class ReactNativeBlurView : BlurView {
        }
      }
    }
-   
+
    /**
     * Override setElevation to handle blur setup timing.
     * @param elevation The elevation value to apply
     */
    override fun setElevation(elevation: Float) {
      logDebug("setElevation called: $elevation (isSetup: $isSetup)")
-     
+
      // Always apply elevation changes immediately
      super.setElevation(elevation)
-     
+
      // If blur is not setup yet, trigger setup attempt
      if (!isSetup && isAttachedToWindow) {
        pendingStyleUpdate = true
@@ -177,7 +181,7 @@ class ReactNativeBlurView : BlurView {
     super.onAttachedToWindow()
     setupBlurView()
   }
-  
+
   /**
    * Called when the view is detached from a window.
    * Performs cleanup to prevent memory leaks.
@@ -186,7 +190,7 @@ class ReactNativeBlurView : BlurView {
     super.onDetachedFromWindow()
     cleanup()
   }
-  
+
   /**
    * Cleanup method to reset state and remove pending callbacks.
    * Helps prevent memory leaks and ensures clean state.
@@ -207,10 +211,10 @@ class ReactNativeBlurView : BlurView {
    */
   private fun setupBlurView() {
     if (isSetup) return
-    
+
     try {
       val rootView = findRootView()
-      
+
       rootView?.let { root ->
         try {
           // Choose blur algorithm based on Android API level
@@ -229,23 +233,22 @@ class ReactNativeBlurView : BlurView {
               throw UnsupportedOperationException("Blur not supported on this device", e)
             }
           }
-          
+
           // Setup the blur view with the appropriate algorithm
           this.setupWith(root, blurAlgorithm)
-            .setBlurRadius(blurRadius)
-            .setOverlayColor(overlayColor)
-          
-          isSetup = true
-          pendingStyleUpdate = false
-          
-          // Apply any pending background color after blur setup
-          if (hasExplicitBackground && originalBackgroundColor != null) {
-            logDebug("Applying pending background color: $originalBackgroundColor")
-            super.setBackgroundColor(originalBackgroundColor!!)
-          }
-          
-          logDebug("Blur setup successful with root: ${root.javaClass.simpleName}")
-        } catch (e: Exception) {
+          .setBlurRadius(blurRadius)
+          .setOverlayColor(overlayColor)
+
+        isSetup = true
+        pendingStyleUpdate = false
+
+        // Apply any pending background color after blur setup
+        if (hasExplicitBackground && originalBackgroundColor != null) {
+          logDebug("Applying pending background color: $originalBackgroundColor")
+          super.setBackgroundColor(originalBackgroundColor!!)
+        }
+
+        logDebug("Blur setup successful with root: ${root.javaClass.simpleName}")} catch (e: Exception) {
           logWarning("Failed to setup blur algorithm: ${e.message}")
           // Fallback: use semi-transparent overlay when blur is unsupported
           super.setBackgroundColor(overlayColor)
@@ -263,7 +266,7 @@ class ReactNativeBlurView : BlurView {
       logError("Failed to setup blur: ${e.message}", e)
     }
   }
-  
+
   /**
    * Find the root view using multiple strategies.
    * @return The root ViewGroup or null if not found
@@ -277,7 +280,7 @@ class ReactNativeBlurView : BlurView {
       }
       parent = parent.parent
     }
-    
+
     // Strategy 2: If content view not found, use the activity's root view
     try {
       val activity = context as? android.app.Activity
@@ -287,7 +290,7 @@ class ReactNativeBlurView : BlurView {
     } catch (e: Exception) {
       logDebug("Could not access activity root view: ${e.message}")
     }
-    
+
     // Strategy 3: Fallback to immediate parent
     return this.parent as? ViewGroup
   }
@@ -299,7 +302,7 @@ class ReactNativeBlurView : BlurView {
   fun setBlurAmount(amount: Float) {
     blurRadius = mapBlurAmountToRadius(amount)
     logDebug("setBlurAmount: $amount -> $blurRadius (mapped from 0-100 to 0-25 range, isSetup: $isSetup)")
-    
+
     if (isSetup) {
       try {
         setBlurRadius(blurRadius)
@@ -325,7 +328,7 @@ class ReactNativeBlurView : BlurView {
     SYSTEM_MATERIAL(Color.argb(50, 255, 255, 255)),
     SYSTEM_THICK_MATERIAL(Color.argb(65, 255, 255, 255)),
     SYSTEM_CHROME_MATERIAL(Color.argb(45, 240, 240, 240));
-    
+
     companion object {
       /**
        * Get BlurType from string, with fallback to LIGHT for unknown types.
@@ -348,7 +351,7 @@ class ReactNativeBlurView : BlurView {
       }
     }
   }
-  
+
   /**
    * Set the blur type which determines the overlay color.
    * @param type The blur type string (case-insensitive)
@@ -357,7 +360,7 @@ class ReactNativeBlurView : BlurView {
     val blurType = BlurType.fromString(type)
     overlayColor = blurType.overlayColor
     logDebug("setBlurType: $type -> ${blurType.name} (isSetup: $isSetup)")
-    
+
     if (isSetup) {
       try {
         setOverlayColor(overlayColor)
@@ -376,12 +379,12 @@ class ReactNativeBlurView : BlurView {
       try {
         val fallbackColor = Color.parseColor(it)
         logDebug("setReducedTransparencyFallbackColor: $color -> $fallbackColor (stored but not applied unless accessibility requires it)")
-        
+
         // Store the fallback color but don't apply it unless accessibility settings require it
-        // For now, we'll just log it since Android doesn't have a direct equivalent to iOS's 
+        // For now, we'll just log it since Android doesn't have a direct equivalent to iOS's
         // "Reduce Transparency" setting that we can easily check
         // The blur effect should remain the primary visual
-        
+
       } catch (e: Exception) {
         logWarning("Invalid color format for reduced transparency fallback: $color")
       }
@@ -389,4 +392,97 @@ class ReactNativeBlurView : BlurView {
       logDebug("Cleared reduced transparency fallback color")
     }
   }
+
+  /**
+   * Set the glass tint color for liquid glass effect.
+   * @param color The color string in hex format (e.g., "#FF0000") or null to clear
+   */
+  fun setGlassTintColor(color: String?) {
+    color?.let {
+      try {
+        glassTintColor = Color.parseColor(it)
+        logDebug("setGlassTintColor: $color -> $glassTintColor")
+        updateGlassEffect()
+      } catch (e: Exception) {
+        logWarning("Invalid color format for glass tint: $color")
+        glassTintColor = Color.TRANSPARENT
+      }
+    } ?: run {
+      glassTintColor = Color.TRANSPARENT
+      logDebug("Cleared glass tint color")
+      updateGlassEffect()
+    }
+  }
+
+  /**
+   * Set the glass opacity for liquid glass effect.
+   * @param opacity The opacity value (0.0 to 1.0)
+   */
+  fun setGlassOpacity(opacity: Float) {
+    glassOpacity = opacity.coerceIn(0.0f, 1.0f)
+    logDebug("setGlassOpacity: $opacity")
+    updateGlassEffect()
+  }
+
+  /**
+   * Set the view type (blur or liquidGlass).
+   * @param type The view type string
+   */
+  fun setType(type: String) {
+    viewType = type
+    logDebug("setType: $type")
+    updateViewType()
+  }
+
+  /**
+   * Set the glass type for liquid glass effect.
+   * @param type The glass type string
+   */
+  fun setGlassType(type: String) {
+    glassType = type
+    logDebug("setGlassType: $type")
+    updateGlassEffect()
+  }
+
+  /**
+   * Update the glass effect based on current glass properties.
+   */
+  private fun updateGlassEffect() {
+    if (viewType == "liquidGlass" && isSetup) {
+      try {
+        // Apply glass tint with opacity
+        val glassColor = Color.argb(
+          (glassOpacity * 255).toInt(),
+          Color.red(glassTintColor),
+          Color.green(glassTintColor),
+          Color.blue(glassTintColor)
+        )
+        setOverlayColor(glassColor)
+        logDebug("Applied glass effect: color=$glassColor, opacity=$glassOpacity")
+      } catch (e: Exception) {
+        logError("Failed to update glass effect: ${e.message}", e)
+      }
+    }
+  }
+
+  /**
+   * Update the view type and apply appropriate effects.
+   */
+  private fun updateViewType() {
+    when (viewType) {
+      "liquidGlass" -> {
+        updateGlassEffect()
+      }
+      "blur" -> {
+        // Restore original blur overlay color
+        if (isSetup) {
+          try {
+            setOverlayColor(overlayColor)
+          } catch (e: Exception) {
+            logError("Failed to restore blur overlay: ${e.message}", e)
+          }
+        }
+      }
+    }
+  }
 }

package/android/src/main/java/com/sbaiahmed1/reactnativeblur/ReactNativeBlurViewManager.kt

@@ -44,6 +44,26 @@ class ReactNativeBlurViewManager : ViewGroupManager<ReactNativeBlurView>(),
     view?.setReducedTransparencyFallbackColor(reducedTransparencyFallbackColor)
   }
 
+  @ReactProp(name = "glassTintColor")
+  override fun setGlassTintColor(view: ReactNativeBlurView?, glassTintColor: String?) {
+    view?.setGlassTintColor(glassTintColor)
+  }
+
+  @ReactProp(name = "glassOpacity")
+  override fun setGlassOpacity(view: ReactNativeBlurView?, glassOpacity: Double) {
+    view?.setGlassOpacity(glassOpacity.toFloat())
+  }
+
+  @ReactProp(name = "type")
+  override fun setType(view: ReactNativeBlurView?, type: String?) {
+    view?.setType(type ?: "blur")
+  }
+
+  @ReactProp(name = "glassType")
+  override fun setGlassType(view: ReactNativeBlurView?, glassType: String?) {
+    view?.setGlassType(glassType ?: "clear")
+  }
+
   companion object {
     const val NAME = "ReactNativeBlurView"
   }