expo-blur
Advanced tools
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.
For managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release.
For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.
npx expo install expo-blur
[!note] This package only supports iOS. On Android, a plain
Viewwith a translucent background will be rendered.
Run npx pod-install after installing the npm package.
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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
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.