expo-blur

What is expo-blur?

The expo-blur package provides components to create blur effects in React Native applications. It is part of the Expo ecosystem and allows developers to easily add blur views to their app's UI, enhancing the visual appeal and providing a modern look.

What are expo-blur's main functionalities?

BlurView

The BlurView component allows you to apply a blur effect to its children. The 'intensity' prop controls the level of blur, and the style prop can be used to position and size the BlurView.

<BlurView intensity={50} style={{ flex: 1 }}>
  <Text>Blurred Content</Text>
</BlurView>

Adjustable Blur Intensity

You can adjust the intensity of the blur effect using the 'intensity' prop. The 'tint' prop allows you to choose between different tint colors like 'light', 'dark', or 'default'.

<BlurView intensity={75} tint='light' style={{ width: 200, height: 200 }}>
  <Text>More Intense Blur</Text>
</BlurView>

Background Blur

The BlurView can be used to blur the background of a component, such as an image, by positioning it absolutely over the background content.

<View style={{ flex: 1 }}>
  <Image source={{ uri: 'image-url' }} style={{ flex: 1 }} />
  <BlurView intensity={100} style={StyleSheet.absoluteFill} />
</View>

Other packages similar to expo-blur

react-native-blur

The react-native-blur package provides similar functionality to expo-blur, allowing developers to add blur effects to their React Native applications. It offers more customization options and is not tied to the Expo ecosystem, making it suitable for projects that do not use Expo.

react-native-blurhash

The react-native-blurhash package is used for generating and displaying blurred images using the BlurHash algorithm. While it focuses on a different aspect of blurring (image placeholders), it can be used in conjunction with expo-blur for comprehensive blur effects in an app.

README

A component that renders a native blur view on iOS and falls back to a semi-transparent view on Android. A common usage of this is for navigation bars, tab bars, and modals.

API documentation

• Documentation for the latest stable release
• Documentation for the main branch

Installation in managed Expo projects

For managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release.

Installation in bare React Native projects

For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.

Add the package to your npm dependencies

npx expo install expo-blur

Configure for Android

[!note] This package only supports iOS. On Android, a plain View with a translucent background will be rendered.

Configure for iOS

Run npx pod-install after installing the npm package.

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.