react-native-variable-blur

Variable/progressive/gradient blur for React Native. Does not use a gradient mask unlike other solutions, but rather progressive blur radius.

Based on VariableBlur

WARNING: This uses a private CAFilter API, and while obfuscated it may trigger App Store rejection.

Requirements

• React Native v0.76.0 or higher
• Node 18.0.0 or higher

Important

To Support Nitro Views you need to install React Native version v0.78.0 or higher.

Installation

npm install react-native-variable-blur react-native-nitro-modules

Usage

import { VariableBlur } from 'react-native-variable-blur'

const App = () => (
  <ImageBackground source={require('./image.jpg')}>
    <VariableBlur blurRadius={10} direction="down" style={{ aspectRatio: 1 }} />
  </ImageBackground>
)