@sbaiahmed1/react-native-blur 4.3.1 → 4.4.1

package/README.md

@@ -1,6 +1,6 @@
 # @sbaiahmed1/react-native-blur
 
-A modern React Native library providing **four specialized components** for advanced visual effects: `BlurView` for native blur effects, `LiquidGlassView` for cutting-edge liquid glass effects on iOS 26+ (with Android fallback to enhanced blur), `LiquidGlassContainer` for iOS 26+ glass container effects with configurable spacing, and `ProgressiveBlurView` for smooth, variable blur transitions.
+A modern React Native library providing **five specialized components** for advanced visual effects: `BlurView` for native blur effects, `LiquidGlassView` for cutting-edge liquid glass effects on iOS 26+ (with Android fallback to enhanced blur), `LiquidGlassContainer` for iOS 26+ glass container effects with configurable spacing, `ProgressiveBlurView` for smooth, variable blur transitions, and `BlurSwitch` for beautiful blur switch buttons on Android.
 
 > **⚠️ Breaking Changes**: If upgrading from 3.x, see [Breaking Changes](#️-breaking-changes-in-v400) section.
 
@@ -133,11 +133,12 @@ import { LiquidGlassView } from '@sbaiahmed1/react-native-blur';
 
 ## Features
 
-- ✨ **Four Specialized Components**:
+- ✨ **Five Specialized Components**:
   - `BlurView` - Dedicated blur effects component with multiple blur types
   - `ProgressiveBlurView` - Variable/gradient blur transitions (iOS & Android)
   - `LiquidGlassView` - Separate component for iOS 26+ liquid glass effects
   - `LiquidGlassContainer` - iOS 26+ glass container with configurable spacing for grouping glass elements
+  - `BlurSwitch` - Beautiful blur switch button using QmBlurView (Android)
 - �🌊 **Liquid Glass Effects**: Revolutionary glass effects using iOS 26+ UIGlassEffect API
 - 🎨 **Multiple Blur Types**: Support for various blur styles including system materials on iOS
 - 📱 **Cross-Platform**: Works on both iOS and Android
@@ -154,7 +155,7 @@ import { LiquidGlassView } from '@sbaiahmed1/react-native-blur';
 
 ### Key Advantages
 
-- **Four Specialized Components**: Separate `BlurView`, `LiquidGlassView`, `LiquidGlassContainer`, and `ProgressiveBlurView` components for clean architecture
+- **Five Specialized Components**: Separate `BlurView`, `LiquidGlassView`, `LiquidGlassContainer`, `ProgressiveBlurView`, and `BlurSwitch` components for clean architecture
 - **Liquid Glass Effects**: Only library with iOS 26+ UIGlassEffect and UIGlassContainerEffect support
 - **Real Android Blur**: Hardware-accelerated blur on Android (not overlay)
 - **New Architecture**: Built for Fabric/Turbo Modules
@@ -257,7 +258,7 @@ The implementation automatically handles different Android versions:
 
 ## Usage
 
-The library now provides **four specialized components** for different visual effects:
+The library now provides **five specialized components** for different visual effects:
 
 ### BlurView - Standard Blur Effects
 
@@ -506,9 +507,72 @@ function AnimatedGlassContainer() {
 }
 ```
 
+### BlurSwitch - Blur Switch Button (Android)
+
+Use `BlurSwitch` for beautiful switch buttons with blur effects. On Android, this uses QmBlurView's `BlurSwitchButtonView`. On iOS, it falls back to the native `Switch` component.
+
+> **Note**: On Android, you only need to set the base color (`trackColor.true`), and QmBlurView will automatically calculate the colors for on/off states. The `thumbColor` and `trackColor.false` props are only supported on iOS.
+
+#### Basic Usage
+
+```tsx
+import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import { BlurSwitch } from '@sbaiahmed1/react-native-blur';
+
+function BlurSwitchExample() {
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+      <Text>Enable Feature</Text>
+      <BlurSwitch
+        value={isEnabled}
+        onValueChange={setIsEnabled}
+        blurAmount={20}
+        trackColor={{ true: '#34C759' }}
+      />
+    </View>
+  );
+}
+```
+
+#### With Custom Colors
+
+```tsx
+import React, { useState } from 'react';
+import { BlurSwitch } from '@sbaiahmed1/react-native-blur';
+
+function CustomBlurSwitch() {
+  const [darkMode, setDarkMode] = useState(false);
+
+  return (
+    <BlurSwitch
+      value={darkMode}
+      onValueChange={setDarkMode}
+      blurAmount={15}
+      trackColor={{ true: '#8B5CF6' }} // Purple when on
+      disabled={false}
+    />
+  );
+}
+```
+
+#### Disabled State
+
+```tsx
+<BlurSwitch
+  value={true}
+  onValueChange={() => {}}
+  blurAmount={20}
+  trackColor={{ true: '#10B981' }}
+  disabled={true} // Prevents user interaction, maintains current value
+/>
+```
+
 ## Props
 
-The library now provides four separate components with their own props:
+The library now provides five separate components with their own props:
 
 ### BlurView Props
 
@@ -569,6 +633,20 @@ All props are optional and have sensible defaults.
 | `style`    | `ViewStyle` | `undefined` | Style object for the glass container                                                           |
 | `children` | `ReactNode` | `undefined` | Child components to render inside the glass container (typically `LiquidGlassView` components) |
 
+### BlurSwitch Props
+
+All props are optional and have sensible defaults.
+
+| Prop           | Type                                      | Default                                   | Description                                                                                                                    |
+| -------------- | ----------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `value`        | `boolean`                                 | `false`                                   | The current value of the switch                                                                                                |
+| `onValueChange`| `(value: boolean) => void`                | `undefined`                               | Callback invoked when the switch value changes                                                                                 |
+| `blurAmount`   | `number`                                  | `10`                                      | (Android only) The intensity of the blur effect (0-100)                                                                        |
+| `thumbColor`   | `ColorValue`                              | `'#FFFFFF'`                               | (iOS only) The color of the switch thumb                                                                                       |
+| `trackColor`   | `{ false?: ColorValue; true?: ColorValue }`| `{ false: '#E5E5EA', true: '#34C759' }`  | Track colors. On Android, only `true` is used - QmBlurView auto-calculates on/off colors from base color                      |
+| `disabled`     | `boolean`                                 | `false`                                   | Whether the switch is disabled (prevents interaction but maintains current value)                                              |
+| `style`        | `ViewStyle`                               | `undefined`                               | Style object for the switch view                                                                                               |
+
 > **Note**: The `BlurType` and `GlassType` are exported types from the library. See [Blur Types](#blur-types) and [Glass Types](#glass-types) sections below for all available values.
 
 > **Platform Note**: `LiquidGlassView` automatically falls back to `BlurView` on Android and iOS versions older than iOS 26.
@@ -669,12 +747,14 @@ import {
   LiquidGlassView,
   LiquidGlassContainer,
   ProgressiveBlurView,
+  BlurSwitch,
   BlurType,
   GlassType,
   BlurViewProps,
   LiquidGlassViewProps,
   LiquidGlassContainerProps,
   ProgressiveBlurViewProps,
+  BlurSwitchProps,
 } from '@sbaiahmed1/react-native-blur';
 
 // BlurType is exported for type checking
@@ -718,6 +798,15 @@ const liquidGlassProps: LiquidGlassViewProps = {
 const liquidGlassContainerProps: LiquidGlassContainerProps = {
   spacing: 20,
 };
+
+// Example with BlurSwitch properties
+const blurSwitchProps: BlurSwitchProps = {
+  value: true,
+  onValueChange: (value) => console.log(value),
+  blurAmount: 20,
+  trackColor: { true: '#34C759' },
+  disabled: false,
+};
 ```
 
 ## Example App
