@sbaiahmed1/react-native-blur 4.6.1 → 4.6.2

package/src/BlurSwitch.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Platform, Switch } from 'react-native';
+import { Platform, StyleSheet, Switch } from 'react-native';
 import type { ViewStyle, StyleProp, ColorValue } from 'react-native';
 import ReactNativeBlurSwitch from './ReactNativeBlurSwitchNativeComponent';
 
@@ -30,10 +30,21 @@ export interface BlurSwitchProps {
    * @description The intensity of the blur effect (0-100)
    *
    * @platform android
+   *
    * @default 10
    */
   blurAmount?: number;
 
+  /**
+   * @description The number of blur interactions to perform for a smoother
+   * effect (1-15)
+   *
+   * @default 5
+   *
+   * @platform Android
+   */
+  blurRounds?: number;
+
   /**
    * @description The color of the switch thumb
    *
@@ -93,8 +104,9 @@ export interface BlurSwitchProps {
  */
 export const BlurSwitch: React.FC<BlurSwitchProps> = ({
   value = false,
-  onValueChange,
   blurAmount = 10,
+  blurRounds = 5,
+  onValueChange,
   thumbColor = '#FFFFFF',
   trackColor = { false: '#E5E5EA', true: '#34C759' },
   disabled = false,
@@ -117,12 +129,13 @@ export const BlurSwitch: React.FC<BlurSwitchProps> = ({
 
   return (
     <ReactNativeBlurSwitch
-      style={[{ width: 65, height: 36 }, style]}
+      style={[styles.switch, style]}
       value={value}
       onValueChange={(event) => {
         onValueChange?.(event.nativeEvent.value);
       }}
       blurAmount={blurAmount}
+      blurRounds={blurRounds}
       thumbColor={toColorString(thumbColor, '#FFFFFF')}
       trackColorOff={toColorString(trackColor?.false, '#E5E5EA')}
       trackColorOn={toColorString(trackColor?.true, '#34C759')}
@@ -132,4 +145,11 @@ export const BlurSwitch: React.FC<BlurSwitchProps> = ({
   );
 };
 
+const styles = StyleSheet.create({
+  switch: {
+    width: 65,
+    height: 36,
+  },
+});
+
 export default BlurSwitch;

package/src/BlurView.tsx

@@ -21,11 +21,21 @@ export interface BlurViewProps {
   blurAmount?: number;
 
   /**
-   * @description Fallback color when reduced transparency is enabled
+   * @description The number of blur interactions to perform for a smoother
+   * effect (1-15)
    *
-   * Accepts hex color strings like `#FFFFFF`
+   * @default 5
+   *
+   * @platform Android
+   */
+  blurRounds?: number;
+
+  /**
+   * @description Fallback color when reduced transparency is enabled
    *
    * @default '#FFFFFF'
+   *
+   * @platform iOS
    */
   reducedTransparencyFallbackColor?: string;
 
@@ -83,6 +93,7 @@ export interface BlurViewProps {
 export const BlurView: React.FC<BlurViewProps> = ({
   blurType = 'xlight',
   blurAmount = 10,
+  blurRounds = 5,
   reducedTransparencyFallbackColor = '#FFFFFF',
   overlayColor,
   style,
@@ -94,6 +105,7 @@ export const BlurView: React.FC<BlurViewProps> = ({
   const commonProps: BlurViewProps = {
     blurType,
     blurAmount,
+    blurRounds,
     ignoreSafeArea,
     reducedTransparencyFallbackColor,
   };

package/src/LiquidGlassContainer.tsx

@@ -4,10 +4,11 @@ import ReactNativeLiquidGlassContainer from './ReactNativeLiquidGlassContainerNa
 
 export interface LiquidGlassContainerProps extends ViewProps {
   /**
-   * The spacing value for the glass container effect
-   * Platform: iOS only (iOS 26+)
+   * @description The spacing value for the glass container effect
    *
    * @default 0
+   *
+   * @platform iOS
    */
   spacing?: number;
 }

package/src/LiquidGlassView.tsx

@@ -8,62 +8,72 @@ import BlurView from './BlurView';
 
 export interface LiquidGlassViewProps {
   /**
-   * The type of glass effect to apply
-   * Platform: iOS 26+ only
+   * @description The type of glass effect to apply
    *
    * @default 'clear'
+   *
+   * @platform iOS 26+
    */
   glassType?: GlassType;
 
   /**
-   * The tint color of the glass effect
-   * Accepts hex color strings like '#FFFFFF' or color names
-   * Platform: iOS 26+ only
+   * @description The tint color of the glass effect. Accepts hex color strings
+   * like '#FFFFFF' or color names
    *
    * @default 'clear'
+   *
+   * @platform iOS 26+
    */
   glassTintColor?: string;
 
   /**
-   * The opacity of the glass effect (0-1)
-   * Platform: iOS 26+ only
+   * @description The opacity of the glass effect (0-1)
    *
    * @default 1.0
+   *
+   * @platform iOS 26+
    */
   glassOpacity?: number;
 
   /**
-   * Fallback color when reduced transparency is enabled or on older iOS versions
-   * Accepts hex color strings like '#FFFFFF'
-   * Platform: iOS only
+   * @description Fallback color when reduced transparency is enabled or on
+   * older iOS versions
    *
    * @default '#FFFFFF'
+   *
+   * @platform iOS
    */
   reducedTransparencyFallbackColor?: string;
 
   /**
-   * Whether the glass view should be interactive
-   * Platform: iOS 26+ only
+   * @description Whether the glass view should be interactive
    *
    * @default true
+   *
+   * @platform iOS
    */
   isInteractive?: boolean;
 
   /**
-   * Whether the glass view should ignore safe area insets
-   * Platform: iOS 26+ only
+   * @description Whether the glass view should ignore safe area insets
    *
    * @default false
+   *
+   * @platform iOS
    */
   ignoreSafeArea?: boolean;
 
   /**
-   * Style object for the liquid glass view
+   * @description Style object for the liquid glass view
+   *
+   * @default undefined
    */
   style?: StyleProp<ViewStyle>;
 
   /**
    * Child components to render inside the liquid glass view
+   *
+   * @default undefined
    */
   children?: React.ReactNode;
 }

package/src/ProgressiveBlurView.tsx

@@ -22,6 +22,16 @@ export interface ProgressiveBlurViewProps {
    */
   blurAmount?: number;
 
+  /**
+   * @description The number of blur interactions to perform for a smoother
+   * effect (1-15)
+   *
+   * @default 5
+   *
+   * @platform Android
+   */
+  blurRounds?: number;
+
   /**
    * @description The direction of the progressive blur gradient
    * - 'blurredTopClearBottom': Blur starts at top, clear at bottom
@@ -44,9 +54,9 @@ export interface ProgressiveBlurViewProps {
   /**
    * @description Fallback color when reduced transparency is enabled
    *
-   * Accepts hex color strings like `#FFFFFF`
-   *
    * @default '#FFFFFF'
+   *
+   * @platform iOS
    */
   reducedTransparencyFallbackColor?: string;
 
@@ -115,6 +125,7 @@ export interface ProgressiveBlurViewProps {
 export const ProgressiveBlurView: React.FC<ProgressiveBlurViewProps> = ({
   blurType = 'regular',
   blurAmount = 20,
+  blurRounds = 5,
   direction = 'blurredTopClearBottom',
   startOffset = 0.0,
   reducedTransparencyFallbackColor = '#FFFFFF',
@@ -131,6 +142,7 @@ export const ProgressiveBlurView: React.FC<ProgressiveBlurViewProps> = ({
       <ReactNativeProgressiveBlurView
         blurType={blurType}
         blurAmount={blurAmount}
+        blurRounds={blurRounds}
         direction={direction}
         startOffset={startOffset}
         reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}
@@ -147,6 +159,7 @@ export const ProgressiveBlurView: React.FC<ProgressiveBlurViewProps> = ({
       <ReactNativeProgressiveBlurView
         blurType={blurType}
         blurAmount={blurAmount}
+        blurRounds={blurRounds}
         direction={direction}
         startOffset={startOffset}
         reducedTransparencyFallbackColor={reducedTransparencyFallbackColor}

package/src/ReactNativeBlurSwitchNativeComponent.ts

@@ -4,6 +4,7 @@ import type {
   WithDefault,
   Double,
   DirectEventHandler,
+  Int32,
 } from 'react-native/Libraries/Types/CodegenTypes';
 
 export interface ValueChangeEvent {
@@ -11,49 +12,13 @@ export interface ValueChangeEvent {
 }
 
 interface NativeProps extends ViewProps {
-  /**
-   * The current value of the switch
-   * @default false
-   */
   value?: WithDefault<boolean, false>;
-
-  /**
-   * The intensity of the blur effect (0-100)
-   * @default 10.0
-   */
   blurAmount?: WithDefault<Double, 10.0>;
-
-  /**
-   * The color of the switch thumb
-   * Note: Not supported by the Android implementation (no-op).
-   * Use the native iOS Switch for platform-specific thumb colors.
-   * @default '#FFFFFF'
-   */
+  blurRounds?: WithDefault<Int32, 5>;
   thumbColor?: WithDefault<string, '#FFFFFF'>;
-
-  /**
-   * The track color when switch is off
-   * Note: Not supported by the Android implementation (no-op).
-   * Use the native iOS Switch for platform-specific off-state colors.
-   * @default '#E5E5EA'
-   */
   trackColorOff?: WithDefault<string, '#E5E5EA'>;
-
-  /**
-   * The track color when switch is on
-   * @default '#34C759'
-   */
   trackColorOn?: WithDefault<string, '#34C759'>;
-
-  /**
-   * Whether the switch is disabled
-   * @default false
-   */
   disabled?: WithDefault<boolean, false>;
-
-  /**
-   * Callback invoked when the switch value changes
-   */
   onValueChange?: DirectEventHandler<Readonly<ValueChangeEvent>>;
 }
 

package/src/ReactNativeBlurViewNativeComponent.ts

@@ -3,6 +3,7 @@ import type { ViewProps } from 'react-native';
 import type {
   WithDefault,
   Double,
+  Int32,
 } from 'react-native/Libraries/Types/CodegenTypes';
 
 export type BlurType =
@@ -31,6 +32,7 @@ export type BlurType =
 interface NativeProps extends ViewProps {
   blurAmount?: WithDefault<Double, 10.0>;
   blurType?: WithDefault<BlurType, 'xlight'>;
+  blurRounds?: WithDefault<Int32, 5>;
   reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
   ignoreSafeArea?: WithDefault<boolean, true>;
 }

package/src/ReactNativeLiquidGlassContainerNativeComponent.ts

@@ -3,11 +3,6 @@ import type { ViewProps } from 'react-native';
 import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
 
 interface NativeProps extends ViewProps {
-  /**
-   * The spacing value for the glass container effect
-   * Platform: iOS only (iOS 26+)
-   * @default 0
-   */
   spacing?: Double;
 }
 

package/src/ReactNativeLiquidGlassViewNativeComponent.ts

@@ -8,46 +8,11 @@ import type {
 export type GlassType = 'clear' | 'regular';
 
 interface NativeProps extends ViewProps {
-  /**
-   * The type of glass effect to apply
-   * Platform: iOS only
-   * @default 'clear'
-   */
   glassType?: WithDefault<GlassType, 'clear'>;
-
-  /**
-   * The tint color of the glass effect
-   * Platform: iOS only
-   * @default 'clear'
-   */
   glassTintColor?: WithDefault<string, 'clear'>;
-
-  /**
-   * The opacity of the glass effect (0-1)
-   * Platform: iOS only
-   * @default 1.0
-   */
   glassOpacity?: WithDefault<Double, 1.0>;
-
-  /**
-   * Fallback color when reduced transparency is enabled
-   * Platform: iOS only
-   * @default '#FFFFFF'
-   */
   reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;
-
-  /**
-   * Whether the glass view should be interactive
-   * Platform: iOS only
-   * @default true
-   */
   isInteractive?: WithDefault<boolean, true>;
-
-  /**
-   * Whether the glass view should ignore safe area insets
-   * Platform: iOS only
-   * @default true
-   */
   ignoreSafeArea?: WithDefault<boolean, true>;
 }
 

package/src/ReactNativeProgressiveBlurViewNativeComponent.ts

@@ -3,6 +3,7 @@ import type { ViewProps } from 'react-native';
 import type {
   WithDefault,
   Double,
+  Int32,
 } from 'react-native/Libraries/Types/CodegenTypes';
 
 export type BlurType =
@@ -36,6 +37,7 @@ export type ProgressiveBlurDirection =
 interface NativeProps extends ViewProps {
   blurAmount?: WithDefault<Double, 20.0>;
   blurType?: WithDefault<BlurType, 'regular'>;
+  blurRounds?: WithDefault<Int32, 5>;
   direction?: WithDefault<ProgressiveBlurDirection, 'blurredTopClearBottom'>;
   startOffset?: WithDefault<Double, 0.0>;
   reducedTransparencyFallbackColor?: WithDefault<string, '#FFFFFF'>;