@sbaiahmed1/react-native-blur 0.1.2 → 0.2.1

package/README.md

@@ -1,7 +1,18 @@
 # @sbaiahmed1/react-native-blur
 
 A modern React Native blur view component that provides native blur 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" />
+    <img src="https://img.shields.io/npm/dm/@sbaiahmed1/react-native-blur?style=for-the-badge&color=green" alt="downloads" />
+    <img src="https://img.shields.io/github/license/sbaiahmed1/react-native-blur?style=for-the-badge&color=orange" alt="license" />
+    <img src="https://img.shields.io/github/stars/sbaiahmed1/react-native-blur?style=for-the-badge&color=yellow" alt="stars" />
+  </p>
+
+  <p>
+    <img src="https://img.shields.io/badge/New%20Architecture-Ready-purple?style=for-the-badge" alt="New Architecture" />
+  </p>
+</div>
 ## Demo
 
 <div align="center">
@@ -23,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:
@@ -73,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
@@ -217,6 +379,17 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
 
 MIT
 
+## 📊 Stats
+
+<div align="center">
+  <img src="https://img.shields.io/github/contributors/sbaiahmed1/react-native-blur?style=for-the-badge" alt="contributors" />
+  <img src="https://img.shields.io/github/last-commit/sbaiahmed1/react-native-blur?style=for-the-badge" alt="last commit" />
+  <img src="https://img.shields.io/github/issues/sbaiahmed1/react-native-blur?style=for-the-badge" alt="issues" />
+  <img src="https://img.shields.io/github/issues-pr/sbaiahmed1/react-native-blur?style=for-the-badge" alt="pull requests" />
+</div>
+
+---
+
 ## Credits
 
 Built with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

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/react/renderer/components/ReactNativeBlurViewSpec/ComponentDescriptors.cpp

@@ -17,6 +17,7 @@ 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

@@ -17,6 +17,7 @@
 namespace facebook::react {
 
 using ReactNativeBlurViewComponentDescriptor = ConcreteComponentDescriptor<ReactNativeBlurViewShadowNode>;
+using ReactNativeGlassViewComponentDescriptor = ConcreteComponentDescriptor<ReactNativeGlassViewShadowNode>;
 
 void ReactNativeBlurViewSpec_registerComponentDescriptorsFromCodegen(
   std::shared_ptr<const ComponentDescriptorProviderRegistry> registry);

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

@@ -13,4 +13,5 @@
 
 namespace facebook::react {
 
+
 } // namespace facebook::react

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

@@ -19,5 +19,12 @@ class ReactNativeBlurViewEventEmitter : public 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

@@ -23,5 +23,14 @@ ReactNativeBlurViewProps::ReactNativeBlurViewProps(
     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

@@ -60,4 +60,32 @@ class ReactNativeBlurViewProps final : public ViewProps {
   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/ShadowNodes.cpp

@@ -13,5 +13,6 @@
 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

@@ -29,4 +29,15 @@ using ReactNativeBlurViewShadowNode = ConcreteViewShadowNode<
     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.h

@@ -26,4 +26,16 @@ public:
 #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)
     }
   }
@@ -346,19 +375,13 @@ class ReactNativeBlurView : BlurView {
     color?.let {
       try {
         val fallbackColor = Color.parseColor(it)
-        // Use fallback color as overlay when accessibility settings require it
-        // This is a simplified implementation - in a full implementation,
-        // you'd check system accessibility settings
-        overlayColor = fallbackColor
-        logDebug("setReducedTransparencyFallbackColor: $color -> $fallbackColor (isSetup: $isSetup)")
+        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 
+        // "Reduce Transparency" setting that we can easily check
+        // The blur effect should remain the primary visual
         
-        if (isSetup) {
-          try {
-            setOverlayColor(overlayColor)
-          } catch (e: Exception) {
-            logError("Failed to set fallback overlay color: ${e.message}", e)
-          }
-        }
       } catch (e: Exception) {
         logWarning("Invalid color format for reduced transparency fallback: $color")
       }

package/lib/module/BlurView.js

@@ -1,14 +1,19 @@
 "use strict";
 
 import React from 'react';
+import { View } from 'react-native';
 import ReactNativeBlurView from './ReactNativeBlurViewNativeComponent';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A cross-platform blur view component that provides native blur effects.
  *
  * On iOS, this uses UIVisualEffectView for true blur effects.
  * On Android, this uses the BlurView library for hardware-accelerated blur effects.
  *
+ * This component automatically handles the proper positioning pattern where the blur
+ * effect is positioned absolutely behind the content, ensuring interactive elements
+ * work correctly.
+ *
  * @example
  * ```tsx
  * <BlurView
@@ -16,7 +21,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *   blurAmount={20}
  *   style={{ flex: 1 }}
  * >
- *   <Text>Content behind blur</Text>
+ *   <Text>Content on top of blur</Text>
+ *   <Button title="Interactive Button" onPress={() => {}} />
  * </BlurView>
  * ```
  */
@@ -28,13 +34,42 @@ export const BlurView = ({
   children,
   ...props
 }) => {
-  return /*#__PURE__*/_jsx(ReactNativeBlurView, {
-    blurType: blurType,
-    blurAmount: blurAmount,
-    reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
-    style: style,
-    ...props,
-    children: children
+  // If no children, render the blur view directly (for background use)
+  if (React.Children.count(children) === 0) {
+    return /*#__PURE__*/_jsx(ReactNativeBlurView, {
+      blurType: blurType,
+      blurAmount: blurAmount,
+      reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
+      style: style,
+      ...props
+    });
+  }
+
+  // If children exist, use the absolute positioning pattern
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      position: 'relative',
+      overflow: 'hidden'
+    }, style],
+    children: [/*#__PURE__*/_jsx(ReactNativeBlurView, {
+      blurType: blurType,
+      blurAmount: blurAmount,
+      reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      },
+      ...props
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'relative',
+        zIndex: 1
+      },
+      children: children
+    })]
   });
 };
 export default BlurView;