@@ -728,6 +817,7 @@ The package includes a comprehensive example app that demonstrates all component
 - **LiquidGlassView Demo**: Showcase of iOS 26+ glass effects with customizable properties
 - **LiquidGlassContainer Demo**: Interactive demonstrations of glass container spacing with animated examples
 - **ProgressiveBlurView Demo**: Variable blur gradient examples for different use cases
+- **BlurSwitch Demo**: Blur switch buttons with various color configurations
 - **Practical Use Cases**: Real-world examples like cards, modals, and overlays using all components
 - **Comparison Views**: Side-by-side comparisons between different effect types
 - **Platform Fallbacks**: Visual demonstrations of how effects degrade gracefully on older platforms
@@ -798,7 +888,7 @@ yarn android
 
 ### 🎯 Component Separation (BREAKING CHANGE)
 
-- **Four Specialized Components**: Split single `BlurView` into dedicated `BlurView`, `LiquidGlassView`, `LiquidGlassContainer`, and `ProgressiveBlurView` components
+- **Five Specialized Components**: Split single `BlurView` into dedicated `BlurView`, `LiquidGlassView`, `LiquidGlassContainer`, `ProgressiveBlurView`, and `BlurSwitch` components
 - **Removed `type` prop**: No more switching between blur/liquidGlass modes - use the appropriate component instead
 - **Cleaner APIs**: Each component has focused props without mixing blur and glass properties
 - **Better Architecture**: True separation of concerns following React best practices
@@ -830,7 +920,7 @@ yarn android
 
 ### 🛠️ Developer Experience
 
-- Full TypeScript support with separate prop types for each component (`BlurViewProps`, `LiquidGlassViewProps`, `LiquidGlassContainerProps`, `ProgressiveBlurViewProps`)
+- Full TypeScript support with separate prop types for each component (`BlurViewProps`, `LiquidGlassViewProps`, `LiquidGlassContainerProps`, `ProgressiveBlurViewProps`, `BlurSwitchProps`)
 - Cleaner, more intuitive API design
 - Improved component layout handling
 - Better accessibility support with smart fallbacks

