@sbaiahmed1/react-native-blur 0.2.0 → 0.2.1

package/README.md

@@ -34,6 +34,137 @@ A modern React Native blur view component that provides native blur effects for
 - 🛠️ **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
 
+## 📊 Library Comparison
+
+This section provides a detailed comparison between `@sbaiahmed1/react-native-blur` and other popular blur libraries in the React Native ecosystem.
+
+### vs. [@react-native-community/blur](https://www.npmjs.com/package/@react-native-community/blur)
+
+| 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      |
+| **iOS Blur Quality**         | ✅ Native UIVisualEffectView         | ✅ Native UIVisualEffectView           |
+| **TypeScript Support**       | ✅ Full TypeScript definitions       | ⚠️ Basic TypeScript support           |
+| **Maintenance Status**       | ✅ Actively maintained               | ⚠️ Community-maintained               |
+| **Bundle Size**              | 🟡 Moderate (includes BlurView lib) | 🟡 Moderate (includes BlurView lib)   |
+| **API Complexity**           | ✅ Simple, intuitive API             | ✅ Simple API                          |
+| **Performance**              | ✅ Hardware-accelerated              | 🟡 iOS: Good, Android: Limited        |
+| **Accessibility**            | ✅ Full reduced transparency support | ✅ Reduced transparency support        |
+| **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
+- **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
+- **Better Performance**: Hardware acceleration on both platforms ensures smooth rendering
+- **Active Development**: Regular updates and feature additions
+
+**When to choose @react-native-community/blur:**
+- If you need a battle-tested library with extensive community usage
+- If bundle size is a critical concern
+- If you're working with older React Native versions
+
+### vs. [expo-blur](https://www.npmjs.com/package/expo-blur)
+
+| Feature | @sbaiahmed1/react-native-blur | expo-blur |
+|---------|------------------------------|----------|
+| **Expo Dependency** | ✅ No Expo required | ❌ Requires Expo SDK |
+| **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 |
+| **Bundle Size** | 🟡 Moderate | ✅ Lightweight (when using Expo) |
+| **Setup Complexity** | ✅ Simple npm install | 🟡 Requires Expo setup |
+| **Customization** | ✅ Extensive blur type options | 🟡 Limited blur types |
+| **New Architecture** | ✅ Full Fabric support | ✅ Expo handles compatibility |
+| **Development Experience** | ✅ Standard RN development | ✅ Excellent with Expo tools |
+| **Production Flexibility** | ✅ Any deployment method | 🟡 Expo-specific deployment |
+
+**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
+- **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
+
+**When to choose expo-blur:**
+- If you're already using Expo and want ecosystem consistency
+- If you prefer Expo's managed workflow and tooling
+- If you only need basic blur effects and iOS-focused functionality
+- If you want the simplicity of Expo's managed dependencies
+
+### Performance Comparison
+
+| Metric | @sbaiahmed1/react-native-blur | @react-native-community/blur | expo-blur |
+|--------|------------------------------|------------------------------|----------|
+| **iOS Rendering** | Hardware-accelerated | Hardware-accelerated | Hardware-accelerated |
+| **Android Rendering** | Hardware-accelerated real blur | Software overlay | Software overlay |
+| **Memory Usage** | Optimized with BlurView | Low | Low |
+| **CPU Impact** | Low (GPU-based) | iOS: Low, Android: Minimal | iOS: Low, Android: Minimal |
+| **Frame Rate Impact** | Minimal on both platforms | iOS: Minimal, Android: None | iOS: Minimal, Android: None |
+
+### Community & Support
+
+| Aspect | @sbaiahmed1/react-native-blur | @react-native-community/blur | expo-blur |
+|--------|------------------------------|------------------------------|----------|
+| **GitHub Stars** | 🆕 Growing | 🌟 Established (3.8k+) | 🌟 Part of Expo ecosystem |
+| **Issue Response** | ✅ Active maintainer | 🟡 Community-driven | ✅ Expo team support |
+| **Documentation Quality** | ✅ Comprehensive | 🟡 Basic | ✅ Excellent (Expo docs) |
+| **Update Frequency** | ✅ Regular updates | 🟡 Sporadic | ✅ Regular (with Expo releases) |
+| **Breaking Changes** | ✅ Semantic versioning | ⚠️ Occasional | ✅ Managed by Expo |
+
+### Migration Guide
+
+#### From @react-native-community/blur
+
+```tsx
+// Before
+import { BlurView } from '@react-native-community/blur';
+
+// After
+import { BlurView } from '@sbaiahmed1/react-native-blur';
+
+// API is largely compatible, main differences:
+// - Better Android blur quality
+// - Additional iOS system material types
+// - Improved TypeScript support
+```
+
+#### From expo-blur
+
+```tsx
+// Before
+import { BlurView } from 'expo-blur';
+
+// After
+import { BlurView } from '@sbaiahmed1/react-native-blur';
+
+// Key differences:
+// - More blur type options available
+// - Real Android blur instead of transparency
+// - No Expo dependency required
+```
+
+### Recommendation
+
+**Choose @sbaiahmed1/react-native-blur if:**
+- You want real blur effects on Android
+- 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
+- You're starting a new project or can afford migration time
+
+**Choose @react-native-community/blur if:**
+- You have an existing project that works well with it
+- Bundle size is critical and Android blur quality is not important
+- You need maximum stability and community testing
+
+**Choose expo-blur if:**
+- You're already committed to the Expo ecosystem
+- You only need iOS blur effects
+- You prefer managed dependencies and simplified setup
+
 ## Architecture Compatibility
 
 This library is fully compatible with both React Native architectures:
