{"id":28969968,"url":"https://github.com/danielaraldi/react-native-blur-view","last_synced_at":"2026-04-28T01:02:13.923Z","repository":{"id":299479368,"uuid":"980779532","full_name":"DanielAraldi/react-native-blur-view","owner":"DanielAraldi","description":"A simple Blur library for React Native ⚛️🌫️.","archived":false,"fork":false,"pushed_at":"2025-06-16T20:00:05.000Z","size":3866,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-16T20:06:33.282Z","etag":null,"topics":["blur","blurview","gaussian-blur","react","react-native"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DanielAraldi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-09T17:45:25.000Z","updated_at":"2025-06-16T20:02:42.000Z","dependencies_parsed_at":"2025-06-16T20:06:42.222Z","dependency_job_id":"58afb36b-1eaf-43f6-9ce5-086b718383b4","html_url":"https://github.com/DanielAraldi/react-native-blur-view","commit_stats":null,"previous_names":["danielaraldi/react-native-blur-view"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/DanielAraldi/react-native-blur-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielAraldi%2Freact-native-blur-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielAraldi%2Freact-native-blur-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielAraldi%2Freact-native-blur-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielAraldi%2Freact-native-blur-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DanielAraldi","download_url":"https://codeload.github.com/DanielAraldi/react-native-blur-view/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DanielAraldi%2Freact-native-blur-view/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261649879,"owners_count":23189759,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blur","blurview","gaussian-blur","react","react-native"],"created_at":"2025-06-24T10:12:32.472Z","updated_at":"2026-04-28T01:02:13.910Z","avatar_url":"https://github.com/DanielAraldi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `@danielsaraldi/react-native-blur-view` 🌫️\n\nA simple blur view in react native based in [`@react-native-community/blur`](https://github.com/margelo/react-native-blur).\n\nSupport the animation transitions with [react-native-screens](https://github.com/software-mansion/react-native-screens), [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated/), [react-native-navigation](https://github.com/wix/react-native-navigation) and Modals 😁.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cp\u003e\n    \u003cimg alt=\"GitHub package.json version\" src=\"https://img.shields.io/github/package-json/v/DanielAraldi/react-native-blur-view?style=flat\u0026color=brightgreen\" /\u003e\n    \u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/%40danielsaraldi%2Freact-native-blur-view?style=flat\" /\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003e [!NOTE]\n\u003e This package supports **only** [new architecture](https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here).\n\n\u003cp align=\"center\"\u003e\n  \u003cimg\n    height=\"756px\"\n    hspace=\"8\"\n    src=\"./.github/previews/ios.gif\"\n    alt=\"React Native Blur View on iOS\"\n  /\u003e\n  \u003cimg\n    height=\"756px\"\n    hspace=\"8\"\n    src=\"./.github/previews/android.gif\"\n    alt=\"React Native Blur View on Android\"\n  /\u003e\n\u003c/p\u003e\n\n## Summary\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Using lists](#using-lists)\n  - [Using `Modal`](#using-modal)\n  - [Using `ImageBackground`](#using-imagebackground)\n- [Components](#components)\n  - [`BlurView`](#blurview)\n    - [Properties](#properties)\n  - [`BlurTarget`](#blurtarget)\n    - [Properties](#properties-1)\n  - [`VibrancyView`](#vibrancyview)\n    - [Properties](#properties-2)\n- [Types](#types)\n  - [Blur Types](#blur-types)\n  - [Effect Styles](#effect-styles)\n- [Migrate to 2.x](#migrate-to-2x)\n  - [Why This Change?](#why-this-change)\n- [Platform Differences](#platform-differences)\n  - [Android](#android)\n  - [iOS](#ios)\n- [Expo](#expo)\n- [TypeScript Support](#typescript-support)\n- [Others Libraries](#others-libraries)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install @danielsaraldi/react-native-blur-view\n# or\nyarn add @danielsaraldi/react-native-blur-view\n# or\npnpm add @danielsaraldi/react-native-blur-view\n# or\nbun add @danielsaraldi/react-native-blur-view\n```\n\nInstall native dependencies (**iOS only**):\n\n```sh\ncd ios \u0026\u0026 pod install \u0026\u0026 cd ..\n```\n\n## Usage\n\n```tsx\nimport { useRef } from 'react';\nimport { ScrollView, StyleSheet, Text, View } from 'react-native';\nimport {\n  BlurView,\n  BlurTarget,\n  VibrancyView,\n} from '@danielsaraldi/react-native-blur-view';\n// ...\n\nexport default function App() {\n  const targetRef = useRef\u003cView | null\u003e(null);\n  // ...\n\n  return (\n    \u003c\u003e\n      \u003cBlurView blurTarget={targetRef} style={styles.blurView}\u003e\n        \u003cText style={styles.text}\u003eBlurView\u003c/Text\u003e\n      \u003c/BlurView\u003e\n\n      \u003cVibrancyView style={styles.vibrancyView}\u003e\n        \u003cText style={styles.text}\u003eVibrancyView\u003c/Text\u003e\n      \u003c/VibrancyView\u003e\n\n      \u003cBlurTarget ref={targetRef} style={styles.blurTarget}\u003e\n        \u003cScrollView\n          style={styles.scrollView}\n          contentContainerStyle={styles.contentContainer}\n          showsVerticalScrollIndicator={false}\n        \u003e\n          {/* ... */}\n        \u003c/ScrollView\u003e\n      \u003c/BlurTarget\u003e\n    \u003c/\u003e\n  );\n}\n\nexport const styles = StyleSheet.create({\n  blurView: {\n    position: 'absolute',\n    top: 0,\n\n    width: '100%',\n    height: 256,\n\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n\n  vibrancyView: {\n    position: 'absolute',\n    top: 256,\n\n    width: '100%',\n    height: 256,\n\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n\n  title: {\n    fontSize: 24,\n    fontWeight: 'bold',\n\n    color: 'white',\n  },\n\n  main: {\n    flex: 1,\n  },\n\n  content: {\n    padding: 20,\n\n    gap: 8,\n  },\n});\n```\n\n### Using lists\n\nYou must add `BlurView` elements inside of the list, and the content behind should be added as child of the `BlurTarget` component. Check an example using `ScrollView` below:\n\n```tsx\nimport { useRef } from 'react';\nimport { ImageBackground, ScrollView, Text, View } from 'react-native';\nimport { BlurView, BlurTarget } from '@danielsaraldi/react-native-blur-view';\n// ...\n\nexport function MyScreen() {\n  const targetRef = useRef\u003cView | null\u003e(null);\n  // ...\n\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cBlurTarget ref={targetRef} style={styles.blurTarget}\u003e\n        \u003cImageBackground\n          style={styles.background}\n          source={BACKGROUND}\n          resizeMode=\"cover\"\n        /\u003e\n      \u003c/BlurTarget\u003e\n\n      \u003cScrollView\n        style={styles.scrollView}\n        contentContainerStyle={styles.contentContainer}\n        showsVerticalScrollIndicator={false}\n      \u003e\n        \u003cBlurView blurTarget={targetRef} style={styles.blurView}\u003e\n          \u003cText style={styles.text}\u003eBlurView 1\u003c/Text\u003e\n        \u003c/BlurView\u003e\n\n        \u003cBlurView blurTarget={targetRef} style={styles.blurView}\u003e\n          \u003cText style={styles.text}\u003eBlurView 2\u003c/Text\u003e\n        \u003c/BlurView\u003e\n\n        \u003cBlurView blurTarget={targetRef} style={styles.blurView}\u003e\n          \u003cText style={styles.text}\u003eBlurView 3\u003c/Text\u003e\n        \u003c/BlurView\u003e\n\n        {/* ... */}\n      \u003c/ScrollView\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\n### Using `Modal`\n\nYou must add `BlurTarget` as a parent of content screen because it will be the **target** of blur, the `BlurView` component must be to used inside of `Modal` to blur effect works correctly.\n\n```tsx\nimport { useRef, useState } from 'react';\nimport { Modal, View } from 'react-native';\nimport { BlurTarget, BlurView } from '@danielsaraldi/react-native-blur-view';\n// ...\n\nexport function MyScreen() {\n  const [isOpenModal, setIsOpenModal] = useState\u003cboolean\u003e(false);\n  const targetRef = useRef\u003cView | null\u003e(null);\n  // ...\n\n  return (\n    \u003c\u003e\n      \u003cModal\n        transparent\n        statusBarTranslucent\n        navigationBarTranslucent\n        hardwareAccelerated\n        visible={isOpenModal}\n        onRequestClose={() =\u003e setIsOpenModal(false)}\n        style={styles.modal}\n      \u003e\n        \u003cBlurView blurTarget={targetRef} style={styles.blurView} /\u003e\n\n        \u003cView style={styles.modalContent}\u003e{/* ... */}\u003c/View\u003e\n      \u003c/Modal\u003e\n\n      \u003cBlurTarget ref={targetRef} style={styles.blurTarget}\u003e\n        {/* ... */}\n      \u003c/BlurTarget\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n### Using `ImageBackground`\n\nYou must add `BlurTarget` as a parent of `ImageBackground` because it will be the **target** of blur, the `BlurView` component must be to used as **brother** of `BlurTarget` to blur effect works correctly.\n\n```tsx\nimport { useRef } from 'react';\nimport { ImageBackground, View } from 'react-native';\nimport { BlurTarget, BlurView } from '@danielsaraldi/react-native-blur-view';\n// ...\n\nexport function MyScreen() {\n  const targetRef = useRef\u003cView | null\u003e(null);\n  // ...\n\n  return (\n    \u003c\u003e\n      \u003cView style={styles.blurViewWrapper}\u003e\n        \u003cBlurView\n          blurTarget={targetRef}\n          style={styles.blurView}\n          downscaleFactor={4}\n        \u003e\n          {/** ... **/}\n        \u003c/BlurView\u003e\n      \u003c/View\u003e\n\n      \u003cBlurTarget ref={targetRef} style={styles.blurTarget}\u003e\n        \u003cImageBackground\n          style={styles.background}\n          source={{ uri: 'https://picsum.photos/seed/picsum/600/900' }}\n          resizeMode=\"cover\"\n        /\u003e\n      \u003c/BlurTarget\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n## Components\n\n### `BlurView`\n\nThe `BlurView` component is an extends the same properties of the a `View` component. The `blurTarget` prop is **required** for Android blur effect works correctly.\n\n#### Properties\n\n| Property                           | Description                                                                                 | Default     | Platform |\n| ---------------------------------- | ------------------------------------------------------------------------------------------- | ----------- | -------- |\n| `blurTarget`                       | Ref of the `BlurTarget` component to be identified by the `BlurView` component in the tree. | `undefined` | Android  |\n| `type`                             | [Blur type](#blur-types) of the overlay.                                                    | `light`     | All      |\n| `radius`                           | Blur radius `0` - `100`.                                                                    | `10.0`      | All      |\n| `downscaleFactor`                  | Downscale factor `0` - `100`.                                                               | `6.0`       | Android  |\n| `overlayColor`                     | Add the overlay color about component.                                                      | `undefined` | All      |\n| `androidColor`                     | Overrides the `type` property color.                                                        | `undefined` | Android  |\n| `reducedTransparencyFallbackColor` | Background color about blur effect when reduced transparency is enabled.                    | `white`     | iOS      |\n\nWhen a value less than `0` or greater than `100` are provided for `radius` or `downscaleFactor` property, the value is clipped.\n\n### `BlurTarget`\n\nThe `BlurTarget` component is an extends the same properties of the a `View` component.\n\nThis component is available for **Android only**. It's useful because we use [Dimezis's 3v library](https://github.com/Dimezis/BlurView) to apply the blur effect, so its implementation is slightly different than on iOS. The `BlurTarget` component is a common `View` in iOS.\n\nThe `BlurTarget` may not contain a `BlurView` that targets the same `BlurTarget`. The `BlurTarget` may contain other `BlurTargets` and `BlurViews` though.\n\n#### Properties\n\n| Property | Description                                                                                 | Default     | Platform |\n| -------- | ------------------------------------------------------------------------------------------- | ----------- | -------- |\n| `ref`    | Ref of the `BlurTarget` component to be identified by the `BlurView` component in the tree. | `undefined` | Android  |\n\n### `VibrancyView`\n\nThe `VibrancyView` component is an extends the same properties of the a `View` component.\n\nThis component is available for **iOS only**. It apply a vibrancy effect in children content. On Android the `VibrancyView` component is a common `View`.\n\n#### Properties\n\n| Property                           | Description                                                                  | Default     | Platform |\n| ---------------------------------- | ---------------------------------------------------------------------------- | ----------- | -------- |\n| `type`                             | [Blur type](#blur-types) of the overlay.                                     | `light`     | iOS      |\n| `effectStyle`                      | [Effect style](#effect-styles) to vibrancy content.                          | `label`     | iOS      |\n| `radius`                           | Blur radius `0` - `100`.                                                     | `10`        | iOS      |\n| `overlayColor`                     | Add the overlay color about component.                                       | `undefined` | iOS      |\n| `reducedTransparencyFallbackColor` | Background color about vibrancy effect when reduced transparency is enabled. | `white`     | iOS      |\n\nWhen a value less than `0` or greater than `100` are provided for `radius` property, the `radius` is clipped.\n\n## Types\n\nThese are all types of available.\n\n### Blur Types\n\nOn iOS all types are supported, but, on Android is simulated the types using RGBA colors.\n\n| Property                    | Description                                                                                                                                               | Platform |\n| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |\n| `x-light`                   | The area of the view is lighter than the underlying view.                                                                                                 | All      |\n| `light`                     | The area of the view is the same approximate lightness of the underlying view.                                                                            | All      |\n| `dark`                      | The area of the view is darker than the underlying view.                                                                                                  | All      |\n| `regular`                   | A regular blur style that adapts to the user interface style. Radius **doesn't apply** to this. (**iOS \u003e= 10**)                                           | All      |\n| `prominent`                 | A blur style for making content more prominent that adapts to the user interface style. Radius **doesn't apply** to this. (**iOS \u003e= 10**)                 | All      |\n| `chrome-material`           | An adaptable blur effect that creates the appearance of the system chrome. Radius **doesn't apply** to this. (**iOS \u003e= 13**)                              | All      |\n| `material`                  | An adaptable blur effect that creates the appearance of a material with normal thickness. Radius **doesn't apply** to this. (**iOS \u003e= 13**)               | All      |\n| `thick-material`            | An adaptable blur effect that creates the appearance of a material that’s thicker than normal. Radius **doesn't apply** to this. (**iOS \u003e= 13**)          | All      |\n| `thin-material`             | An adaptable blur effect that creates the appearance of a thin material. Radius **doesn't apply** to this. (**iOS \u003e= 13**)                                | All      |\n| `ultra-thin-material`       | An adaptable blur effect that creates the appearance of an ultra-thin material. Radius **doesn't apply** to this. (**iOS \u003e= 13**)                         | All      |\n| `chrome-material-light`     | A blur effect that creates the appearance of the system chrome and is always light. Radius **doesn't apply** to this. (**iOS \u003e= 13**)                     | All      |\n| `material-light`            | A blur effect that creates the appearance of a material with normal thickness and is always light. Radius **doesn't apply** to this. (**iOS \u003e= 13**)      | All      |\n| `thick-material-light`      | A blur effect that creates the appearance of a material that’s thicker than normal and is always light. Radius **doesn't apply** to this. (**iOS \u003e= 13**) | All      |\n| `thin-material-light`       | A blur effect that creates the appearance of a thin material and is always light. Radius **doesn't apply** to this. (**iOS \u003e= 13**)                       | All      |\n| `ultra-thin-material-light` | A blur effect that creates the appearance of an ultra-thin material and is always light. Radius **doesn't apply** to this. (**iOS \u003e= 13**)                | All      |\n| `chrome-material-dark`      | A blur effect that creates the appearance of the system chrome and is always dark. Radius **doesn't apply** to this. (**iOS \u003e= 13**)                      | All      |\n| `material-dark`             | A blur effect that creates the appearance of a material with normal thickness and is always dark. Radius **doesn't apply** to this. (**iOS \u003e= 13**)       | All      |\n| `thick-material-dark`       | A blur effect that creates the appearance of a material that’s thicker than normal and is always dark. Radius **doesn't apply** to this. (**iOS \u003e= 13**)  | All      |\n| `thin-material-dark`        | A blur effect that creates the appearance of a thin material and is always dark. Radius **doesn't apply** to this. (**iOS \u003e= 13**)                        | All      |\n| `ultra-thin-material-dark`  | A blur effect that creates the appearance of an ultra-thin material and is always dark. Radius **doesn't apply** to this. (**iOS \u003e= 13**)                 | All      |\n\nLearn more about blur types [here](https://developer.apple.com/documentation/uikit/uiblureffect/style).\n\n### Effect Styles\n\nOn iOS all effect styles are supported. This property is available in the `VibrancyView` component, it's **iOS only**.\n\n| Property           | Description                                                                             | Platform |\n| ------------------ | --------------------------------------------------------------------------------------- | -------- |\n| `label`            | A style for labels containing primary content. (**iOS \u003e= 13**)                          | iOS      |\n| `secondary-label`  | A style for labels containing secondary content. (**iOS \u003e= 13**)                        | iOS      |\n| `tertiary-label`   | A style for labels containing tertiary content. (**iOS \u003e= 13**)                         | iOS      |\n| `quaternary-label` | A style for labels containing quaternary content. (**iOS \u003e= 13**)                       | iOS      |\n| `fill`             | A style for views with large filled areas containing primary content. (**iOS \u003e= 13**)   | iOS      |\n| `secondary-fill`   | A style for views with large filled areas containing secondary content. (**iOS \u003e= 13**) | iOS      |\n| `tertiary-fill`    | A style for views with large filled areas containing tertiary content. (**iOS \u003e= 13**)  | iOS      |\n| `separator`        | A style for separator lines. (**iOS \u003e= 13**)                                            | iOS      |\n\n- Label styles show progressive opacity drops from full white to near-invisible.\n- Fill styles show translucent rectangles at decreasing opacity levels.\n- Separator style is specifically for thin, translucent separator lines.\n\nLearn more about effect styles [here](https://developer.apple.com/documentation/uikit/uivibrancyeffectstyle).\n\n## Migrate to 2.x\n\n\u003e [!WARNING]\n\u003e Version 2.0.0 introduces significant API changes on Android apps. If you're upgrading from 1.x, please read this section carefully.\n\nIn version 1.x, the `BlurView` has the `targetId` prop to be used as a reference to the `BlurTarget` in tree:\n\n```tsx\n// ❌ Old API (v1.x) - Deprecated\n\u003cBlurView targetId=\"target\" style={styles.blurView}\u003e\n  {/** ... **/}\n\u003c/BlurView\u003e\n\n\u003cBlurTarget id=\"target\" style={styles.blurTarget}\u003e\n  {/** ... **/}\n\u003c/BlurTarget\u003e\n```\n\nIn version 2.0.0, the `BlurView` has the `targetId` prop swapped by `blurTarget` prop. The `BlurTarget` has its `id` prop swapped for a `ref` to the `View`:\n\n```tsx\n// ✅ New API (v2.0.0) - Current\nimport { View } from 'react-native';\n// ...\nconst targetRef = useRef\u003cView | null\u003e(null);\n```\n\n```tsx\n// ✅ New API (v2.0.0) - Current\n\u003cBlurView blurTarget={targetRef} style={styles.blurView}\u003e\n  {/** ... **/}\n\u003c/BlurView\u003e\n\n\u003cBlurTarget ref={targetRef} style={styles.blurTarget}\u003e\n  {/** ... **/}\n\u003c/BlurTarget\u003e\n```\n\n### Why This Change?\n\nThe blur effect on Android has always been a challenge. Therefore, version 2.0.0 focused exclusively on Android to make valuable performance improvements:\n\n- **Performance**: Improved search in the element tree on Android.\n- **Rebuilt**: The core of the `BlurTarget` and `BlurView` components in Android has been redesigned.\n- **New Limitation**: Removed support to bottom tabs customized with the [`react-navigation/bottom-tabs`](https://reactnavigation.org/docs/bottom-tab-navigator/).\n\n## Platform Differences\n\n### Android\n\nOn Android platforms, the component utilizes the [BlurView](https://github.com/Dimezis/BlurView) library to offer native blur effects with hardware-accelerated rendering.\n\nFor different types of `x-light`, `light`, and `dark`, the `radius` is fixed at `35` and the `downscaleFactor` is only 66% of the stated value. This is done to maintain similarity with the iOS effect.\n\nThe `androidColor` property can be useful when you want to achieve a specific look or match the blur effect to other elements in your app. It **overrides** the `type` property.\n\nBottom tabs customized with the [`react-navigation/bottom-tabs`](https://reactnavigation.org/docs/bottom-tab-navigator/) **aren't** supported! If you want to customize your bottom tabs, opt for [`@sbaiahmed1/react-native-blur`](https://github.com/sbaiahmed1/react-native-blur).\n\n### iOS\n\nOn iOS all types are supported by default. However, on Android they are RGBA colors to simulate the same blur color.\n\n## Expo\n\nIn Expo, you need to convert to a [custom development build](https://docs.expo.dev/develop/development-builds/introduction/) or use [prebuild](https://docs.expo.dev/workflow/continuous-native-generation/). You can use also React Native without Expo.\n\n## TypeScript Support\n\nFull TypeScript support with proper type definitions!\n\n```ts\nimport {\n  BlurType,\n  EffectStyle,\n  BlurViewProps,\n  BlurTargetProps,\n  VibrancyProps,\n} from '@danielsaraldi/react-native-blur-view';\n\nexport const INITIAL_BLUR_TYPE: BlurType = 'light';\nexport const INITIAL_EFFECT_STYLE: EffectStyle = 'label';\n\nexport interface CustomBlurViewProps extends BlurViewProps {\n  // ...\n}\n\nexport interface CustomBlurTargetProps extends BlurTargetProps {\n  // ...\n}\n\nexport interface CustomVibrancyViewProps extends VibrancyProps {\n  // ...\n}\n```\n\n## Others Libraries\n\n- ✅ [`expo-blur`](https://docs.expo.dev/versions/latest/sdk/blur-view/) - A React component that blurs everything underneath the view. Common usage of this is for navigation bars, tab bars, and modals.\n- ✅ [`@sbaiahmed1/react-native-blur`](https://github.com/sbaiahmed1/react-native-blur) - A modern React Native blur view component that provides native blur effects for both iOS and Android platforms. also adds progressive blur and liquidGlass.\n- 🛑 [`@react-native-community/blur`](https://github.com/margelo/react-native-blur) - A component for UIVisualEffectView's blur and vibrancy effect on iOS, and BlurView on Android.\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob) ❤️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielaraldi%2Freact-native-blur-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielaraldi%2Freact-native-blur-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielaraldi%2Freact-native-blur-view/lists"}