package/android/build.gradle

@@ -74,7 +74,7 @@ def kotlin_version = getExtOrDefault("kotlinVersion")
 dependencies {
   implementation "com.facebook.react:react-android"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation 'com.qmdeve.blurview:core:1.0.6'
+  implementation 'com.qmdeve.blurview:core:1.1.1'
 }
 
 react {

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

@@ -11,6 +11,7 @@ class ReactNativeBlurViewPackage : ReactPackage {
     val viewManagers: MutableList<ViewManager<*, *>> = ArrayList()
     viewManagers.add(ReactNativeBlurViewManager())
     viewManagers.add(ReactNativeProgressiveBlurViewManager())
+    viewManagers.add(ReactNativeBlurSwitchManager())
     return viewManagers
   }
 

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

@@ -0,0 +1,218 @@
+package com.sbaiahmed1.reactnativeblur
+
+import android.content.Context
+import android.util.AttributeSet
+import android.util.Log
+import android.util.TypedValue
+import android.view.MotionEvent
+import com.qmdeve.blurview.widget.BlurSwitchButtonView
+
+/**
+ * Android implementation of React Native BlurSwitch component.
+ * Provides a blur switch button using the QmBlurView library.
+ *
+ * QmBlurView is a high-performance blur library that uses native blur algorithms
+ * implemented with underlying Native calls for optimal performance.
+ *
+ * Note: You only need to set the base color (trackColorOn), and QmBlurView will
+ * automatically calculate the colors for on and off states. The thumbColor and
+ * trackColorOff props are not supported by this component.
+ */
+class ReactNativeBlurSwitch : BlurSwitchButtonView {
+  private var onValueChangeListener: ((Boolean) -> Unit)? = null
+  private var currentValue = false
+  private var isDisabled = false
+
+  companion object {
+    private const val TAG = "ReactNativeBlurSwitch"
+    private const val DEFAULT_WIDTH_DP = 65f
+    private const val DEFAULT_HEIGHT_DP = 36f
+    private const val MIN_BLUR_AMOUNT = 0f
+    private const val MAX_BLUR_AMOUNT = 100f
+    private const val MAX_BLUR_RADIUS = 25f
+    private const val DEBUG = false
+
+    private fun logDebug(message: String) {
+      if (DEBUG) {
+        Log.d(TAG, message)
+      }
+    }
+
+    private fun logWarning(message: String) {
+      Log.w(TAG, message)
+    }
+
+    private fun logError(message: String, throwable: Throwable? = null) {
+      Log.e(TAG, message, throwable)
+    }
+
+    /**
+     * Maps blur amount (0-100) to blur radius (0-25).
+     * @param amount The blur amount from 0-100
+     * @return The corresponding blur radius from 0-25
+     */
+    private fun mapBlurAmountToRadius(amount: Float): Float {
+      val clampedAmount = amount.coerceIn(MIN_BLUR_AMOUNT, MAX_BLUR_AMOUNT)
+      return (clampedAmount / MAX_BLUR_AMOUNT) * MAX_BLUR_RADIUS
+    }
+  }
+
+  constructor(context: Context?) : super(context, null) {
+    initializeSwitch()
+  }
+
+  constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs) {
+    initializeSwitch()
+  }
+
+  /**
+   * Initialize the blur switch with default settings.
+   */
+  private fun initializeSwitch() {
+    try {
+      setOnCheckedChangeListener { isChecked ->
+        if (isDisabled) {
+          setChecked(currentValue, false)
+          return@setOnCheckedChangeListener
+        }
+        if (currentValue != isChecked) {
+          currentValue = isChecked
+          onValueChangeListener?.invoke(isChecked)
+          logDebug("Value changed: $isChecked")
+        }
+      }
+      logDebug("BlurSwitch initialized")
+    } catch (e: Exception) {
+      logError("Failed to initialize switch: ${e.message}", e)
+    }
+  }
+
+  /**
+   * Called when the view is detached from a window.
+   * Performs cleanup to prevent memory leaks.
+   */
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+    cleanup()
+  }
+
+  /**
+   * Cleanup method to reset state.
+   * Helps prevent memory leaks and ensures clean state.
+   */
+  fun cleanup() {
+    setOnCheckedChangeListener(null)
+    onValueChangeListener = null
+    logDebug("View cleaned up")
+  }
+
+  /**
+   * Set the switch value.
+   * @param value The boolean value (true = on, false = off)
+   */
+  fun setValue(value: Boolean) {
+    if (currentValue != value) {
+      currentValue = value
+      setChecked(value, false)
+      logDebug("setValue: $value")
+    }
+  }
+
+  /**
+   * Set the value change listener.
+   * @param listener The callback to invoke when value changes
+   */
+  fun setOnValueChangeListener(listener: ((Boolean) -> Unit)?) {
+    onValueChangeListener = listener
+  }
+
+  /**
+   * Set the thumb color.
+   * @param color The color int for the thumb
+   */
+  fun setThumbColor(color: Int) {
+    logDebug("setThumbColor: $color (not supported by BlurSwitchButtonView)")
+  }
+
+  /**
+   * Set the track color when switch is off.
+   * @param color The color int for the off state track
+   */
+  fun setTrackColorOff(color: Int) {
+    logDebug("setTrackColorOff: $color (not supported by BlurSwitchButtonView)")
+  }
+
+  /**
+   * Set the track color when switch is on.
+   * @param color The color int for the on state track
+   */
+  fun setTrackColorOn(color: Int) {
+    try {
+      setBaseColor(color)
+      logDebug("setTrackColorOn: $color")
+    } catch (e: Exception) {
+      logError("Failed to set track color: ${e.message}", e)
+    }
+  }
+
+  /**
+   * Set the blur amount with cross-platform mapping.
+   * @param amount The blur amount value (0-100)
+   */
+  fun setBlurAmount(amount: Float) {
+    val radius = mapBlurAmountToRadius(amount)
+    logDebug("setBlurAmount: $amount -> $radius")
+
+    try {
+      setBlurRadius(radius)
+    } catch (e: Exception) {
+      logError("Failed to set blur radius: ${e.message}", e)
+    }
+  }
+
+  /**
+   * Set whether the switch is disabled.
+   * @param disabled True to disable, false to enable
+   */
+  fun setDisabled(disabled: Boolean) {
+    isDisabled = disabled
+    isEnabled = !disabled
+    isClickable = !disabled
+    alpha = if (disabled) 0.5f else 1f
+    logDebug("setDisabled: $disabled")
+  }
+
+  override fun onTouchEvent(event: MotionEvent?): Boolean {
+    if (isDisabled) {
+      return false
+    }
+    return super.onTouchEvent(event)
+  }
+
+  override fun dispatchTouchEvent(event: MotionEvent?): Boolean {
+    if (isDisabled) {
+      return false
+    }
+    return super.dispatchTouchEvent(event)
+  }
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    val defaultWidth = TypedValue.applyDimension(
+      TypedValue.COMPLEX_UNIT_DIP,
+      DEFAULT_WIDTH_DP,
+      context.resources.displayMetrics
+    ).toInt()
+
+    val defaultHeight = TypedValue.applyDimension(
+      TypedValue.COMPLEX_UNIT_DIP,
+      DEFAULT_HEIGHT_DP,
+      context.resources.displayMetrics
+    ).toInt()
+
+    val width = resolveSize(defaultWidth, widthMeasureSpec)
+    val height = resolveSize(defaultHeight, heightMeasureSpec)
+
+    setMeasuredDimension(width, height)
+  }
+}
+

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

