{"id":3939,"url":"https://github.com/Kureev/react-native-blur","last_synced_at":"2025-08-04T00:30:56.336Z","repository":{"id":30144382,"uuid":"33694531","full_name":"Kureev/react-native-blur","owner":"Kureev","description":"React Native Blur component","archived":false,"fork":false,"pushed_at":"2024-08-29T14:23:27.000Z","size":1825,"stargazers_count":3775,"open_issues_count":220,"forks_count":557,"subscribers_count":45,"default_branch":"master","last_synced_at":"2024-10-29T15:01:03.764Z","etag":null,"topics":["react-native","react-native-blur","react-native-component"],"latest_commit_sha":null,"homepage":null,"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/Kureev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2015-04-09T21:49:16.000Z","updated_at":"2024-10-29T00:16:38.000Z","dependencies_parsed_at":"2024-01-16T17:33:23.314Z","dependency_job_id":"696f5319-b131-4b02-9c11-36f923c71b18","html_url":"https://github.com/Kureev/react-native-blur","commit_stats":{"total_commits":213,"total_committers":77,"mean_commits":"2.7662337662337664","dds":0.8544600938967136,"last_synced_commit":"7edfaa0f2ef37ae5fa4cbf378f9ca75080752a76"},"previous_names":["react-native-community/react-native-blur","react-native-fellowship/react-native-blur"],"tags_count":58,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kureev%2Freact-native-blur","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kureev%2Freact-native-blur/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kureev%2Freact-native-blur/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kureev%2Freact-native-blur/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kureev","download_url":"https://codeload.github.com/Kureev/react-native-blur/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576891,"owners_count":17939645,"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":["react-native","react-native-blur","react-native-component"],"created_at":"2024-01-05T20:16:55.924Z","updated_at":"2024-12-07T07:30:53.808Z","avatar_url":"https://github.com/Kureev.png","language":"TypeScript","readme":"# `@react-native-community/blur`\n\n[![npm version](https://badge.fury.io/js/%40react-native-community%2Fblur.svg)](https://badge.fury.io/js/%40react-native-community%2Fblur)\n\nA component for UIVisualEffectView's blur and vibrancy effect on iOS, and [BlurView](https://github.com/Dimezis/BlurView) on Android.\u003cbr\u003e\n\n\u003cimg src='https://cloud.githubusercontent.com/assets/139536/25066337/3c9d44c0-224d-11e7-8ca6-028478bf4a7d.gif' /\u003e\n\n### Current Maintainers:\n- [Thibault Malbranche](https://github.com/Titozzz) ([Twitter @titozzz](https://twitter.com/titozzz)) from [Brigad](https://www.brigad.co/en-gb/about-us)\n\n### Content\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [VibrancyView](#vibrancyview)\n- [Example React Native app](#example-react-native-app)\n- [Questions?](#questions)\n\n### Installation\n\n```\nyarn add @react-native-community/blur\n```\n\nInstall native dependencies (iOS only):\n\n```\ncd ios \u0026\u0026 pod install\n```\n\n### Usage\n\n#### BlurView\n\n| Property | Possible Values | Default | Platform\n| ----------- | ----------- | ----------- | -----------\n| `blurType` | See blurType below | - | All\n| `blurAmount` | 0 - 100 (The maximum blurAmount on Android is 32, so higher values will be clamped to 32) | 10 | All\n| `reducedTransparencyFallbackColor` | Any color | - | iOS only\n| `blurRadius` | 0 - 25 | Matches iOS blurAmount | Android only\n| `downsampleFactor` | 0 - 25 | Matches iOS blurAmount | Android only\n| `overlayColor` | Any color | Default color based on iOS blurType | Android only\n\n#### blurType\n\n| Name | Description\n| ----------- | -----------\n| `xlight` | extra light blur type\n| `light` | light blur type\n| `dark` | dark blur type\n| `extraDark` | extra dark blur type (tvOS only)\n| `regular` | regular blur type (iOS 10+ and tvOS only)\n| `prominent` |  prominent blur type (iOS 10+ and tvOS only)\n\n#### blurType (iOS 13 only)\n\n| Name | Description\n| ----------- | -----------\n| `chromeMaterial` | An adaptable blur effect that creates the appearance of the system chrome.\n| `material` | An adaptable blur effect that creates the appearance of a material with normal thickness.\n| `thickMaterial` | An adaptable blur effect that creates the appearance of a material that is thicker than normal.\n| `chromeMaterial` | An adaptable blur effect that creates the appearance of the system chrome.\n| `thinMaterial` | An adaptable blur effect that creates the appearance of an ultra-thin material.\n| `ultraThinMaterial` | An adaptable blur effect that creates the appearance of an ultra-thin material.\n| `chromeMaterialDark` | A blur effect that creates the appearance of an ultra-thin material and is always dark.\n| `materialDark` | A blur effect that creates the appearance of a thin material and is always dark.\n| `thickMaterialDark` | A blur effect that creates the appearance of a material with normal thickness and is always dark.\n| `thinMaterialDark` | A blur effect that creates the appearance of a material that is thicker than normal and is always dark.\n| `ultraThinMaterialDark` | A blur effect that creates the appearance of the system chrome and is always dark.\n| `chromeMaterialLight` | An adaptable blur effect that creates the appearance of the system chrome.\n| `materialLight` | An adaptable blur effect that creates the appearance of a material with normal thickness.\n| `thickMaterialLight` | An adaptable blur effect that creates the appearance of a material that is thicker than normal.\n| `thinMaterialLight` | An adaptable blur effect that creates the appearance of a thin material.\n| `ultraThinMaterialLight` | An adaptable blur effect that creates the appearance of an ultra-thin material.\n\nComplete usage example that works on iOS and Android:\n\n```javascript\nimport React, { Component } from \"react\";\nimport { View, Image, Text, StyleSheet } from \"react-native\";\nimport { BlurView } from \"@react-native-community/blur\";\n\nexport default function Menu() {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cImage\n        key={'blurryImage'}\n        source={{ uri }}\n        style={styles.absolute}\n      /\u003e\n      \u003cText style={styles.absolute}\u003eHi, I am some blurred text\u003c/Text\u003e\n      {/* in terms of positioning and zIndex-ing everything before the BlurView will be blurred */}\n      \u003cBlurView\n        style={styles.absolute}\n        blurType=\"light\"\n        blurAmount={10}\n        reducedTransparencyFallbackColor=\"white\"\n      /\u003e\n      \u003cText\u003eI'm the non blurred text because I got rendered on top of the BlurView\u003c/Text\u003e\n    \u003c/View\u003e\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    justifyContent: \"center\",\n    alignItems: \"center\"\n  },\n  absolute: {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    bottom: 0,\n    right: 0\n  }\n});\n```\n\nIn this example, the `Image` component will be blurred, because the `BlurView` in positioned on top. But the `Text` will stay unblurred.\n\nIf the accessibility setting [`Reduce Transparency`](https://support.apple.com/guide/iphone/display-settings-iph3e2e1fb0/ios) is enabled the `BlurView` will use `reducedTransparencyFallbackColor` as it's background color rather than blurring. If no `reducedTransparencyFallbackColor` is provided, the`BlurView`will use the default fallback color (white, black, or grey depending on `blurType`)\n\n### VibrancyView\n\nUses the same properties as `BlurView` (`blurType`, `blurAmount`, and `reducedTransparencyFallbackColor`).\n\nThe vibrancy effect lets the content underneath a blurred view show through more vibrantly\n\n`VibrancyView is only supported on iOS. Also note that the VibrancyView must contain nested views`\n\n```javascript\nimport { VibrancyView } from \"@react-native-community/blur\";\n\nexport default function Menu() {\n  return (\n    \u003cImage source={{ uri }} style={styles.absolute}\u003e\n      \u003cVibrancyView blurType=\"light\" style={styles.flex}\u003e\n      \u003cText\u003eHi, I am some vibrant text.\u003c/Text\u003e\n      \u003c/VibrancyView\u003e\n    \u003c/Image\u003e\n  )\n}\n```\n\n### Example React Native App\n\nThis project includes an example React Native app, which was used to make the GIF in this README.\nYou can run the apps by following these steps:\n\nClone the repository\n\n```\ngit clone https://github.com/react-native-community/react-native-blur.git\n```\n\nInstall dependencies\n\n```\nyarn\n```\n\n#### Run the app\n\n```\nyarn example android/ios\n```\n\n### Questions?\n\nFeel free to [create an issue](https://github.com/Kureev/react-native-blur/issues/new)\n","funding_links":[],"categories":["Components","TypeScript","Others"],"sub_categories":["UI","Styling"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKureev%2Freact-native-blur","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKureev%2Freact-native-blur","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKureev%2Freact-native-blur/lists"}