๐จ Native iOS progressive blur for React Native (Expo) โ smooth, customizable SwiftUI blur effects with directional gradients and easy integration. ๐โจ
npm install expo-ios-visual-blur

Native SwiftUI progressive blur for React Native (Expo) on iOS โ dynamic, smooth, and configurable.
- ๐ Native SwiftUI implementation for performant and smooth blur effects on iOS
- ๐ Progressive variable blur with customizable max blur radius
- ๐ Directional blur gradients: blurred top to clear bottom or blurred bottom to clear top
- ๐จ Supports start offset control for where blur begins vertically
- โ๏ธ Dynamic, runtime-updatable blur parameters with seamless transitions
- ๐ผ๏ธ Can overlay on any React Native view with children support
- ๐ซ Safe area aware, or choose to ignore it for fullscreen effects
- ๐ญ Optional masking and flexible styling via React Native props
- ๐ฑ Exclusive iOS support using native UIVisualEffectView + CAFilter for advanced blur control
---
``bash`
npx expo install expo-ios-visual-blur
`bash`
cd ios && pod install
`bash`
npx expo prebuild --platform ios
`bash`
pnpm iosor
npx expo run:ios
> โ ๏ธ Note: This module uses SwiftUI and iOS-only native APIs โ it does not support Android or other platforms.
---
`tsx
import React from "react";
import { BlurView, BlurViewDirection } from "expo-ios-visual-blur";
import { Image } from "react-native";
export default function App() {
return (
maxBlurRadius={21}
startOffset={0.1}
style={{ borderRadius: 10, overflow: "hidden" }}
>
uri: "https://images.unsplash.com/photo-1754638069174-7aa06c176b61?q=80&w=1364&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
}}
style={{ width: 200, height: 200 }}
/>
);
}
`
---
| Prop | Type | Default | Description |
| --------------- | ------------------- | ------------------------- | -------------------------------------------------------------------- |
| maxBlurRadius | number | 20 | Maximum blur radius applied to the view |direction
| | BlurViewDirection | "blurredTopClearBottom" | Direction of the blur gradient โ from top to bottom or bottom to top |startOffset
| | number (0 to 1) | 0 | Starting point of the blur gradient (relative vertical offset) |style
| | ViewStyle | undefined | Custom styles applied to the container view |children
| | React.ReactNode | undefined | React Native children to render inside the blur |
---
Enum| Direction | Description |
| ----------------------- | ----------------------------- |
| BlurredTopClearBottom | Blur fades from top to bottom |BlurredBottomClearTop
| | Blur fades from bottom to top |
---
| Platform | Support |
| -------- | ---------------------------- |
| iOS | โ
Fully supported (SwiftUI) |
| Android | โ Not supported |
| Web | โ Not supported |
---
- โ๏ธ React Native & Expo
- ๐ SwiftUI
- ๐งช Native iOS UIVisualEffectView with custom CAFilter` for variable blur
---
Contributions, issues, and feature requests are welcome! Feel free to open a pull request or issue.
---
MIT ยฉ rit3zh