@@ -0,0 +1,100 @@
+package com.sbaiahmed1.reactnativeblur
+
+import android.graphics.Color
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.common.MapBuilder
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.uimanager.events.RCTEventEmitter
+import androidx.core.graphics.toColorInt
+
+@ReactModule(name = ReactNativeBlurSwitchManager.NAME)
+class ReactNativeBlurSwitchManager : SimpleViewManager<ReactNativeBlurSwitch>() {
+
+  override fun getName(): String {
+    return NAME
+  }
+
+  public override fun createViewInstance(context: ThemedReactContext): ReactNativeBlurSwitch {
+    val view = ReactNativeBlurSwitch(context)
+
+    view.setOnValueChangeListener { value ->
+      context.getJSModule(RCTEventEmitter::class.java)
+        .receiveEvent(view.id, "topValueChange", Arguments.createMap().apply {
+          putBoolean("value", value)
+        })
+    }
+
+    return view
+  }
+
+  @ReactProp(name = "value")
+  fun setValue(view: ReactNativeBlurSwitch?, value: Boolean) {
+    view?.setValue(value)
+  }
+
+  @ReactProp(name = "blurAmount", defaultDouble = 10.0)
+  fun setBlurAmount(view: ReactNativeBlurSwitch?, blurAmount: Double) {
+    view?.setBlurAmount(blurAmount.toFloat())
+  }
+
+  @ReactProp(name = "thumbColor")
+  fun setThumbColor(view: ReactNativeBlurSwitch?, color: String?) {
+    color?.let {
+      try {
+        view?.setThumbColor(it.toColorInt())
+      } catch (e: Exception) {
+        android.util.Log.w("ReactNativeBlurSwitchManager", "Invalid thumbColor: $color", e)
+      }
+    }
+  }
+
+  @ReactProp(name = "trackColorOff")
+  fun setTrackColorOff(view: ReactNativeBlurSwitch?, color: String?) {
+    color?.let {
+      try {
+        view?.setTrackColorOff(it.toColorInt())
+      } catch (e: Exception) {
+        android.util.Log.w("ReactNativeBlurSwitchManager", "Invalid trackColorOff: $color", e)
+      }
+    }
+  }
+
+  @ReactProp(name = "trackColorOn")
+  fun setTrackColorOn(view: ReactNativeBlurSwitch?, color: String?) {
+    color?.let {
+     try {
+       view?.setTrackColorOn(it.toColorInt())
+     } catch (e: Exception) {
+       android.util.Log.w("ReactNativeBlurSwitchManager", "Invalid trackColorOn: $color", e)
+     }
+    }
+  }
+
+  @ReactProp(name = "disabled")
+  fun setDisabled(view: ReactNativeBlurSwitch?, disabled: Boolean) {
+    view?.setDisabled(disabled)
+  }
+
+  /**
+   * Called when view is detached from view hierarchy and allows for cleanup.
+   */
+  override fun onDropViewInstance(view: ReactNativeBlurSwitch) {
+    super.onDropViewInstance(view)
+    // Call cleanup to reset state and prevent white screen artifacts
+    view.cleanup()
+  }
+
+  override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> {
+    return MapBuilder.builder<String, Any>()
+      .put("topValueChange", MapBuilder.of("registrationName", "onValueChange"))
+      .build()
+  }
+
+  companion object {
+    const val NAME = "ReactNativeBlurSwitch"
+  }
+}
+

