BlurSwitch

BlurSwitch renders a toggle switch. Its behavior differs meaningfully by platform:

• Android: uses QmBlurView’s BlurSwitchButtonView — the track itself is genuinely blurred, and colors are auto-calculated from a single base color.
• iOS: renders React Native’s built-in Switch component unmodified. There is no blur on iOS — BlurSwitch exists mainly for cross-platform API convenience, and thumbColor/trackColor.false only take effect there.

Basic usage

import { BlurSwitch } from '@sbaiahmed1/react-native-blur';

function BlurSwitchExample() {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <BlurSwitch
      value={isEnabled}
      onValueChange={setIsEnabled}
      blurAmount={20}
      trackColor={{ true: '#34C759' }}
    />
  );
}

Custom colors

<BlurSwitch
  value={darkMode}
  onValueChange={setDarkMode}
  blurAmount={15}
  trackColor={{ true: '#8B5CF6' }} // purple when on
  disabled={false}
/>

On Android, only set the base trackColor.true — QmBlurView automatically derives the off-state shade from it. thumbColor and trackColor.false are iOS-only.

Disabled state

<BlurSwitch
  value={true}
  onValueChange={() => {}}
  blurAmount={20}
  trackColor={{ true: '#10B981' }}
  disabled={true} // prevents interaction, keeps the current value
/>

Props