React-native-background-blur NPM

BackgroundBlur helps protect sensitive app screens by displaying a blurred image when your app becomes inactive. It ensures that confidential information remains hidden when switching between apps.

Features

Automatic Blur Protection: Overlays a blur image automatically when your app becomes inactive.
Custom Blur Image: Use any image as the blur overlay.
Supports All File Formats: Use any file format for the image.
Supports URIs to Image Files: Use URIs to any image online.
Adjustable Blur Intensity: Customize the blur effect for better privacy.
Smooth Transitions: Optional animated transitions when showing or hiding the blur overlay.
Customizable Styling: Modify the blur image style to match your app's design.

Installation

No linking required. Supports all React Native versions after 0.70.0.

npm install react-native-background-blur
yarn add react-native-background-blur

Demo

Image Has Low Blur Intensity Value

Usage

Can be used directly in the root file to provide a consistent screen style across your app.
Can be used in a specific screen to provide blur functionality only for that screen.

import BackgroundBlur from "react-native-background-blur";

const App = () => {
  return (
    <React.Fragment>
      <BackgroundBlur
        <!-- onBlurImage={{ uri: welcome }} -->
        onBlurImage={require("./assets/welcome.png")}
        blurIntensity={100}
        onBlur={() => console.log('blur screen is active!')}
        onFocus={() => console.log('focus screen is active!')}
        transitionWithAnimation={true}
        animDuration={500}
      />
      <View style={{ flex: 1, alignContent: 'center' }}>
        <TextInput textAlign='center' value='SECURE THIS INPUT WHEN APP BECOMES INACTIVE' style={{ borderWidth: 1, borderRadius: 10, margin: 10 }} />
      </View>
    </React.Fragment>
  );
};

export default App;

Props

Prop	Type	Default	Description
`onBlurImage`	`ImageSourcePropType`	Required	Image displayed when the app is in the background.
`blurImageStyle`	`StyleProp<ImageStyle>`	`undefined`	Style for the blur image.
`blurIntensity`	`number`	`3`	Blur radius intensity.
`resizeMode`	`ImageResizeMode`	`"cover"`	Resize mode of the blur image.
`onBlur`	`() => any`	`undefined`	Callback when the blur effect is applied.
`onFocus`	`() => any`	`undefined`	Callback when the blur effect is removed.
`transitionWithAnimation`	`boolean`	`true`	Enables or disables fade animation.
`animDuration`	`number`	`500`	Duration of the fade animation in milliseconds.