package/lib/module/BlurSwitch.js

@@ -0,0 +1,73 @@
+"use strict";
+
+import React from 'react';
+import { Platform, Switch } from 'react-native';
+import ReactNativeBlurSwitch from './ReactNativeBlurSwitchNativeComponent';
+import { jsx as _jsx } from "react/jsx-runtime";
+const toColorString = (color, fallback) => {
+  if (typeof color === 'string') return color;
+  return fallback;
+};
+/**
+ * A cross-platform blur switch component.
+ *
+ * On iOS, this uses the native Switch component.
+ * On Android, this uses QmBlurView's BlurSwitchButtonView for blur effects.
+ *
+ * Note: On Android, you only need to set the base color (`trackColor.true`),
+ * and QmBlurView will automatically calculate the colors for on/off states.
+ * The `thumbColor` and `trackColor.false` props are only supported on iOS.
+ *
+ * @example
+ * ```tsx
+ * <BlurSwitch
+ *   value={isEnabled}
+ *   onValueChange={setIsEnabled}
+ *   blurAmount={20}
+ *   trackColor={{ true: '#34C759' }}
+ * />
+ * ```
+ */
+export const BlurSwitch = ({
+  value = false,
+  onValueChange,
+  blurAmount = 10,
+  thumbColor = '#FFFFFF',
+  trackColor = {
+    false: '#E5E5EA',
+    true: '#34C759'
+  },
+  disabled = false,
+  style,
+  ...props
+}) => {
+  if (Platform.OS === 'ios') {
+    return /*#__PURE__*/_jsx(Switch, {
+      value: value,
+      onValueChange: onValueChange,
+      thumbColor: thumbColor,
+      trackColor: trackColor,
+      disabled: disabled,
+      style: style,
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(ReactNativeBlurSwitch, {
+    style: [{
+      width: 65,
+      height: 36
+    }, style],
+    value: value,
+    onValueChange: event => {
+      onValueChange?.(event.nativeEvent.value);
+    },
+    blurAmount: blurAmount,
+    thumbColor: toColorString(thumbColor, '#FFFFFF'),
+    trackColorOff: toColorString(trackColor?.false, '#E5E5EA'),
+    trackColorOn: toColorString(trackColor?.true, '#34C759'),
+    disabled: disabled,
+    ...props
+  });
+};
+export default BlurSwitch;
+//# sourceMappingURL=BlurSwitch.js.map

package/lib/module/BlurSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Platform","Switch","ReactNativeBlurSwitch","jsx","_jsx","toColorString","color","fallback","BlurSwitch","value","onValueChange","blurAmount","thumbColor","trackColor","false","true","disabled","style","props","OS","width","height","event","nativeEvent","trackColorOff","trackColorOn"],"sourceRoot":"../../src","sources":["BlurSwitch.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,EAAEC,MAAM,QAAQ,cAAc;AAE/C,OAAOC,qBAAqB,MAAM,wCAAwC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE3E,MAAMC,aAAa,GAAGA,CACpBC,KAA6B,EAC7BC,QAAgB,KACL;EACX,IAAI,OAAOD,KAAK,KAAK,QAAQ,EAAE,OAAOA,KAAK;EAC3C,OAAOC,QAAQ;AACjB,CAAC;AA8DD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,UAAqC,GAAGA,CAAC;EACpDC,KAAK,GAAG,KAAK;EACbC,aAAa;EACbC,UAAU,GAAG,EAAE;EACfC,UAAU,GAAG,SAAS;EACtBC,UAAU,GAAG;IAAEC,KAAK,EAAE,SAAS;IAAEC,IAAI,EAAE;EAAU,CAAC;EAClDC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ,IAAIlB,QAAQ,CAACmB,EAAE,KAAK,KAAK,EAAE;IACzB,oBACEf,IAAA,CAACH,MAAM;MACLQ,KAAK,EAAEA,KAAM;MACbC,aAAa,EAAEA,aAAc;MAC7BE,UAAU,EAAEA,UAAW;MACvBC,UAAU,EAAEA,UAAW;MACvBG,QAAQ,EAAEA,QAAS;MACnBC,KAAK,EAAEA,KAAM;MAAA,GACTC;IAAK,CACV,CAAC;EAEN;EAEA,oBACEd,IAAA,CAACF,qBAAqB;IACpBe,KAAK,EAAE,CAAC;MAAEG,KAAK,EAAE,EAAE;MAAEC,MAAM,EAAE;IAAG,CAAC,EAAEJ,KAAK,CAAE;IAC1CR,KAAK,EAAEA,KAAM;IACbC,aAAa,EAAGY,KAAK,IAAK;MACxBZ,aAAa,GAAGY,KAAK,CAACC,WAAW,CAACd,KAAK,CAAC;IAC1C,CAAE;IACFE,UAAU,EAAEA,UAAW;IACvBC,UAAU,EAAEP,aAAa,CAACO,UAAU,EAAE,SAAS,CAAE;IACjDY,aAAa,EAAEnB,aAAa,CAACQ,UAAU,EAAEC,KAAK,EAAE,SAAS,CAAE;IAC3DW,YAAY,EAAEpB,aAAa,CAACQ,UAAU,EAAEE,IAAI,EAAE,SAAS,CAAE;IACzDC,QAAQ,EAAEA,QAAS;IAAA,GACfE;EAAK,CACV,CAAC;AAEN,CAAC;AAED,eAAeV,UAAU","ignoreList":[]}

package/lib/module/ReactNativeBlurSwitchNativeComponent.ts

@@ -0,0 +1,62 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+import type {
+  WithDefault,
+  Double,
+  DirectEventHandler,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface ValueChangeEvent {
+  value: boolean;
+}
+
+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'
+   */
+  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>>;
+}
+
+export default codegenNativeComponent<NativeProps>('ReactNativeBlurSwitch', {
+  excludedPlatforms: ['iOS'],
+});

package/lib/module/index.js

@@ -9,4 +9,6 @@ export { default as ReactNativeProgressiveBlurView } from './ReactNativeProgress
 export { ProgressiveBlurView } from "./ProgressiveBlurView.js";
 export { default as ReactNativeLiquidGlassContainer } from './ReactNativeLiquidGlassContainerNativeComponent';
 export { LiquidGlassContainer } from "./LiquidGlassContainer.js";
+export { default as ReactNativeBlurSwitch } from './ReactNativeBlurSwitchNativeComponent';
+export { BlurSwitch } from "./BlurSwitch.js";
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","ReactNativeBlurView","BlurView","ReactNativeLiquidGlassView","LiquidGlassView","ReactNativeProgressiveBlurView","ProgressiveBlurView","ReactNativeLiquidGlassContainer","LiquidGlassContainer"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,mBAAmB,QAAQ,sCAAsC;AACrF,cAAc,sCAAsC;AAEpD,SAASC,QAAQ,IAAIF,OAAO,EAAEE,QAAQ,QAAQ,eAAY;AAG1D,SAASF,OAAO,IAAIG,0BAA0B,QAAQ,6CAA6C;AAGnG,SAASC,eAAe,QAAQ,sBAAmB;AAGnD,SAASJ,OAAO,IAAIK,8BAA8B,QAAQ,iDAAiD;AAG3G,SAASC,mBAAmB,QAAQ,0BAAuB;AAG3D,SAASN,OAAO,IAAIO,+BAA+B,QAAQ,kDAAkD;AAE7G,SAASC,oBAAoB,QAAQ,2BAAwB","ignoreList":[]}
+{"version":3,"names":["default","ReactNativeBlurView","BlurView","ReactNativeLiquidGlassView","LiquidGlassView","ReactNativeProgressiveBlurView","ProgressiveBlurView","ReactNativeLiquidGlassContainer","LiquidGlassContainer","ReactNativeBlurSwitch","BlurSwitch"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,OAAO,IAAIC,mBAAmB,QAAQ,sCAAsC;AACrF,cAAc,sCAAsC;AAEpD,SAASC,QAAQ,IAAIF,OAAO,EAAEE,QAAQ,QAAQ,eAAY;AAG1D,SAASF,OAAO,IAAIG,0BAA0B,QAAQ,6CAA6C;AAGnG,SAASC,eAAe,QAAQ,sBAAmB;AAGnD,SAASJ,OAAO,IAAIK,8BAA8B,QAAQ,iDAAiD;AAG3G,SAASC,mBAAmB,QAAQ,0BAAuB;AAG3D,SAASN,OAAO,IAAIO,+BAA+B,QAAQ,kDAAkD;AAE7G,SAASC,oBAAoB,QAAQ,2BAAwB;AAG7D,SAASR,OAAO,IAAIS,qBAAqB,QAAQ,wCAAwC;AAGzF,SAASC,UAAU,QAAQ,iBAAc","ignoreList":[]}

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import type { ViewStyle, StyleProp, ColorValue } from 'react-native';
+export interface BlurSwitchProps {
+    /**
+     * @description The current value of the switch
+     *
+     * @default false
+     */
+    value?: boolean;
+    /**
+     * @description Callback invoked when the switch value changes
+     *
+     * @default undefined
+     */
+    onValueChange?: (value: boolean) => void;
+    /**
+     * @description The intensity of the blur effect (0-100)
+     *
+     * @platform android
+     * @default 10
+     */
+    blurAmount?: number;
+    /**
+     * @description The color of the switch thumb
+     *
+     * @platform ios
+     * @default '#FFFFFF'
+     */
+    thumbColor?: ColorValue;
+    /**
+     * @description The track colors for off and on states
+     *
+     * Note: On Android, you only need to set the `true` (base) color.
+     * QmBlurView will automatically calculate the on/off state colors.
+     * The `false` color is only used on iOS.
+     *
+     * @default { false: '#E5E5EA', true: '#34C759' }
+     */
+    trackColor?: {
+        false?: ColorValue;
+        true?: ColorValue;
+    };
+    /**
+     * @description Whether the switch is disabled
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @description Style object for the switch view
+     *
+     * @default undefined
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * A cross-platform blur switch component.
+ *
+ * On iOS, this uses the native Switch component.
+ * On Android, this uses QmBlurView's BlurSwitchButtonView for blur effects.
+ *
+ * Note: On Android, you only need to set the base color (`trackColor.true`),
+ * and QmBlurView will automatically calculate the colors for on/off states.
+ * The `thumbColor` and `trackColor.false` props are only supported on iOS.
+ *
+ * @example
+ * ```tsx
+ * <BlurSwitch
+ *   value={isEnabled}
+ *   onValueChange={setIsEnabled}
+ *   blurAmount={20}
+ *   trackColor={{ true: '#34C759' }}
+ * />
+ * ```
+ */
+export declare const BlurSwitch: React.FC<BlurSwitchProps>;
+export default BlurSwitch;
+//# sourceMappingURL=BlurSwitch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BlurSwitch.d.ts","sourceRoot":"","sources":["../../../src/BlurSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAWrE,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE;QACX,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,IAAI,CAAC,EAAE,UAAU,CAAC;KACnB,CAAC;IAEF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuChD,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,48 @@
+import type { ViewProps } from 'react-native';
+import type { WithDefault, Double, DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+export interface ValueChangeEvent {
+    value: boolean;
+}
+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'
+     */
+    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>>;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<NativeProps>;
+export default _default;
+//# sourceMappingURL=ReactNativeBlurSwitchNativeComponent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeBlurSwitchNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ReactNativeBlurSwitchNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACN,kBAAkB,EACnB,MAAM,2CAA2C,CAAC;AAEnD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAEpC;;;OAGG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAEvC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAE5C;;;;;OAKG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAE/C;;;OAGG;IACH,YAAY,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAE9C;;;OAGG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAEvC;;OAEG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAC,CAAC;CAChE;;AAED,wBAEG"}

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

@@ -13,4 +13,8 @@ export type { ProgressiveBlurViewProps } from './ProgressiveBlurView';
 export { default as ReactNativeLiquidGlassContainer } from './ReactNativeLiquidGlassContainerNativeComponent';
 export { LiquidGlassContainer } from './LiquidGlassContainer';
 export type { LiquidGlassContainerProps } from './LiquidGlassContainer';
+export { default as ReactNativeBlurSwitch } from './ReactNativeBlurSwitchNativeComponent';
+export type { ValueChangeEvent } from './ReactNativeBlurSwitchNativeComponent';
+export { BlurSwitch } from './BlurSwitch';
+export type { BlurSwitchProps } from './BlurSwitch';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AACtF,cAAc,sCAAsC,CAAC;AAErD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3D,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,6CAA6C,CAAC;AACpG,YAAY,EAAE,SAAS,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,iDAAiD,CAAC;AAC5G,YAAY,EAAE,wBAAwB,EAAE,MAAM,iDAAiD,CAAC;AAEhG,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,kDAAkD,CAAC;AAE9G,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,sCAAsC,CAAC;AACtF,cAAc,sCAAsC,CAAC;AAErD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3D,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,6CAA6C,CAAC;AACpG,YAAY,EAAE,SAAS,EAAE,MAAM,6CAA6C,CAAC;AAE7E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,8BAA8B,EAAE,MAAM,iDAAiD,CAAC;AAC5G,YAAY,EAAE,wBAAwB,EAAE,MAAM,iDAAiD,CAAC;AAEhG,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,OAAO,IAAI,+BAA+B,EAAE,MAAM,kDAAkD,CAAC;AAE9G,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC1F,YAAY,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAE/E,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/package.json

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

package/src/BlurSwitch.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { Platform, Switch } from 'react-native';
+import type { ViewStyle, StyleProp, ColorValue } from 'react-native';
+import ReactNativeBlurSwitch from './ReactNativeBlurSwitchNativeComponent';
+
+const toColorString = (
+  color: ColorValue | undefined,
+  fallback: string
+): string => {
+  if (typeof color === 'string') return color;
+  return fallback;
+};
+
+export interface BlurSwitchProps {
+  /**
+   * @description The current value of the switch
+   *
+   * @default false
+   */
+  value?: boolean;
+
+  /**
+   * @description Callback invoked when the switch value changes
+   *
+   * @default undefined
+   */
+  onValueChange?: (value: boolean) => void;
+
+  /**
+   * @description The intensity of the blur effect (0-100)
+   *
+   * @platform android
+   * @default 10
+   */
+  blurAmount?: number;
+
+  /**
+   * @description The color of the switch thumb
+   *
+   * @platform ios
+   * @default '#FFFFFF'
+   */
+  thumbColor?: ColorValue;
+
+  /**
+   * @description The track colors for off and on states
+   *
+   * Note: On Android, you only need to set the `true` (base) color.
+   * QmBlurView will automatically calculate the on/off state colors.
+   * The `false` color is only used on iOS.
+   *
+   * @default { false: '#E5E5EA', true: '#34C759' }
+   */
+  trackColor?: {
+    false?: ColorValue;
+    true?: ColorValue;
+  };
+
+  /**
+   * @description Whether the switch is disabled
+   *
+   * @default false
+   */
+  disabled?: boolean;
+
+  /**
+   * @description Style object for the switch view
+   *
+   * @default undefined
+   */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A cross-platform blur switch component.
+ *
+ * On iOS, this uses the native Switch component.
+ * On Android, this uses QmBlurView's BlurSwitchButtonView for blur effects.
+ *
+ * Note: On Android, you only need to set the base color (`trackColor.true`),
+ * and QmBlurView will automatically calculate the colors for on/off states.
+ * The `thumbColor` and `trackColor.false` props are only supported on iOS.
+ *
+ * @example
+ * ```tsx
+ * <BlurSwitch
+ *   value={isEnabled}
+ *   onValueChange={setIsEnabled}
+ *   blurAmount={20}
+ *   trackColor={{ true: '#34C759' }}
+ * />
+ * ```
+ */
+export const BlurSwitch: React.FC<BlurSwitchProps> = ({
+  value = false,
+  onValueChange,
+  blurAmount = 10,
+  thumbColor = '#FFFFFF',
+  trackColor = { false: '#E5E5EA', true: '#34C759' },
+  disabled = false,
+  style,
+  ...props
+}) => {
+  if (Platform.OS === 'ios') {
+    return (
+      <Switch
+        value={value}
+        onValueChange={onValueChange}
+        thumbColor={thumbColor}
+        trackColor={trackColor}
+        disabled={disabled}
+        style={style}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <ReactNativeBlurSwitch
+      style={[{ width: 65, height: 36 }, style]}
+      value={value}
+      onValueChange={(event) => {
+        onValueChange?.(event.nativeEvent.value);
+      }}
+      blurAmount={blurAmount}
+      thumbColor={toColorString(thumbColor, '#FFFFFF')}
+      trackColorOff={toColorString(trackColor?.false, '#E5E5EA')}
+      trackColorOn={toColorString(trackColor?.true, '#34C759')}
+      disabled={disabled}
+      {...props}
+    />
+  );
+};
+
+export default BlurSwitch;

package/src/ReactNativeBlurSwitchNativeComponent.ts

@@ -0,0 +1,62 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+import type {
+  WithDefault,
+  Double,
+  DirectEventHandler,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface ValueChangeEvent {
+  value: boolean;
+}
+
+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'
+   */
+  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>>;
+}
+
+export default codegenNativeComponent<NativeProps>('ReactNativeBlurSwitch', {
+  excludedPlatforms: ['iOS'],
+});

package/src/index.tsx

@@ -20,3 +20,9 @@ export { default as ReactNativeLiquidGlassContainer } from './ReactNativeLiquidG
 
 export { LiquidGlassContainer } from './LiquidGlassContainer';
 export type { LiquidGlassContainerProps } from './LiquidGlassContainer';
+
+export { default as ReactNativeBlurSwitch } from './ReactNativeBlurSwitchNativeComponent';
+export type { ValueChangeEvent } from './ReactNativeBlurSwitchNativeComponent';
+
+export { BlurSwitch } from './BlurSwitch';
+export type { BlurSwitchProps } from './BlurSwitch';