@@ -84,6 +215,26 @@ The Android implementation leverages the BlurView library to provide real blur e
 - **Fallback Handling:** Gracefully handles devices with limited graphics capabilities
 - **No Extra Permissions:** Does not require additional Android permissions
 
+### Android Version Compatibility
+
+This library automatically handles Android version compatibility to prevent `NoClassDefFoundError` issues:
+
+- **Android 12+ (API 31+):** Uses `RenderEffectBlur` for optimal performance and modern blur effects
+- **Android 10-11 (API 29-30):** Automatically falls back to `RenderScriptBlur` for compatibility
+- **Older Android versions:** Graceful fallback to semi-transparent overlay when blur is not supported
+
+**Note:** The library includes automatic API level detection and will choose the appropriate blur algorithm based on the device's Android version. This ensures compatibility across all supported Android versions without requiring any additional configuration.
+
+#### Troubleshooting Android Issues
+
+If you encounter `java.lang.NoClassDefFoundError: Failed resolution of: Landroid/graphics/RenderEffect;` on Android 10 or 11:
+
+1. **This is automatically handled** - The library now includes fallback mechanisms
+2. **Update to latest version** - Ensure you're using the latest version of this library
+3. **Clean and rebuild** - Run `cd android && ./gradlew clean` then rebuild your project
+
+The error occurs because `RenderEffect` was introduced in Android 12 (API 31), but the library now automatically detects the API level and uses compatible alternatives on older versions.
+
 ## Usage
 
 ### Basic Usage

package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeBlurViewManagerDelegate.java

@@ -0,0 +1,38 @@
+/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaDelegate.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+import androidx.annotation.Nullable;
+import com.facebook.react.uimanager.BaseViewManager;
+import com.facebook.react.uimanager.BaseViewManagerDelegate;
+import com.facebook.react.uimanager.LayoutShadowNode;
+
+public class ReactNativeBlurViewManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & ReactNativeBlurViewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+  public ReactNativeBlurViewManagerDelegate(U viewManager) {
+    super(viewManager);
+  }
+  @Override
+  public void setProperty(T view, String propName, @Nullable Object value) {
+    switch (propName) {
+      case "blurType":
+        mViewManager.setBlurType(view, (String) value);
+        break;
+      case "blurAmount":
+        mViewManager.setBlurAmount(view, value == null ? 10f : ((Double) value).doubleValue());
+        break;
+      case "reducedTransparencyFallbackColor":
+        mViewManager.setReducedTransparencyFallbackColor(view, value == null ? null : (String) value);
+        break;
+      default:
+        super.setProperty(view, propName, value);
+    }
+  }
+}

