@sbaiahmed1/react-native-blur 4.5.0 → 4.5.1

package/README.md

@@ -347,6 +347,29 @@ function GradientBlurComponent() {
 }
 ```
 
+#### Center Blur (new direction)
+
+`direction="blurredCenterClearTopAndBottom"` creates a long blur body that peaks in the center and fades to clear at both edges.
+
+```tsx
+<ProgressiveBlurView
+  blurType="regular"
+  blurAmount={35}
+  direction="blurredCenterClearTopAndBottom"
+  startOffset={0} // keep 0 for longest blur body; raise toward 0.3 to shorten
+  style={{ height: 220, borderRadius: 16 }}
+>
+  <Text>Clear at top</Text>
+  <Text>Blurred at center</Text>
+  <Text>Clear at bottom</Text>
+</ProgressiveBlurView>
+```
+
+Tips:
+- `startOffset` shifts where the blur plateau begins; 0 = longest body, higher = shorter.
+- `blurAmount` controls peak intensity; center direction balances strength per platform.
+- Works on iOS and Android with matching props.
+
 #### Locked Content Example
 
 Perfect for paywall/premium content:
@@ -613,7 +636,7 @@ All props are optional and have sensible defaults.
 | ---------------------------------- | ---------------------------------------------------- | ------------------------- | ---------------------------------------------------- |
 | `blurType`                         | `BlurType`                                           | `'regular'`               | The type of blur effect to apply                     |
 | `blurAmount`                       | `number`                                             | `20.0`                    | Maximum blur radius in pixels                        |
-| `direction`                        | `'blurredTopClearBottom' \| 'blurredBottomClearTop'` | `'blurredTopClearBottom'` | Direction of the blur gradient                       |
+| `direction`                        | `'blurredTopClearBottom' \| 'blurredBottomClearTop' \| 'blurredCenterClearTopAndBottom'` | `'blurredTopClearBottom'` | Direction of the blur gradient                       |
 | `startOffset`                      | `number`                                             | `0.0`                     | Where the gradient starts (0.0 to 1.0)               |
 | `reducedTransparencyFallbackColor` | `string`                                             | `'#FFFFFF'`               | Fallback color when reduced transparency is enabled  |
 | `overlayColor`                     | `ColorValue`                                         | `undefined`               | The overlay color to apply on top of the blur effect |

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

@@ -14,6 +14,7 @@ import android.widget.FrameLayout
 import android.view.View.MeasureSpec
 import com.qmdeve.blurview.widget.BlurView
 import androidx.core.graphics.toColorInt
+import kotlin.math.max
 
 /**
  * Android implementation of React Native ProgressiveBlurView component.
@@ -146,42 +147,74 @@ class ReactNativeProgressiveBlurView : FrameLayout {
     }
 
     try {
-      val (x0, y0, x1, y1) = when (currentDirection) {
-        "bottomToTop" -> {
-          // Blur at bottom, clear at top
-          // point0 (TRANSPARENT/clear) at top, point1 (WHITE/blur) at bottom adjusted by offset
-          val offsetPixels = height * currentStartOffset
-          floatArrayOf(0f, 0f, 0f, height - offsetPixels)
+      val gradient = when (currentDirection) {
+        "center" -> {
+          val startEdge = max(currentStartOffset, 0.01f)
+          val endEdge = 1f - startEdge
+          val centerLow = 0.2f + startEdge
+          val centerHigh = 0.8f - startEdge
+
+          LinearGradient(
+            0f,
+            0f,
+            0f,
+            height.toFloat(),
+            intArrayOf(
+              Color.TRANSPARENT,
+              Color.TRANSPARENT,
+              Color.WHITE,
+              Color.WHITE,
+              Color.TRANSPARENT,
+              Color.TRANSPARENT
+            ),
+            floatArrayOf(
+              0f,
+              startEdge,
+              centerLow,
+              centerHigh,
+              endEdge,
+              1f
+            ),
+            Shader.TileMode.CLAMP
+          )
         }
-        "topToBottom" -> {
-          // Blur at top, clear at bottom (default)
-          // point0 (TRANSPARENT/clear) at bottom, point1 (WHITE/blur) at top adjusted by offset
-          val offsetPixels = height * currentStartOffset
-          floatArrayOf(0f, height.toFloat(), 0f, offsetPixels)
+        else -> {
+          val (x0, y0, x1, y1) = when (currentDirection) {
+            "bottomToTop" -> {
+              // Blur at bottom, clear at top
+              // point0 (TRANSPARENT/clear) at top, point1 (WHITE/blur) at bottom adjusted by offset
+              val offsetPixels = height * currentStartOffset
+              floatArrayOf(0f, 0f, 0f, height - offsetPixels)
+            }
+            "topToBottom" -> {
+              // Blur at top, clear at bottom (default)
+              // point0 (TRANSPARENT/clear) at bottom, point1 (WHITE/blur) at top adjusted by offset
+              val offsetPixels = height * currentStartOffset
+              floatArrayOf(0f, height.toFloat(), 0f, offsetPixels)
+            }
+            "leftToRight" -> {
+              val offsetPixels = width * currentStartOffset
+              floatArrayOf(offsetPixels, 0f, width.toFloat(), 0f)
+            }
+            "rightToLeft" -> {
+              val offsetPixels = width * currentStartOffset
+              floatArrayOf(width.toFloat(), 0f, offsetPixels, 0f)
+            }
+            else -> floatArrayOf(0f, 0f, 0f, height.toFloat())
+          }
+
+          LinearGradient(
+            x0, y0, x1, y1,
+            intArrayOf(Color.TRANSPARENT, Color.WHITE),
+            floatArrayOf(0f, 1f),
+            Shader.TileMode.CLAMP
+          )
         }
-        "leftToRight" -> {
-          val offsetPixels = width * currentStartOffset
-          floatArrayOf(offsetPixels, 0f, width.toFloat(), 0f)
-        }
-        "rightToLeft" -> {
-          val offsetPixels = width * currentStartOffset
-          floatArrayOf(width.toFloat(), 0f, offsetPixels, 0f)
-        }
-        else -> floatArrayOf(0f, 0f, 0f, height.toFloat())
       }
 
-      // Create gradient: fully transparent -> fully opaque
-      // This masks the blur: opaque = blur visible, transparent = blur hidden (clear)
-      val gradient = LinearGradient(
-        x0, y0, x1, y1,
-        intArrayOf(Color.TRANSPARENT, Color.WHITE),
-        floatArrayOf(0f, 1f),
-        Shader.TileMode.CLAMP
-      )
-
       gradientPaint.shader = gradient
 
-      logDebug("Updated gradient: direction=$currentDirection, start=($x0,$y0), end=($x1,$y1), offset=$currentStartOffset")
+      logDebug("Updated gradient: direction=$currentDirection, offset=$currentStartOffset")
       invalidate()
 
     } catch (e: Exception) {
@@ -232,8 +265,13 @@ class ReactNativeProgressiveBlurView : FrameLayout {
    * @param amount The blur amount value (0-100), will be mapped to Android's 0-25 radius range
    */
   fun setBlurAmount(amount: Float) {
-    currentBlurRadius = mapBlurAmountToRadius(amount)
-    logDebug("setBlurAmount: $amount -> $currentBlurRadius")
+    var radius = mapBlurAmountToRadius(amount)
+    if (currentDirection == "center") {
+      // Center direction tends to look stronger; scale it down for parity with iOS
+      radius *= 0.35f
+    }
+    currentBlurRadius = radius
+    logDebug("setBlurAmount: $amount -> $currentBlurRadius (direction=$currentDirection)")
 
     try {
       blurView?.setBlurRadius(currentBlurRadius)
@@ -251,8 +289,9 @@ class ReactNativeProgressiveBlurView : FrameLayout {
     currentDirection = when (direction.lowercase()) {
       "blurredbottomcleartop", "bottomtotop", "bottom" -> "bottomToTop"
       "blurredtopclearbottom", "toptobottom", "top" -> "topToBottom"
+      "blurredcentercleartopandbottom", "center" -> "center"
       "blurredlefttoclearright", "lefttoright", "left" -> "leftToRight"
-      "blurredrightoclearleft", "righttoleft", "right" -> "rightToLeft"
+      "blurredrighttoclearleft", "righttoleft", "right" -> "rightToLeft"
       else -> {
         logWarning("Unknown direction: $direction, defaulting to topToBottom")
         "topToBottom"

package/ios/Views/VariableBlurView.swift

@@ -9,11 +9,14 @@ import QuartzCore
 public enum VariableBlurDirection: String {
   case blurredTopClearBottom
   case blurredBottomClearTop
+  case blurredCenterClearTopAndBottom
 
   init(fromString string: String) {
     switch string.lowercased() {
     case "blurredbottomcleartop", "bottomtotop", "bottom":
       self = .blurredBottomClearTop
+    case "blurredcentercleartopandbottom", "center":
+      self = .blurredCenterClearTopAndBottom
     default:
       self = .blurredTopClearBottom
     }
@@ -122,21 +125,144 @@ open class VariableBlurView: UIVisualEffectView {
     startOffset: CGFloat,
     direction: VariableBlurDirection
   ) -> CGImage {
-    // Try smoothLinearGradient for smoother transitions
-    let ciGradientFilter = CIFilter.smoothLinearGradient()
-    ciGradientFilter.color0 = CIColor.black
-    ciGradientFilter.color1 = CIColor.clear
-    ciGradientFilter.point0 = CGPoint(x: 0, y: height)
-    ciGradientFilter.point1 = CGPoint(x: 0, y: startOffset * height)
-
-    if case .blurredBottomClearTop = direction {
-      ciGradientFilter.point0.y = 0
-      ciGradientFilter.point1.y = height - ciGradientFilter.point1.y
+    switch direction {
+    case .blurredCenterClearTopAndBottom:
+      return makeCenterGradientImage(
+        width: width,
+        height: height,
+        edgeOffset: startOffset
+      )
+    case .blurredTopClearBottom, .blurredBottomClearTop:
+      // Try smoothLinearGradient for smoother transitions
+      let ciGradientFilter = CIFilter.smoothLinearGradient()
+      ciGradientFilter.color0 = CIColor.black
+      ciGradientFilter.color1 = CIColor.clear
+      ciGradientFilter.point0 = CGPoint(x: 0, y: height)
+      ciGradientFilter.point1 = CGPoint(x: 0, y: startOffset * height)
+
+      if case .blurredBottomClearTop = direction {
+        ciGradientFilter.point0.y = 0
+        ciGradientFilter.point1.y = height - ciGradientFilter.point1.y
+      }
+
+      guard let output = ciGradientFilter.outputImage else {
+        return makeFallbackMask(width: width, height: height)
+      }
+
+      guard let cg = CIContext().createCGImage(
+        output,
+        from: CGRect(x: 0, y: 0, width: width, height: height)
+      ) else {
+        return makeFallbackMask(width: width, height: height)
+      }
+
+      return cg
     }
+  }
+
+  private func makeCenterGradientImage(
+    width: CGFloat = 100,
+    height: CGFloat = 100,
+    edgeOffset: CGFloat
+  ) -> CGImage {
+    let startEdge = max(min(edgeOffset, 0.2), 0.01)
+    let endEdge = 1 - startEdge
+    let colorSpace = CGColorSpaceCreateDeviceRGB()
 
-    return CIContext().createCGImage(
-      ciGradientFilter.outputImage!,
-      from: CGRect(x: 0, y: 0, width: width, height: height)
+    let centerLow: CGFloat = 0.5
+    let centerHigh: CGFloat = 0.5
+    let locations: [CGFloat] = [
+      0.0,
+      startEdge,
+      centerLow,
+      centerHigh,
+      endEdge,
+      1.0
+    ]
+
+    let colorComponents: [CGFloat] = [
+      0, 0, 0, 0, // top clear
+      0, 0, 0, 0, // clear until offset
+      0, 0, 0, 1, // ramp up to opaque
+      0, 0, 0, 1, // hold opaque plateau
+      0, 0, 0, 0, // back to clear
+      0, 0, 0, 0  // bottom clear
+    ]
+
+    let context = CGContext(
+      data: nil,
+      width: Int(width),
+      height: Int(height),
+      bitsPerComponent: 8,
+      bytesPerRow: 0,
+      space: colorSpace,
+      bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue
     )!
+
+    guard let gradient = CGGradient(
+      colorSpace: colorSpace,
+      colorComponents: colorComponents,
+      locations: locations,
+      count: locations.count
+    ) else {
+      return makeFallbackMask(width: width, height: height)
+    }
+
+    context.drawLinearGradient(
+      gradient,
+      start: CGPoint(x: 0, y: 0),
+      end: CGPoint(x: 0, y: height),
+      options: []
+    )
+
+    return context.makeImage() ?? makeFallbackMask(width: width, height: height)
+  }
+
+  private func makeFallbackMask(width: CGFloat, height: CGFloat) -> CGImage {
+    let fallback = CIFilter.smoothLinearGradient()
+    fallback.color0 = CIColor.black
+    fallback.color1 = CIColor.clear
+    fallback.point0 = CGPoint(x: 0, y: height)
+    fallback.point1 = CGPoint(x: 0, y: height / 2)
+
+    if let output = fallback.outputImage,
+       let cg = CIContext().createCGImage(
+         output,
+         from: CGRect(x: 0, y: 0, width: width, height: height)
+       ) {
+      return cg
+    }
+
+    // Last-resort solid mask (fully opaque) to avoid crash loops
+    let colorSpace = CGColorSpaceCreateDeviceGray()
+    let bitmapInfo = CGImageAlphaInfo.none.rawValue
+    guard let context = CGContext(
+      data: nil,
+      width: Int(max(width, 1)),
+      height: Int(max(height, 1)),
+      bitsPerComponent: 8,
+      bytesPerRow: 0,
+      space: colorSpace,
+      bitmapInfo: bitmapInfo
+    ) else {
+      // Should never happen; return a 1x1 opaque pixel
+      return CGImage(
+        width: 1,
+        height: 1,
+        bitsPerComponent: 8,
+        bitsPerPixel: 8,
+        bytesPerRow: 1,
+        space: colorSpace,
+        bitmapInfo: CGBitmapInfo(rawValue: bitmapInfo),
+        provider: CGDataProvider(data: Data([0xFF]) as CFData)!,
+        decode: nil,
+        shouldInterpolate: false,
+        intent: .defaultIntent
+      )!
+    }
+
+    context.setFillColor(CGColor(gray: 0, alpha: 1))
+    context.fill(CGRect(x: 0, y: 0, width: width, height: height))
+    return context.makeImage()!
   }
 }

package/lib/module/ProgressiveBlurView.js

@@ -83,10 +83,7 @@ export const ProgressiveBlurView = ({
       reducedTransparencyFallbackColor: reducedTransparencyFallbackColor,
       style: StyleSheet.absoluteFill,
       ...props
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.children,
-      children: children
-    })]
+    }), children]
   });
 };
 export default ProgressiveBlurView;
@@ -94,10 +91,6 @@ const styles = StyleSheet.create({
   container: {
     position: 'relative',
     overflow: 'hidden'
-  },
-  children: {
-    position: 'relative',
-    zIndex: 1
   }
 });
 //# sourceMappingURL=ProgressiveBlurView.js.map

package/lib/module/ProgressiveBlurView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Children","StyleSheet","View","ReactNativeProgressiveBlurView","jsx","_jsx","jsxs","_jsxs","ProgressiveBlurView","blurType","blurAmount","direction","startOffset","reducedTransparencyFallbackColor","overlayColor","style","children","props","overlay","backgroundColor","count","styles","container","absoluteFill","create","position","overflow","zIndex"],"sourceRoot":"../../src","sources":["ProgressiveBlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,OAAOC,8BAA8B,MAG9B,iDAAiD;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAmEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,mBAAuD,GAAGA,CAAC;EACtEC,QAAQ,GAAG,SAAS;EACpBC,UAAU,GAAG,EAAE;EACfC,SAAS,GAAG,uBAAuB;EACnCC,WAAW,GAAG,GAAG;EACjBC,gCAAgC,GAAG,SAAS;EAC5CC,YAAY;EACZC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,OAAO,GAAG;IAAEC,eAAe,EAAEL;EAAa,CAAC;;EAEjD;EACA,IAAI,CAACd,QAAQ,CAACoB,KAAK,CAACJ,QAAQ,CAAC,EAAE;IAC7B,oBACEX,IAAA,CAACF,8BAA8B;MAC7BM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBC,WAAW,EAAEA,WAAY;MACzBC,gCAAgC,EAAEA,gCAAiC;MACnEE,KAAK,EAAE,CAACA,KAAK,EAAEG,OAAO,CAAE;MAAA,GACpBD;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,oBACEV,KAAA,CAACL,IAAI;IAACa,KAAK,EAAE,CAACM,MAAM,CAACC,SAAS,EAAEP,KAAK,EAAEG,OAAO,CAAE;IAAAF,QAAA,gBAE9CX,IAAA,CAACF,8BAA8B;MAC7BM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBC,WAAW,EAAEA,WAAY;MACzBC,gCAAgC,EAAEA,gCAAiC;MACnEE,KAAK,EAAEd,UAAU,CAACsB,YAAa;MAAA,GAC3BN;IAAK,CACV,CAAC,eAEFZ,IAAA,CAACH,IAAI;MAACa,KAAK,EAAEM,MAAM,CAACL,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAAA,CAC3C,CAAC;AAEX,CAAC;AAED,eAAeR,mBAAmB;AAElC,MAAMa,MAAM,GAAGpB,UAAU,CAACuB,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ,CAAC;EACDV,QAAQ,EAAE;IACRS,QAAQ,EAAE,UAAU;IACpBE,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Children","StyleSheet","View","ReactNativeProgressiveBlurView","jsx","_jsx","jsxs","_jsxs","ProgressiveBlurView","blurType","blurAmount","direction","startOffset","reducedTransparencyFallbackColor","overlayColor","style","children","props","overlay","backgroundColor","count","styles","container","absoluteFill","create","position","overflow"],"sourceRoot":"../../src","sources":["ProgressiveBlurView.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,OAAOC,8BAA8B,MAG9B,iDAAiD;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAoEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,mBAAuD,GAAGA,CAAC;EACtEC,QAAQ,GAAG,SAAS;EACpBC,UAAU,GAAG,EAAE;EACfC,SAAS,GAAG,uBAAuB;EACnCC,WAAW,GAAG,GAAG;EACjBC,gCAAgC,GAAG,SAAS;EAC5CC,YAAY;EACZC,KAAK;EACLC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,OAAO,GAAG;IAAEC,eAAe,EAAEL;EAAa,CAAC;;EAEjD;EACA,IAAI,CAACd,QAAQ,CAACoB,KAAK,CAACJ,QAAQ,CAAC,EAAE;IAC7B,oBACEX,IAAA,CAACF,8BAA8B;MAC7BM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBC,WAAW,EAAEA,WAAY;MACzBC,gCAAgC,EAAEA,gCAAiC;MACnEE,KAAK,EAAE,CAACA,KAAK,EAAEG,OAAO,CAAE;MAAA,GACpBD;IAAK,CACV,CAAC;EAEN;;EAEA;EACA,oBACEV,KAAA,CAACL,IAAI;IAACa,KAAK,EAAE,CAACM,MAAM,CAACC,SAAS,EAAEP,KAAK,EAAEG,OAAO,CAAE;IAAAF,QAAA,gBAE9CX,IAAA,CAACF,8BAA8B;MAC7BM,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBC,WAAW,EAAEA,WAAY;MACzBC,gCAAgC,EAAEA,gCAAiC;MACnEE,KAAK,EAAEd,UAAU,CAACsB,YAAa;MAAA,GAC3BN;IAAK,CACV,CAAC,EAEDD,QAAQ;EAAA,CACL,CAAC;AAEX,CAAC;AAED,eAAeR,mBAAmB;AAElC,MAAMa,MAAM,GAAGpB,UAAU,CAACuB,MAAM,CAAC;EAC/BF,SAAS,EAAE;IACTG,QAAQ,EAAE,UAAU;IACpBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/ReactNativeProgressiveBlurViewNativeComponent.ts

@@ -30,7 +30,8 @@ export type BlurType =
 
 export type ProgressiveBlurDirection =
   | 'blurredTopClearBottom'
-  | 'blurredBottomClearTop';
+  | 'blurredBottomClearTop'
+  | 'blurredCenterClearTopAndBottom';
 
 interface NativeProps extends ViewProps {
   blurAmount?: WithDefault<Double, 20.0>;

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

@@ -19,6 +19,7 @@ export interface ProgressiveBlurViewProps {
      * @description The direction of the progressive blur gradient
      * - 'blurredTopClearBottom': Blur starts at top, clear at bottom
      * - 'blurredBottomClearTop': Blur starts at bottom, clear at top
+     * - 'blurredCenterClearTopAndBottom': Blur peaks at center, clear at both edges
      *
      * @default 'blurredTopClearBottom'
      */

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressiveBlurView.d.ts","sourceRoot":"","sources":["../../../src/ProgressiveBlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrE,OAAuC,EACrC,KAAK,QAAQ,EACb,KAAK,wBAAwB,EAC9B,MAAM,iDAAiD,CAAC;AAEzD,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,wBAAwB,CAAC;IAErC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;OAMG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;;;OAIG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAE1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA6ClE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ProgressiveBlurView.d.ts","sourceRoot":"","sources":["../../../src/ProgressiveBlurView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrE,OAAuC,EACrC,KAAK,QAAQ,EACb,KAAK,wBAAwB,EAC9B,MAAM,iDAAiD,CAAC;AAEzD,MAAM,WAAW,wBAAwB;IACvC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,wBAAwB,CAAC;IAErC;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;OAMG;IACH,gCAAgC,CAAC,EAAE,MAAM,CAAC;IAE1C;;;;OAIG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAE1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA6ClE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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

@@ -1,7 +1,7 @@
 import type { ViewProps } from 'react-native';
 import type { WithDefault, Double } from 'react-native/Libraries/Types/CodegenTypes';
 export type BlurType = 'xlight' | 'light' | 'dark' | 'extraDark' | 'regular' | 'prominent' | 'systemUltraThinMaterial' | 'systemThinMaterial' | 'systemMaterial' | 'systemThickMaterial' | 'systemChromeMaterial' | 'systemUltraThinMaterialLight' | 'systemThinMaterialLight' | 'systemMaterialLight' | 'systemThickMaterialLight' | 'systemChromeMaterialLight' | 'systemUltraThinMaterialDark' | 'systemThinMaterialDark' | 'systemMaterialDark' | 'systemThickMaterialDark' | 'systemChromeMaterialDark';
-export type ProgressiveBlurDirection = 'blurredTopClearBottom' | 'blurredBottomClearTop';
+export type ProgressiveBlurDirection = 'blurredTopClearBottom' | 'blurredBottomClearTop' | 'blurredCenterClearTopAndBottom';
 interface NativeProps extends ViewProps {
     blurAmount?: WithDefault<Double, 20.0>;
     blurType?: WithDefault<BlurType, 'regular'>;

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

@@ -1 +1 @@
-{"version":3,"file":"ReactNativeProgressiveBlurViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeProgressiveBlurViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACP,MAAM,2CAA2C,CAAC;AAEnD,MAAM,MAAM,QAAQ,GAChB,QAAQ,GACR,OAAO,GACP,MAAM,GACN,WAAW,GACX,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAC;AAE/B,MAAM,MAAM,wBAAwB,GAChC,uBAAuB,GACvB,uBAAuB,CAAC;AAE5B,UAAU,WAAY,SAAQ,SAAS;IACrC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,WAAW,CAAC,wBAAwB,EAAE,uBAAuB,CAAC,CAAC;IAC3E,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,gCAAgC,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACnE;;AAED,wBAEE"}
+{"version":3,"file":"ReactNativeProgressiveBlurViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeProgressiveBlurViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACP,MAAM,2CAA2C,CAAC;AAEnD,MAAM,MAAM,QAAQ,GAChB,QAAQ,GACR,OAAO,GACP,MAAM,GACN,WAAW,GACX,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAC;AAE/B,MAAM,MAAM,wBAAwB,GAChC,uBAAuB,GACvB,uBAAuB,GACvB,gCAAgC,CAAC;AAErC,UAAU,WAAY,SAAQ,SAAS;IACrC,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,WAAW,CAAC,wBAAwB,EAAE,uBAAuB,CAAC,CAAC;IAC3E,WAAW,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,gCAAgC,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACnE;;AAED,wBAEE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbaiahmed1/react-native-blur",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "description": "React native modern blur view",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/ProgressiveBlurView.tsx

@@ -26,6 +26,7 @@ export interface ProgressiveBlurViewProps {
    * @description The direction of the progressive blur gradient
    * - 'blurredTopClearBottom': Blur starts at top, clear at bottom
    * - 'blurredBottomClearTop': Blur starts at bottom, clear at top
+   * - 'blurredCenterClearTopAndBottom': Blur peaks at center, clear at both edges
    *
    * @default 'blurredTopClearBottom'
    */
@@ -153,7 +154,7 @@ export const ProgressiveBlurView: React.FC<ProgressiveBlurViewProps> = ({
         {...props}
       />
 
-      <View style={styles.children}>{children}</View>
+      {children}
     </View>
   );
 };
@@ -165,8 +166,4 @@ const styles = StyleSheet.create({
     position: 'relative',
     overflow: 'hidden',
   },
-  children: {
-    position: 'relative',
-    zIndex: 1,
-  },
 });

package/src/ReactNativeProgressiveBlurViewNativeComponent.ts

@@ -30,7 +30,8 @@ export type BlurType =
 
 export type ProgressiveBlurDirection =
   | 'blurredTopClearBottom'
-  | 'blurredBottomClearTop';
+  | 'blurredBottomClearTop'
+  | 'blurredCenterClearTopAndBottom';
 
 interface NativeProps extends ViewProps {
   blurAmount?: WithDefault<Double, 20.0>;