react-native-blur-view 🌫️

A simple blur view in react native based in @react-native-community/blur.

Warning

This package supports only new architecture.

Summary

• Installation
• Usage
  • Properties
    • Blur Types
    • Blur Types (Only iOS >= 10)
    • Blur Types (Only iOS >= 13)
• How BlurView works with and without children?
• Expo
• Contributing
• License

Installation

npm install @danielsaraldi/react-native-blur-view
# or
yarn add @danielsaraldi/react-native-blur-view

Install native dependencies (iOS only):

cd ios && pod install

Usage

import { BlurView } from '@danielsaraldi/react-native-blur-view';

// ...

return (
  <BlurView style={styles.blurView}>
    <View style={styles.wrapper}>
      <Text style={styles.title}>BlurView</Text>
    </View>
  </BlurView>
);

export const styles = StyleSheet.create({
  blurView: {
    position: 'absolute',

    width: '100%',
    height: 256,

    justifyContent: 'center',
    alignItems: 'center',
  },

  wrapper: {
    width: '100%',
    height: '100%',

    justifyContent: 'center',
    alignItems: 'center',

    padding: 20,
  },

  title: {
    fontSize: 24,
    fontWeight: 'bold',

    color: 'white',
  },
});

Properties

The BlurView component is an extends the same properties of the a View component.

Property	Description	Default	Platform
type	Color type of the overlay.	light	All
radius	Blur radius 0 - 100.	10	All
blurStyle	Style for the BlurView component in iOS. But, on Android it's style of the children component.	StyleSheet.absoluteFill	All
contentStyle	Style for the BlurView component children content.	StyleSheet.absoluteFill	iOS

By default, the style property is { zIndex: 9999, backgroundColor: 'transparent' }.

The blurStyle and contentStyle have another internal style properties, you can see them clicking here! Just for context, these styles exist for internal management, you can overwrite them via the available properties.

An important detail, when a value less than 0 or greater than 100 are provided for radius property, the radius is clipped.

Blur Types

Property	Description	Platform
x-light	The area of the view is lighter than the underlying view.	All
light	The area of the view is the same approximate lightness of the underlying view.	All
dark	The area of the view is darker than the underlying view.	All

Blur Types (Only iOS >= 10)

Property	Description	Platform
regular	A regular blur style that adapts to the user interface style.	iOS
prominent	A blur style for making content more prominent that adapts to the user interface style.	iOS

Blur Types (Only iOS >= 13)

Property	Description	Platform
chrome-material	An adaptable blur effect that creates the appearance of the system chrome.	iOS
material	An adaptable blur effect that creates the appearance of a material with normal thickness.	iOS
thick-material	An adaptable blur effect that creates the appearance of a material that’s thicker than normal.	iOS
thin-material	An adaptable blur effect that creates the appearance of a thin material.	iOS
ultra-thin-material	An adaptable blur effect that creates the appearance of an ultra-thin material.	iOS
chrome-material-light	A blur effect that creates the appearance of the system chrome and is always light.	iOS
material-light	A blur effect that creates the appearance of a material with normal thickness and is always light.	iOS
thick-material-light	A blur effect that creates the appearance of a material that’s thicker than normal and is always light.	iOS
thin-material-light	A blur effect that creates the appearance of a thin material and is always light.	iOS
ultra-thin-material-light	A blur effect that creates the appearance of an ultra-thin material and is always light.	iOS
chrome-material-dark	A blur effect that creates the appearance of the system chrome and is always dark.	iOS
material-dark	A blur effect that creates the appearance of a material with normal thickness and is always dark.	iOS
thick-material-dark	A blur effect that creates the appearance of a material that’s thicker than normal and is always dark.	iOS
thin-material-dark	A blur effect that creates the appearance of a thin material and is always dark.	iOS
ultra-thin-material-dark	A blur effect that creates the appearance of an ultra-thin material and is always dark.	iOS

How BlurView works with and without children?

• With children: The blur effect is applied to the background behind the BlurView, while the children content remains sharp and visible on top.

return (
  <BlurView style={styles.blurView}>
    <View style={styles.wrapper}>
      <Text style={styles.title}>
        This text will appear above the blur effect, the blur effect doesn't
        applied about it.
      </Text>

      <Button title="Click me" />
    </View>
  </BlurView>
);

• Without children: The blur effect affects whatever content is rendered below or above the BlurView in the component tree. This comportment occurs only in Android.

return (
  <>
    <BlurView style={styles.blurView} />

    <Text style={styles.title}>
      This text will be blurred when it be behind or above BlurView!
    </Text>
  </>
);

Expo

In Expo, you need to convert to a custom development build or use prebuild. You can use also React Native without Expo.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library and using the BlurView library of the Dimezis on Android ❤️