package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeBlurViewManagerInterface.java

@@ -0,0 +1,20 @@
+/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaInterface.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+import androidx.annotation.Nullable;
+import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
+
+public interface ReactNativeBlurViewManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
+  void setBlurType(T view, @Nullable String value);
+  void setBlurAmount(T view, double value);
+  void setReducedTransparencyFallbackColor(T view, @Nullable String value);
+}

package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassViewManagerDelegate.java

@@ -0,0 +1,38 @@
+/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaDelegate.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+import androidx.annotation.Nullable;
+import com.facebook.react.uimanager.BaseViewManager;
+import com.facebook.react.uimanager.BaseViewManagerDelegate;
+import com.facebook.react.uimanager.LayoutShadowNode;
+
+public class ReactNativeGlassViewManagerDelegate<T extends View, U extends BaseViewManager<T, ? extends LayoutShadowNode> & ReactNativeGlassViewManagerInterface<T>> extends BaseViewManagerDelegate<T, U> {
+  public ReactNativeGlassViewManagerDelegate(U viewManager) {
+    super(viewManager);
+  }
+  @Override
+  public void setProperty(T view, String propName, @Nullable Object value) {
+    switch (propName) {
+      case "glassType":
+        mViewManager.setGlassType(view, (String) value);
+        break;
+      case "glassAmount":
+        mViewManager.setGlassAmount(view, value == null ? 50f : ((Double) value).doubleValue());
+        break;
+      case "reducedTransparencyFallbackColor":
+        mViewManager.setReducedTransparencyFallbackColor(view, value == null ? null : (String) value);
+        break;
+      default:
+        super.setProperty(view, propName, value);
+    }
+  }
+}

package/android/app/build/generated/source/codegen/java/com/facebook/react/viewmanagers/ReactNativeGlassViewManagerInterface.java

@@ -0,0 +1,20 @@
+/**
+* This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+*
+* Do not edit this file as changes may cause incorrect behavior and will be lost
+* once the code is regenerated.
+*
+* @generated by codegen project: GeneratePropsJavaInterface.js
+*/
+
+package com.facebook.react.viewmanagers;
+
+import android.view.View;
+import androidx.annotation.Nullable;
+import com.facebook.react.uimanager.ViewManagerWithGeneratedInterface;
+
+public interface ReactNativeGlassViewManagerInterface<T extends View> extends ViewManagerWithGeneratedInterface {
+  void setGlassType(T view, @Nullable String value);
+  void setGlassAmount(T view, double value);
+  void setReducedTransparencyFallbackColor(T view, @Nullable String value);
+}

package/android/app/build/generated/source/codegen/jni/CMakeLists.txt

