0:00/0:00

Appearance

Recorded on iPhone. A tilted wall of paintings drifts under a soft blur at the status bar and a deep frost behind the onboarding copy.

Blur

Progressive Blur

Content frosts over gradually toward any edge of the screen, with no hard line where the blur starts.

Or get it with Pro

Features

Your content fades softly into a blur at the edge of the screen, with no hard line
Blur the top, the bottom, the sides, or all four at once
Keep the screen sharp until someone scrolls, then let the blur build
Blend it into your background so buttons and text stay easy to read
Works on lists, photos, videos and web pages
The real system blur on iPhone and Android, and smooth while you scroll

Built with

Expo native module
iOS: UIVisualEffectView (Swift, Objective-C)
Android: RenderEffect (Kotlin)
Reanimated

Installation

1Install dependencies

npx expo install react-native-reanimated react-native-worklets

2Run a development build (Expo Go can't load native modules)

npx expo run:ios   # or: npx expo run:android

Usage

import { ScrollView } from 'react-native';
import { ProgressiveBlur } from '@/modules/progressive-blur';

export function Feed() {
  return (
    <ProgressiveBlur top style={{ flex: 1 }}>
      <ScrollView>{/* … */}</ScrollView>
    </ProgressiveBlur>
  );
}

With nothing else set, the top 110 points blur. The same code runs on iOS and Android.

Platforms

It's a native module with its own code for each platform, so the blur is the platform's own, not a JavaScript imitation.

	iOS	Android
Supported	iOS 16.4 and later	Android 12 (API 31) and later for the blur; Android 7–11 shows the content sharp, with the tint
Blur	UIKit's system blur (`UIVisualEffectView`), the one under iOS's own bars	Android's `RenderEffect` Gaussian blur
Native code	Swift and Objective-C	Kotlin
How the edge is built	Three system blurs of growing strength per edge, each faded in by a gradient mask (`CALayer`); paused animators hold each blur at part strength	Your content is recorded once per frame; each edge's strip is blurred at three strengths, each faded in by a gradient mask
Blur strength	Up to about 40 points, the system blur's maximum	Any `maxBlur`
`saturation`, `brightness`	Not available; a fixed soft desaturation instead	Supported

On both, the TypeScript component and Reanimated are shared: edge depths and intensity reach the native view from the UI thread, so nothing re-renders while you scroll.

How it works

It's a local Expo native module for iOS and Android: a small TypeScript component over each platform's own blur, which is why it can soften native views that a JavaScript or Skia blur can't reach. Each blurred edge is a band that stacks three blurs of growing strength, each faded in over its own slice of the curve, so the blur radius grows toward the edge instead of one heavy blur cross-fading in. On iOS these are system blur views behind gradient masks; on Android each edge strip is blurred with RenderEffect. Edge depths and intensity travel to native as animated props, so scrolling never touches React.

More once you own it

Examples, the full list of props and every advanced option for Progressive Blur are here for owners.

Next componentHolographic Sticker