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.
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.
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>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.
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.
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.
This package is pre-installed in managed Expo projects. You may skip the rest of the installation guide if this applies to you.
For bare React Native projects, you must ensure that you have installed and configured the react-native-unimodules package before continuing.
npm install expo-blur
Run pod install in the ios directory after installing the npm package.
This package only supports iOS. On Android, a plain View with a translucent background will be rendered.
Contributions are very welcome! Please refer to guidelines described in the contributing guide.
FAQs
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.
The npm package expo-blur receives a total of 139,288 weekly downloads. As such, expo-blur popularity was classified as popular.
We found that expo-blur demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 29 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.