repository·master·Indexed 26 days ago
https://github.com/margelo/react-native-blurA React Native component providing high-performance blur and vibrancy effects. It utilizes UIVisualEffectView on iOS and BlurView on Android. The library includes a BlurView component for both platforms and a VibrancyView component exclusively for iOS. Key configurations include blurType, blurAmount, and platform-specific properties like blurRadius and downsampleFactor for Android, and reducedTransparencyFallbackColor for iOS.
To run the included example project, clone the repository, install dependencies, and use the provided yarn command.
git clone https://github.com/react-native-community/react-native-blur.git
cd react-native-blur
yarn
yarn example android/iosInstall the package using yarn, then install the native iOS dependencies using CocoaPods.
yarn add @react-native-community/blur
cd ios && pod installThe BlurView component provides blur effects on iOS (using UIVisualEffectView) and Android (using BlurView). To blur content, position the BlurView on top of the elements you want to blur using absolute positioning.
import React from "react";
import { View, Image, Text, StyleSheet } from "react-native";
import { BlurView } from "@react-native-community/blur";
export default function Menu() {
return (
<View style={styles.container}>
<Image
key={'blurryImage'}
source={{ uri: 'https://example.com/image.png' }}
style={styles.absolute}
/>
<Text style={styles.absolute}>Hi, I am some blurred text</Text>
{/* The BlurView will blur everything positioned behind it */}
<BlurView
style={styles.absolute}
blurType="light"
blurAmount={10}
reducedTransparencyFallbackColor="white"
/>
<Text>I'm the non blurred text because I got rendered on top of the BlurView</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
justifyContent: "center",
alignItems: "center"
},
absolute: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0
}
});The VibrancyView component is supported on iOS only. It allows content underneath the view to show through more vibrantly. Note that VibrancyView must contain nested views to function correctly.
import { VibrancyView } from "@react-native-community/blur";
export default function Menu() {
return (
<Image source={{ uri: 'https://example.com/image.png' }} style={styles.absolute}>
<VibrancyView blurType="light" style={styles.flex}>
<Text>Hi, I am some vibrant text.</Text>
</VibrancyView>
</Image>
)
}When using this library in a monorepo or a project where the library source is located outside the application's root directory, you must configure the dependencies object in react-native.config.js. This ensures the React Native CLI can correctly locate the library's native source code for autolinking.
Set the root property for @react-native-community/blur to the absolute path of the library's root directory.
module.exports = {
dependencies: {
'@react-native-community/blur': {
root: path.join(__dirname, '..'),
},
},
};Available blurType values for general use:
xlight: extra light blur typelight: light blur typedark: dark blur typeregular: regular blur type (iOS 10+ and tvOS only)prominent: prominent blur type (iOS 10+ and tvOS only)extraDark: extra dark blur type (tvOS only)The BlurView component accepts the following props:
| Property | Type | Platform | Description |
|---|---|---|---|
blurType | string | All | The type of blur effect to apply (see blurType) |
blurAmount | number (0-100) | All | Intensity of blur. Default is 10. Note: Android maximum is 32 |
reducedTransparencyFallbackColor | color | iOS only | Color used when the iOS 'Reduce Transparency' setting is enabled |
blurRadius | number (0-25) | Android only | Radius of the blur |
downsampleFactor | number (0-25) | Android only | Downsampling factor |
overlayColor | color | Android only | Overlay color (defaults to color based on blurType) |
iOS 13+ supports additional material-based blur types:
chromeMaterial / chromeMaterialLight / chromeMaterialDarkmaterial / materialLight / materialDarkthickMaterial / thickMaterialLight / thickMaterialDarkthinMaterial / thinMaterialLight / thinMaterialDarkultraThinMaterial / ultraThinMaterialLight / ultraThinMaterialDarkVibrancyView component is not implemented for the Android platform. Attempting to use it on Android will result in a console error: VibrancyView is not implemented on Android and the component will render null.BlurView component provides a blurred background layer. On Android, it is configured with an internal overlay color based on the blurType or a custom overlayColor. It is designed to have pointerEvents="none" by default, meaning it does not intercept touch events.When using BlurView on Android, you can pass the following props to control the blurring effect. Note that Android uses a specific calculation where blurRadius and downsampleFactor are derived from blurAmount if not explicitly provided.
Constraints & Behaviors:
blurRadius: Must not be greater than 25. If a value higher than 25 is provided, the component will throw an error. If blurAmount is used to calculate the radius, it is capped at 25.blurType: Determines the default overlayColor if one is not provided. Available types are 'dark', 'light', and 'xlight'.overlayColor: A string representing the color overlay. If not provided, it defaults based on blurType.downsampleFactor: If not provided, it defaults to the value of blurRadius.ReactNativeBlurError events via DeviceEventEmitter and re-throws them as standard JavaScript errors.type BlurViewProps = ViewProps & {
blurAmount?: number;
blurType?: 'dark' | 'light' | 'xlight';
blurRadius?: number;
downsampleFactor?: number;
overlayColor?: string;
enabled?: boolean;
autoUpdate?: boolean;
};The BlurView component provides a blur effect for your views on iOS. It accepts several props to control the intensity and style of the blur.
Props:
blurType (optional): Determines the visual style of the blur. Defaults to 'dark'.blurAmount (optional): A number representing the blur intensity. Defaults to 10.reducedTransparencyFallbackColor (optional): A color string used as a fallback when the user has enabled 'Reduce Transparency' in iOS settings.style (optional): Standard React Native ViewStyle props....rest: Any other standard ViewProps.