react-native-progressive-blur-view

A progressive blur view component for React Native that combines blur effects with gradient masks for smooth transitions.

Installation

npm install react-native-progressive-blur-view

Dependencies

This library depends on the following packages that need to be installed separately:

npm install @react-native-masked-view/masked-view @react-native-community/blur react-native-linear-gradient

iOS Setup

For iOS, you need to run:

cd ios && pod install

Android Setup

For Android, make sure to follow the setup instructions for:

• @react-native-community/blur
• react-native-linear-gradient

Usage

import { ProgressiveBlurView } from 'react-native-progressive-blur-view';

// ...

<ProgressiveBlurView
  style={{ flex: 1 }}
  blurType="light"
  blurAmount={10}
>
  <Text>Your content here</Text>
</ProgressiveBlurView>

API

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | blurType | 'dark' \| 'light' \| 'xlight' \| 'prominent' \| 'regular' \| 'extraDark' \| ... | 'light' | The blur effect type. Extended iOS types available. | | blurAmount | number | 10 | The intensity of the blur effect | | opacities | ReadonlyArray<number> | undefined | Array of opacity values (0-1) that get converted to rgba colors for the gradient | | maskElement | React.ReactElement | undefined | Custom mask element to replace the default LinearGradient | | start | { x: number; y: number } | { x: 0, y: 0 } | Start coordinates for the gradient (0-1 range) | | end | { x: number; y: number } | { x: 0, y: 1 } | End coordinates for the gradient (0-1 range) | | locations | ReadonlyArray<number> | undefined | Array defining gradient color stop positions (0-1 range) | | reducedTransparencyFallbackColor | string | undefined | Fallback color when reduced transparency is enabled (iOS) | | blurRadius | number | undefined | Radius of the blur effect (Android) | | downsampleFactor | number | undefined | Factor to downsample the image before blurring (Android) | | overlayColor | string | undefined | Color overlay on top of the blur (Android) | | enabled | boolean | undefined | Whether the blur effect is enabled (Android) | | autoUpdate | boolean | undefined | Whether to automatically update the blur (Android) | | style | ViewStyle | undefined | Style for the container | | children | ReactNode | undefined | Content to be rendered inside the blur view |

All props from BlurView (except style) and LinearGradient (except style and colors) are supported and passed through to their respective components.

Advanced Usage Examples

Custom Gradient with Opacity Array

<ProgressiveBlurView
  style={{ flex: 1 }}
  blurType="light"
  blurAmount={15}
  opacities={[0, 0.2, 0.5, 0.8, 1]}
  locations={[0, 0.3, 0.5, 0.7, 1]}
>
  <Text>Content with custom gradient opacity stops</Text>
</ProgressiveBlurView>

Diagonal Gradient

<ProgressiveBlurView
  style={{ flex: 1 }}
  blurType="dark"
  blurAmount={12}
  start={{ x: 0, y: 0 }}
  end={{ x: 1, y: 1 }}
  opacities={[0, 0.6, 1]}
>
  <Text>Diagonal blur gradient</Text>
</ProgressiveBlurView>

Horizontal Gradient

<ProgressiveBlurView
  style={{ flex: 1 }}
  blurType="prominent"
  blurAmount={18}
  end={{ x: 1, y: 0 }}
  opacities={[0, 0.1, 0.3, 0.7, 0.9, 1]}
  locations={[0, 0.2, 0.4, 0.6, 0.8, 1]}
>
  <Text>Horizontal multi-stop gradient</Text>
</ProgressiveBlurView>

Custom Mask Element

import LinearGradient from 'react-native-linear-gradient';

<ProgressiveBlurView
  style={{ flex: 1 }}
  blurType="light"
  blurAmount={20}
  maskElement={
    <LinearGradient
      style={StyleSheet.absoluteFillObject}
      colors={["rgba(0,0,0,0)", "rgba(0,0,0,0.3)", "rgba(0,0,0,1)"]}
      locations={[0, 0.5, 1]}
      start={{ x: 0.5, y: 0.5 }}
      end={{ x: 1, y: 1 }}
    />
  }
>
  <Text>Custom radial-like gradient mask</Text>
</ProgressiveBlurView>

Example

See the example folder for a complete example app.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library