ProgressiveBlurView

ProgressiveBlurView renders a variable/gradient blur that transitions smoothly instead of applying a uniform blur intensity. It works on both iOS and Android, though the underlying implementations differ:

• iOS: private Core Animation filters for true variable blur.
• Android: extends QmBlurView’s BlurView with custom gradient masking.

Progressive blur startOffset behaves slightly differently between the two platforms — test both when tuning a design.

Basic usage

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

<ProgressiveBlurView
  blurType="light"
  blurAmount={30}
  direction="blurredTopClearBottom"
  startOffset={0}
  style={{ height: 200 }}
>
  <Text>Progressive blur from top (blurred) to bottom (clear)</Text>
</ProgressiveBlurView>

Center blur

direction="blurredCenterClearTopAndBottom" creates a blur body that peaks in the center and fades to clear at both edges.

<ProgressiveBlurView
  blurType="regular"
  blurAmount={35}
  direction="blurredCenterClearTopAndBottom"
  startOffset={0} // keep 0 for the longest blur body; raise toward 0.3 to shorten it
  style={{ height: 220, borderRadius: 16 }}
>
  <Text>Clear at top</Text>
  <Text>Blurred at center</Text>
  <Text>Clear at bottom</Text>
</ProgressiveBlurView>

Locked content / paywall pattern

<View style={{ position: 'relative' }}>
  <Text>Long content here...</Text>

  <ProgressiveBlurView
    blurType="light"
    blurAmount={20}
    direction="blurredBottomClearTop"
    startOffset={0.2}
    style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 200 }}
  >
    <Text>🔒 Unlock to read more</Text>
    <Button title="Purchase" />
  </ProgressiveBlurView>
</View>

Direction values

Props