# How to Add a Blur Effect in React Native Using @react-native-community/blur

> Easily add a blur effect in React Native with @react-native-community/blur. Learn to configure BlurView for iOS and Android using blurType and blurAmount for a stunning Gaussian blur.

- Repository: [Meta/react](https://github.com/facebook/react)
- Tags: how-to-guide
- Published: 2026-02-16

---

**Use the `@react-native-community/blur` library to render a native `BlurView` component with configurable `blurType` and `blurAmount` props, positioning it absolutely over your content to achieve a Gaussian blur effect on both iOS and Android.**

React Native does not ship with a built-in visual blur component, but you can achieve a **blur effect in React Native** by leveraging the community-maintained `@react-native-community/blur` package. This library exposes a native `BlurView` that renders platform-specific Gaussian blur using iOS's `UIVisualEffectView` and Android's `RenderScript`. Under the hood, React Native treats this as a host component, forwarding props across the bridge using the same architecture defined in the React repository's renderer implementation.

## Installation and Setup

Install the package using your preferred package manager:

```bash

# Using npm

npm install @react-native-community/blur

# Using Yarn

yarn add @react-native-community/blur

```

For React Native 0.60 and above, the library auto-links. If you are using an older version, follow the manual linking instructions in the library's README. No additional permissions are required to use the blur functionality.

## Core Architecture and the Native Bridge

Understanding how React Native handles the blur effect requires examining how host components communicate across the JavaScript-to-native bridge. When you render a `<BlurView>`, React creates a host component that forwards props (`blurType`, `blurAmount`, etc.) to the native view manager.

According to the React source code in [[`packages/react-native-renderer/src/ReactNativeFiberHostComponent.js`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js)](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js#L50-L52), host components expose a generic `blur()` method:

```javascript
// From ReactNativeFiberHostComponent.js lines 50-52
blur() {
  TextInputState.blurTextInput(this._nativeTag);
}

```

This method is distinct from the visual blur effect provided by `@react-native-community/blur`. It is used to programmatically dismiss focus from text inputs. However, both mechanisms rely on the same host component architecture defined in [[`packages/react-native-renderer/src/ReactNativeRenderer.js`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeRenderer.js)](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeRenderer.js) and the component tree management in [[`packages/react-native-renderer/src/ReactNativeComponentTree.js`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeComponentTree.js)](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeComponentTree.js).

The native implementation receives blur configuration and renders:
- **iOS**: `UIVisualEffectView` with `UIBlurEffect`
- **Android**: `RenderScript` or `RenderEffect` based blur

## Basic Implementation

To create a blur overlay, position the `BlurView` absolutely over your content using `StyleSheet.absoluteFillObject`:

```tsx
import React from 'react';
import { StyleSheet, View, Image, Text } from 'react-native';
import { BlurView } from '@react-native-community/blur';

export default function BlurOverlay() {
  return (
    <View style={styles.container}>
      <Image
        source={require('./assets/background.jpg')}
        style={StyleSheet.absoluteFill}
        resizeMode="cover"
      />
      
      <BlurView
        style={styles.absolute}
        blurType="light"
        blurAmount={10}
        reducedTransparencyFallbackColor="white"
      />
      
      <View style={styles.content}>
        <Text style={styles.text}>Content Over Blur</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  absolute: {
    ...StyleSheet.absoluteFillObject,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: { fontSize: 24, color: '#fff' },
});

```

### Key Props

- **`blurType`**: Determines the visual style. Options include `"light"`, `"dark"`, `"xlight"` (iOS) or `"extraLight"` (Android).
- **`blurAmount`**: Controls intensity from `0` to `25`. Higher values create stronger blur.
- **`reducedTransparencyFallbackColor`**: Solid color displayed when the user has enabled "Reduce Transparency" accessibility settings.

## Animated Blur Effects

You can animate the `blurAmount` prop using React Native's `Animated` API. Since `blurAmount` accepts numeric values, it integrates seamlessly with interpolation:

```tsx
import React, { useRef, useEffect } from 'react';
import { View, StyleSheet, Animated, Easing } from 'react-native';
import { BlurView } from '@react-native-community/blur';

export default function AnimatedBlur() {
  const blurAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.loop(
      Animated.timing(blurAnim, {
        toValue: 20,
        duration: 3000,
        easing: Easing.inOut(Easing.quad),
        useNativeDriver: false, // blurAmount requires JS driver
      })
    ).start();
  }, [blurAnim]);

  return (
    <View style={styles.container}>
      <AnimatedBlurView blurAmount={blurAnim} />
    </View>
  );
}

function AnimatedBlurView({ blurAmount }: { blurAmount: Animated.AnimatedValue }) {
  return (
    <BlurView
      style={StyleSheet.absoluteFill}
      blurType="light"
      blurAmount={blurAmount}
    />
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
});

```

**Important**: Set `useNativeDriver: false` when animating `blurAmount` because the blur prop requires JavaScript-driven updates to re-render the native view.

## Platform Limitations and Considerations

| Platform | Support | Implementation Details |
|----------|---------|------------------------|
| **iOS** | Full | Uses native `UIVisualEffectView` with `UIBlurEffectStyle` constants. Supports `light`, `dark`, `extraDark`, `regular`, and `prominent` blur types. |
| **Android** | Full | Uses `RenderScript` on older versions and `RenderEffect` on Android 12+. Supports `light`, `dark`, and `extraLight` styles. |
| **Web** | Not supported | The library does not support React Native Web. Use CSS `backdrop-filter: blur()` as an alternative for web platforms. |

When the user enables "Reduce Transparency" in iOS accessibility settings, the `reducedTransparencyFallbackColor` prop ensures your UI remains usable by displaying a solid color instead of the blur effect.

## Testing Blur Components

The React repository includes tests that verify the host component `blur()` method functionality in [[`packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js`](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js)](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js#L737-L751):

```javascript
// Test excerpt from ReactNativeMount-test.internal.js lines 737-751
it('should call blur() on the native component', () => {
  const viewRef = React.createRef();
  ReactNative.render(<View ref={viewRef} />, 1);
  
  // Calls the blur method defined in ReactNativeFiberHostComponent.js
  viewRef.current.blur();
  
  expect(TextInputState.blurTextInput).toHaveBeenCalled();
});

```

For testing your actual `BlurView` implementation, use `@testing-library/react-native` with mocked native modules:

```tsx
import { render } from '@testing-library/react-native';
import { BlurView } from '@react-native-community/blur';

jest.mock('@react-native-community/blur', () => ({
  BlurView: 'BlurView',
}));

test('renders blur view with correct props', () => {
  const { getByTestId } = render(
    <BlurView 
      testID="blur" 
      blurType="dark" 
      blurAmount={10} 
    />
  );
  
  expect(getByTestId('blur').props.blurType).toBe('dark');
});

```

## Summary

- **Install** `@react-native-community/blur` to add native blur capabilities to your React Native app.
- **Position** the `BlurView` absolutely using `StyleSheet.absoluteFillObject` to create overlay effects.
- **Configure** the blur using `blurType` (style) and `blurAmount` (intensity 0-25), with `reducedTransparencyFallbackColor` for accessibility.
- **Understand** that React Native treats `BlurView` as a host component, forwarding props across the bridge via the same architecture defined in [`ReactNativeFiberHostComponent.js`](https://github.com/facebook/react/blob/main/ReactNativeFiberHostComponent.js) and [`ReactNativeRenderer.js`](https://github.com/facebook/react/blob/main/ReactNativeRenderer.js).
- **Animate** blur effects using React Native's `Animated` API with `useNativeDriver: false`.
- **Test** your implementation using mocked native modules or snapshot testing.

## Frequently Asked Questions

### What is the difference between the visual blur effect and the blur() method in React Native?

The visual blur effect provided by `@react-native-community/blur` renders a Gaussian blur overlay using native platform APIs like iOS's `UIVisualEffectView`. In contrast, the `blur()` method defined in [`ReactNativeFiberHostComponent.js`](https://github.com/facebook/react/blob/main/ReactNativeFiberHostComponent.js) (lines 50-52) is a programmatic API used to remove focus from text inputs, calling `TextInputState.blurTextInput` on the native tag.

### Can I use @react-native-community/blur with React Native Web?

No, the library does not support React Native Web. For web platforms, implement blur effects using CSS `backdrop-filter: blur()` or standard CSS filters instead. The native module architecture used by the blur library depends on iOS and Android-specific rendering engines.

### How do I handle accessibility settings that disable transparency?

Use the `reducedTransparencyFallbackColor` prop on your `BlurView`. When users enable "Reduce Transparency" in iOS accessibility settings (or equivalent Android settings), the component automatically renders the specified solid color instead of the blur effect, ensuring your UI remains accessible and readable.

### Why must I set useNativeDriver to false when animating blurAmount?

The `blurAmount` prop requires JavaScript-driven updates to re-render the native view with new blur intensity values. Native drivers cannot animate this property because the blur calculation happens on the native side based on the prop value passed from JavaScript. Set `useNativeDriver: false` in your `Animated.timing` configuration when animating blur effects.