This component recreates the modern, layered Apple-style translucent headers you’ll find across iOS apps like Settings, Wallet, and Music now entirely in React Native
The Progressive Blur Header uses:
MaskedView→ for applying a gradient-based mask on top of the header background.BlurView(expo-blur) → to add real-time iOS-like material blur.react-native-reanimated→ to animate the header opacity, scale, and intensity of blur as you scroll.expo-linear-gradient→ for the dynamic light-to-dark transitions.easeGradient(react-native-easing-gradient) → for natural easing between color stops.
It’s designed to feel native — blending the blurred background with subtle spring animations and masked gradients that progressively reveal the content below.
| Library | Purpose |
|---|---|
| expo-blur | System material blur |
| react-native-reanimated | Scroll animations |
| expo-linear-gradient | Gradient overlays |
| @react-native-masked-view/masked-view | Gradient masking |
| react-native-easing-gradient | Eased gradient transitions |
| expo-symbols | Native SF Symbols icons |
🌀 As you scroll down:
- The large title fades out.
- The compact header fades in with a soft spring.
- The blur intensity and gradient opacity increase progressively.
- The masked gradient reveals the translucent material underneath, creating that signature iOS floating glass effect.
git clone https://github.com/rit3zh/expo-progressive-blur
cd expo-progressive-blur
bun install
bun start --reset-cache