@@ -0,0 +1,36 @@
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE on)
+
+file(GLOB react_codegen_SRCS CONFIGURE_DEPENDS *.cpp react/renderer/components/ReactNativeBlurViewSpec/*.cpp)
+
+add_library(
+  react_codegen_ReactNativeBlurViewSpec
+  OBJECT
+  ${react_codegen_SRCS}
+)
+
+target_include_directories(react_codegen_ReactNativeBlurViewSpec PUBLIC . react/renderer/components/ReactNativeBlurViewSpec)
+
+target_link_libraries(
+  react_codegen_ReactNativeBlurViewSpec
+  fbjni
+  jsi
+  # We need to link different libraries based on whether we are building rncore or not, that's necessary
+  # because we want to break a circular dependency between react_codegen_rncore and reactnative
+  reactnative
+)
+
+target_compile_options(
+  react_codegen_ReactNativeBlurViewSpec
+  PRIVATE
+  -DLOG_TAG=\"ReactNative\"
+  -fexceptions
+  -frtti
+  -std=c++20
+  -Wall
+)

package/android/app/build/generated/source/codegen/jni/ReactNativeBlurViewSpec-generated.cpp

@@ -0,0 +1,22 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateModuleJniCpp.js
+ */
+
+#include "ReactNativeBlurViewSpec.h"
+
+namespace facebook::react {
+
+
+
+std::shared_ptr<TurboModule> ReactNativeBlurViewSpec_ModuleProvider(const std::string &moduleName, const JavaTurboModule::InitParams &params) {
+
+  return nullptr;
+}
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/ReactNativeBlurViewSpec.h

@@ -0,0 +1,24 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateModuleJniH.js
+ */
+
+#pragma once
+
+#include <ReactCommon/JavaTurboModule.h>
+#include <ReactCommon/TurboModule.h>
+#include <jsi/jsi.h>
+
+namespace facebook::react {
+
+
+
+JSI_EXPORT
+std::shared_ptr<TurboModule> ReactNativeBlurViewSpec_ModuleProvider(const std::string &moduleName, const JavaTurboModule::InitParams &params);
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.cpp

@@ -0,0 +1,23 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateComponentDescriptorCpp.js
+ */
+
+#include <react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+
+namespace facebook::react {
+
+void ReactNativeBlurViewSpec_registerComponentDescriptorsFromCodegen(
+  std::shared_ptr<const ComponentDescriptorProviderRegistry> registry) {
+registry->add(concreteComponentDescriptorProvider<ReactNativeBlurViewComponentDescriptor>());
+registry->add(concreteComponentDescriptorProvider<ReactNativeGlassViewComponentDescriptor>());
+}
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.h

@@ -0,0 +1,25 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateComponentDescriptorH.js
+ */
+
+#pragma once
+
+#include <react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.h>
+#include <react/renderer/core/ConcreteComponentDescriptor.h>
+#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
+
+namespace facebook::react {
+
+using ReactNativeBlurViewComponentDescriptor = ConcreteComponentDescriptor<ReactNativeBlurViewShadowNode>;
+using ReactNativeGlassViewComponentDescriptor = ConcreteComponentDescriptor<ReactNativeGlassViewShadowNode>;
+
+void ReactNativeBlurViewSpec_registerComponentDescriptorsFromCodegen(
+  std::shared_ptr<const ComponentDescriptorProviderRegistry> registry);
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/EventEmitters.cpp

@@ -0,0 +1,17 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateEventEmitterCpp.js
+ */
+
+#include <react/renderer/components/ReactNativeBlurViewSpec/EventEmitters.h>
+
+
+namespace facebook::react {
+
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/EventEmitters.h

@@ -0,0 +1,30 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateEventEmitterH.js
+ */
+#pragma once
+
+#include <react/renderer/components/view/ViewEventEmitter.h>
+
+
+namespace facebook::react {
+class ReactNativeBlurViewEventEmitter : public ViewEventEmitter {
+ public:
+  using ViewEventEmitter::ViewEventEmitter;
+
+  
+  
+};
+class ReactNativeGlassViewEventEmitter : public ViewEventEmitter {
+ public:
+  using ViewEventEmitter::ViewEventEmitter;
+
+  
+  
+};
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/Props.cpp

@@ -0,0 +1,36 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GeneratePropsCpp.js
+ */
+
+#include <react/renderer/components/ReactNativeBlurViewSpec/Props.h>
+#include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/propsConversions.h>
+
+namespace facebook::react {
+
+ReactNativeBlurViewProps::ReactNativeBlurViewProps(
+    const PropsParserContext &context,
+    const ReactNativeBlurViewProps &sourceProps,
+    const RawProps &rawProps): ViewProps(context, sourceProps, rawProps),
+
+    blurType(convertRawProp(context, rawProps, "blurType", sourceProps.blurType, {ReactNativeBlurViewBlurType::Light})),
+    blurAmount(convertRawProp(context, rawProps, "blurAmount", sourceProps.blurAmount, {10.0})),
+    reducedTransparencyFallbackColor(convertRawProp(context, rawProps, "reducedTransparencyFallbackColor", sourceProps.reducedTransparencyFallbackColor, {}))
+      {}
+ReactNativeGlassViewProps::ReactNativeGlassViewProps(
+    const PropsParserContext &context,
+    const ReactNativeGlassViewProps &sourceProps,
+    const RawProps &rawProps): ViewProps(context, sourceProps, rawProps),
+
+    glassType(convertRawProp(context, rawProps, "glassType", sourceProps.glassType, {ReactNativeGlassViewGlassType::Default})),
+    glassAmount(convertRawProp(context, rawProps, "glassAmount", sourceProps.glassAmount, {50.0})),
+    reducedTransparencyFallbackColor(convertRawProp(context, rawProps, "reducedTransparencyFallbackColor", sourceProps.reducedTransparencyFallbackColor, {}))
+      {}
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/Props.h

@@ -0,0 +1,91 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GeneratePropsH.js
+ */
+#pragma once
+
+#include <react/renderer/components/view/ViewProps.h>
+#include <react/renderer/core/PropsParserContext.h>
+
+namespace facebook::react {
+
+enum class ReactNativeBlurViewBlurType { Xlight, Light, Dark, ExtraDark, Regular, Prominent, SystemUltraThinMaterial, SystemThinMaterial, SystemMaterial, SystemThickMaterial, SystemChromeMaterial };
+
+static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, ReactNativeBlurViewBlurType &result) {
+  auto string = (std::string)value;
+  if (string == "xlight") { result = ReactNativeBlurViewBlurType::Xlight; return; }
+  if (string == "light") { result = ReactNativeBlurViewBlurType::Light; return; }
+  if (string == "dark") { result = ReactNativeBlurViewBlurType::Dark; return; }
+  if (string == "extraDark") { result = ReactNativeBlurViewBlurType::ExtraDark; return; }
+  if (string == "regular") { result = ReactNativeBlurViewBlurType::Regular; return; }
+  if (string == "prominent") { result = ReactNativeBlurViewBlurType::Prominent; return; }
+  if (string == "systemUltraThinMaterial") { result = ReactNativeBlurViewBlurType::SystemUltraThinMaterial; return; }
+  if (string == "systemThinMaterial") { result = ReactNativeBlurViewBlurType::SystemThinMaterial; return; }
+  if (string == "systemMaterial") { result = ReactNativeBlurViewBlurType::SystemMaterial; return; }
+  if (string == "systemThickMaterial") { result = ReactNativeBlurViewBlurType::SystemThickMaterial; return; }
+  if (string == "systemChromeMaterial") { result = ReactNativeBlurViewBlurType::SystemChromeMaterial; return; }
+  abort();
+}
+
+static inline std::string toString(const ReactNativeBlurViewBlurType &value) {
+  switch (value) {
+    case ReactNativeBlurViewBlurType::Xlight: return "xlight";
+    case ReactNativeBlurViewBlurType::Light: return "light";
+    case ReactNativeBlurViewBlurType::Dark: return "dark";
+    case ReactNativeBlurViewBlurType::ExtraDark: return "extraDark";
+    case ReactNativeBlurViewBlurType::Regular: return "regular";
+    case ReactNativeBlurViewBlurType::Prominent: return "prominent";
+    case ReactNativeBlurViewBlurType::SystemUltraThinMaterial: return "systemUltraThinMaterial";
+    case ReactNativeBlurViewBlurType::SystemThinMaterial: return "systemThinMaterial";
+    case ReactNativeBlurViewBlurType::SystemMaterial: return "systemMaterial";
+    case ReactNativeBlurViewBlurType::SystemThickMaterial: return "systemThickMaterial";
+    case ReactNativeBlurViewBlurType::SystemChromeMaterial: return "systemChromeMaterial";
+  }
+}
+
+class ReactNativeBlurViewProps final : public ViewProps {
+ public:
+  ReactNativeBlurViewProps() = default;
+  ReactNativeBlurViewProps(const PropsParserContext& context, const ReactNativeBlurViewProps &sourceProps, const RawProps &rawProps);
+
+#pragma mark - Props
+
+  ReactNativeBlurViewBlurType blurType{ReactNativeBlurViewBlurType::Light};
+  double blurAmount{10.0};
+  std::string reducedTransparencyFallbackColor{};
+};
+
+enum class ReactNativeGlassViewGlassType { Clear, Default };
+
+static inline void fromRawValue(const PropsParserContext& context, const RawValue &value, ReactNativeGlassViewGlassType &result) {
+  auto string = (std::string)value;
+  if (string == "clear") { result = ReactNativeGlassViewGlassType::Clear; return; }
+  if (string == "default") { result = ReactNativeGlassViewGlassType::Default; return; }
+  abort();
+}
+
+static inline std::string toString(const ReactNativeGlassViewGlassType &value) {
+  switch (value) {
+    case ReactNativeGlassViewGlassType::Clear: return "clear";
+    case ReactNativeGlassViewGlassType::Default: return "default";
+  }
+}
+
+class ReactNativeGlassViewProps final : public ViewProps {
+ public:
+  ReactNativeGlassViewProps() = default;
+  ReactNativeGlassViewProps(const PropsParserContext& context, const ReactNativeGlassViewProps &sourceProps, const RawProps &rawProps);
+
+#pragma mark - Props
+
+  ReactNativeGlassViewGlassType glassType{ReactNativeGlassViewGlassType::Default};
+  double glassAmount{50.0};
+  std::string reducedTransparencyFallbackColor{};
+};
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ReactNativeBlurViewSpecJSI-generated.cpp

@@ -0,0 +1,17 @@
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateModuleCpp.js
+ */
+
+#include "ReactNativeBlurViewSpecJSI.h"
+
+namespace facebook::react {
+
+
+
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ReactNativeBlurViewSpecJSI.h

@@ -0,0 +1,19 @@
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateModuleH.js
+ */
+
+#pragma once
+
+#include <ReactCommon/TurboModule.h>
+#include <react/bridging/Bridging.h>
+
+namespace facebook::react {
+
+
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.cpp

@@ -0,0 +1,18 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateShadowNodeCpp.js
+ */
+
+#include <react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.h>
+
+namespace facebook::react {
+
+extern const char ReactNativeBlurViewComponentName[] = "ReactNativeBlurView";
+extern const char ReactNativeGlassViewComponentName[] = "ReactNativeGlassView";
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/ShadowNodes.h

@@ -0,0 +1,43 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateShadowNodeH.js
+ */
+
+#pragma once
+
+#include <react/renderer/components/ReactNativeBlurViewSpec/EventEmitters.h>
+#include <react/renderer/components/ReactNativeBlurViewSpec/Props.h>
+#include <react/renderer/components/ReactNativeBlurViewSpec/States.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <jsi/jsi.h>
+
+namespace facebook::react {
+
+JSI_EXPORT extern const char ReactNativeBlurViewComponentName[];
+
+/*
+ * `ShadowNode` for <ReactNativeBlurView> component.
+ */
+using ReactNativeBlurViewShadowNode = ConcreteViewShadowNode<
+    ReactNativeBlurViewComponentName,
+    ReactNativeBlurViewProps,
+    ReactNativeBlurViewEventEmitter,
+    ReactNativeBlurViewState>;
+
+JSI_EXPORT extern const char ReactNativeGlassViewComponentName[];
+
+/*
+ * `ShadowNode` for <ReactNativeGlassView> component.
+ */
+using ReactNativeGlassViewShadowNode = ConcreteViewShadowNode<
+    ReactNativeGlassViewComponentName,
+    ReactNativeGlassViewProps,
+    ReactNativeGlassViewEventEmitter,
+    ReactNativeGlassViewState>;
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/States.cpp

@@ -0,0 +1,16 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateStateCpp.js
+ */
+#include <react/renderer/components/ReactNativeBlurViewSpec/States.h>
+
+namespace facebook::react {
+
+
+
+} // namespace facebook::react

package/android/app/build/generated/source/codegen/jni/react/renderer/components/ReactNativeBlurViewSpec/States.h

@@ -0,0 +1,41 @@
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateStateH.js
+ */
+#pragma once
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#endif
+
+namespace facebook::react {
+
+class ReactNativeBlurViewState {
+public:
+  ReactNativeBlurViewState() = default;
+
+#ifdef ANDROID
+  ReactNativeBlurViewState(ReactNativeBlurViewState const &previousState, folly::dynamic data){};
+  folly::dynamic getDynamic() const {
+    return {};
+  };
+#endif
+};
+
+class ReactNativeGlassViewState {
+public:
+  ReactNativeGlassViewState() = default;
+
+#ifdef ANDROID
+  ReactNativeGlassViewState(ReactNativeGlassViewState const &previousState, folly::dynamic data){};
+  folly::dynamic getDynamic() const {
+    return {};
+  };
+#endif
+};
+
+} // namespace facebook::react

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

@@ -3,11 +3,13 @@ package com.sbaiahmed1.reactnativeblur
 import android.content.Context
 import android.graphics.Color
 import android.graphics.drawable.ColorDrawable
+import android.os.Build
 import android.util.AttributeSet
 import android.util.Log
 import android.view.ViewGroup
 import eightbitlab.com.blurview.BlurView
 import eightbitlab.com.blurview.RenderEffectBlur
+import eightbitlab.com.blurview.RenderScriptBlur
 
 /**
  * Android implementation of React Native BlurView component.
@@ -210,27 +212,54 @@ class ReactNativeBlurView : BlurView {
       val rootView = findRootView()
       
       rootView?.let { root ->
-        // Setup the blur view with RenderEffect for better performance and modern API
-        this.setupWith(root, RenderEffectBlur())
-          .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!!)
+        try {
+          // Choose blur algorithm based on Android API level
+          val blurAlgorithm = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+            // Android 12+ (API 31+): Use RenderEffectBlur for better performance
+            logDebug("Using RenderEffectBlur for API ${Build.VERSION.SDK_INT}")
+            RenderEffectBlur()
+          } else {
+            // Android 10-11 (API < 31): Use RenderScriptBlur for compatibility
+            logDebug("Using RenderScriptBlur for API ${Build.VERSION.SDK_INT}")
+            try {
+              RenderScriptBlur(context)
+            } catch (e: Exception) {
+              logWarning("RenderScriptBlur not supported on this device: ${e.message}")
+              // Fallback: return null to trigger transparent background fallback
+              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) {
+          logWarning("Failed to setup blur algorithm: ${e.message}")
+          // Fallback: use semi-transparent overlay when blur is unsupported
+          super.setBackgroundColor(overlayColor)
+          isSetup = true // Mark as setup to prevent retry loops
         }
-        
-        logDebug("Blur setup successful with root: ${root.javaClass.simpleName}")
       } ?: run {
         logWarning("No suitable root view found for blur setup")
+        // Use semi-transparent overlay when no root view is available
+        super.setBackgroundColor(overlayColor)
+        isSetup = true
       }
     } catch (e: Exception) {
-      // Fallback: set transparent background to avoid yellow tint
-      super.setBackgroundColor(Color.TRANSPARENT)
+      // Fallback: use semi-transparent overlay to avoid visual issues
+      super.setBackgroundColor(overlayColor)
       logError("Failed to setup blur: ${e.message}", e)
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbaiahmed1/react-native-blur",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "React native modern blur view",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -38,7 +38,7 @@
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
     "prepare": "bob build",
-    "release": "release-it --only-version"
+    "release": "release-it"
   },
   "keywords": [
     "react-native",