package/lib/module/BlurView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactNativeBlurView","jsx","_jsx","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","style","children","props"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,mBAAmB,MAEnB,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAgC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAiC,GAAGA,CAAC;EAChDC,QAAQ,GAAG,OAAO;EAClBC,UAAU,GAAG,EAAE;EACfC,gCAAgC;EAChCC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,oBACEP,IAAA,CAACF,mBAAmB;IAClBI,QAAQ,EAAEA,QAAS;IACnBC,UAAU,EAAEA,UAAW;IACvBC,gCAAgC,EAAEA,gCAAiC;IACnEC,KAAK,EAAEA,KAAM;IAAA,GACTE,KAAK;IAAAD,QAAA,EAERA;EAAQ,CACU,CAAC;AAE1B,CAAC;AAED,eAAeL,QAAQ","ignoreList":[]}
+{"version":3,"names":["React","View","ReactNativeBlurView","jsx","_jsx","jsxs","_jsxs","BlurView","blurType","blurAmount","reducedTransparencyFallbackColor","style","children","props","Children","count","position","overflow","top","left","right","bottom","zIndex"],"sourceRoot":"../../src","sources":["BlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,OAAOC,mBAAmB,MAEnB,sCAAsC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAgC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAiC,GAAGA,CAAC;EAChDC,QAAQ,GAAG,OAAO;EAClBC,UAAU,GAAG,EAAE;EACfC,gCAAgC;EAChCC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ;EACA,IAAIb,KAAK,CAACc,QAAQ,CAACC,KAAK,CAACH,QAAQ,CAAC,KAAK,CAAC,EAAE;IACxC,oBACER,IAAA,CAACF,mBAAmB;MAClBM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAEA,KAAM;MAAA,GACTE;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,oBACEP,KAAA,CAACL,IAAI;IAACU,KAAK,EAAE,CAAC;MAAEK,QAAQ,EAAE,UAAU;MAAEC,QAAQ,EAAE;IAAS,CAAC,EAAEN,KAAK,CAAE;IAAAC,QAAA,gBAEjER,IAAA,CAACF,mBAAmB;MAClBM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,gCAAgC,EAAEA,gCAAiC;MACnEC,KAAK,EAAE;QACLK,QAAQ,EAAE,UAAU;QACpBE,GAAG,EAAE,CAAC;QACNC,IAAI,EAAE,CAAC;QACPC,KAAK,EAAE,CAAC;QACRC,MAAM,EAAE;MACV,CAAE;MAAA,GACER;IAAK,CACV,CAAC,eAEFT,IAAA,CAACH,IAAI;MAACU,KAAK,EAAE;QAAEK,QAAQ,EAAE,UAAU;QAAEM,MAAM,EAAE;MAAE,CAAE;MAAAV,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC/D,CAAC;AAEX,CAAC;AAED,eAAeL,QAAQ","ignoreList":[]}

package/lib/typescript/src/BlurView.d.ts

@@ -32,6 +32,10 @@ export interface BlurViewProps {
  * On iOS, this uses UIVisualEffectView for true blur effects.
  * On Android, this uses the BlurView library for hardware-accelerated blur effects.
  *
+ * This component automatically handles the proper positioning pattern where the blur
+ * effect is positioned absolutely behind the content, ensuring interactive elements
+ * work correctly.
+ *
  * @example
  * ```tsx
  * <BlurView
@@ -39,7 +43,8 @@ export interface BlurViewProps {
  *   blurAmount={20}
  *   style={{ flex: 1 }}
  * >
- *   <Text>Content behind blur</Text>
+ *   <Text>Content on top of blur</Text>
+ *   <Button title="Interactive Button" onPress={() => {}} />
  * </BlurView>
  * ```
  */

package/lib/typescript/src/BlurView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAA4B,EAC1B,KAAK,QAAQ,EACd,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmB5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"BlurView.d.ts","sourceRoot":"","sources":["../../../src/BlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAA4B,EAC1B,KAAK,QAAQ,EACd,MAAM,sCAAsC,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA0C5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbaiahmed1/react-native-blur",
-  "version": "0.1.2",
+  "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",

package/src/BlurView.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { View } from 'react-native';
 import type { ViewStyle, StyleProp } from 'react-native';
 import ReactNativeBlurView, {
   type BlurType,
@@ -40,6 +41,10 @@ export interface BlurViewProps {
  * On iOS, this uses UIVisualEffectView for true blur effects.
  * On Android, this uses the BlurView library for hardware-accelerated blur effects.
  *
+ * This component automatically handles the proper positioning pattern where the blur
+ * effect is positioned absolutely behind the content, ensuring interactive elements
+ * work correctly.
+ *
  * @example
  * ```tsx
  * <BlurView
@@ -47,7 +52,8 @@ export interface BlurViewProps {
  *   blurAmount={20}
  *   style={{ flex: 1 }}
  * >
- *   <Text>Content behind blur</Text>
+ *   <Text>Content on top of blur</Text>
+ *   <Button title="Interactive Button" onPress={() => {}} />
  * </BlurView>
  * ```
  */
@@ -59,16 +65,39 @@ export const BlurView: React.FC<BlurViewProps> = ({
   children,
   ...props
 }) => {
+  // If no children, render the blur view directly (for background use)
+  if (React.Children.count(children) === 0) {
+    return (
+      <ReactNativeBlurView
+        blurType={blurType}
+        blurAmount={blurAmount}
+        reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
+        style={style}
+        {...props}
+      />
+    );
+  }
+
+  // If children exist, use the absolute positioning pattern
   return (
-    <ReactNativeBlurView
-      blurType={blurType}
-      blurAmount={blurAmount}
-      reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
-      style={style}
-      {...props}
-    >
-      {children}
-    </ReactNativeBlurView>
+    <View style={[{ position: 'relative', overflow: 'hidden' }, style]}>
+      {/* Blur effect positioned absolutely behind content */}
+      <ReactNativeBlurView
+        blurType={blurType}
+        blurAmount={blurAmount}
+        reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        }}
+        {...props}
+      />
+      {/* Content positioned relatively on top */}
+      <View style={{ position: 'relative', zIndex: 1 }}>{children}</View>
+    </View>
   );
 };