{"_id":"@ben39053372/react-native-blur","_rev":"1-e75ae8a069889c1b2cd6ba56f6ff0cff","name":"@ben39053372/react-native-blur","dist-tags":{"latest":"3.6.2"},"versions":{"3.6.1":{"name":"@ben39053372/react-native-blur","version":"3.6.1","description":"React Native Blur component","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","lint":"eslint src index.js example"},"repository":{"type":"git","url":"git+https://github.com/ben39053372/react-native-blur.git"},"keywords":["react-native","ios","react-component"],"author":{"name":"Alexey Kureev","email":"kureev-mail@ya.ru","url":"https://github.com/Kureev"},"license":"MIT","bugs":{"url":"https://github.com/react-native-community/react-native-blur/issues"},"homepage":"https://github.com/react-native-community/react-native-blur","dependencies":{"deprecated-react-native-prop-types":"^2.3.0","prop-types":"^15.5.10"},"devDependencies":{"@react-native-community/eslint-config":"^1.0.0","eslint":"^6.8.0","eslint-plugin-prettier":"^3.1.2","husky":"^4.2.3","lint-staged":"^10.1.2","prettier":"2.0.4","react":"16.13.1","react-native":"0.62.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write"]},"types":"./index.d.ts","gitHead":"6231655f961637701adc4672be2eed08e4cacef1","_id":"@ben39053372/react-native-blur@3.6.1","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-lUFfXiTUPVQ1IFXqIQcqZWCROHF1A9XAQPPdxwqVajj41KHx/MbEZoAmS5FAszWefUALXXAKDUOH5Wt0bxk/yQ==","shasum":"3b658b107257e8077612e51dea60ecbe923bc00d","tarball":"https://registry.npmjs.org/@ben39053372/react-native-blur/-/react-native-blur-3.6.1.tgz","fileCount":33,"unpackedSize":52080,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH6TuUJe6d2FwcKC5bf/eP5+HJko6Mj4gsJDUKOAfYTRAiEA+2PAtcwL1s0u4CO0PRsx3aQ1XUII2xmXaNNPFpqnX5g="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixF7/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpWBQ/8D22bJL3cF8Vix/KWsnaZUM7gpVLWSj6bAUqE2bNQYc7jrUHc\r\nPvqaGpfjc3/YYZ1noSsTwNbHxBUqOGbaSF2XJTMwHSelDT60nv1syLlBjdCw\r\nz+UxftOX/bAOFNdJV5kOzqwsl6P5at1zj6KIoRDLnvRvk0gNWWVdSTBdLH+x\r\nnohKFn9knmi7me6DGiP93XZgNUD1Or4odMJeeVmDrC9swoMc0V7Hs4a9YiGs\r\n5FejcB4lJNNxZppZIJa/alFGXENiDtdPVGs87BtFzH8iamcbiR6qZwsllEXF\r\nl0OBIakCSRJi664MVlBFKNCNfnpXRr2ArApW/lljRHrLYZScKc+gxr8XEVQQ\r\nl1jTDnGhE87AavYv/ygh17vF7u7PelNaw3oEDGMOZWuev/m/AJiZZ2u5myc4\r\nKnJvRrLACLs5M+6goAPSDv1X0404VKVuz9lnMXVJ/9Uy2eGr7cOsGvQt/hvT\r\nVKQwdVaplked32XG7K3sCR+9vD2Xpcpvl+oU/nV/DyH4uV0jRw4LAdNLgluj\r\nQT7qaKuFJbcY0QwiYgvKQojKTAfRTLMA563465ub9RlIL2J56WRmMvG2nVZA\r\nGtfgmCieoAOWpd1PnNAvA6YZhzOqRnqijGCZGYuq5vahfeSHqX140FFPwsoV\r\n1zePWc2YY5TsFG1bdSxIeGBqm0iCUqjSBoU=\r\n=QyPA\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ben39053372","email":"ben39053372@gmail.com"},"directories":{},"maintainers":[{"name":"ben39053372","email":"ben39053372@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-blur_3.6.1_1657036543386_0.5910945803346572"},"_hasShrinkwrap":false},"3.6.2":{"name":"@ben39053372/react-native-blur","version":"3.6.2","description":"React Native Blur component","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","lint":"eslint src index.js example"},"repository":{"type":"git","url":"git+https://github.com/ben39053372/react-native-blur.git"},"keywords":["react-native","ios","react-component"],"author":{"name":"Alexey Kureev","email":"kureev-mail@ya.ru","url":"https://github.com/Kureev"},"license":"MIT","bugs":{"url":"https://github.com/react-native-community/react-native-blur/issues"},"homepage":"https://github.com/react-native-community/react-native-blur","dependencies":{"deprecated-react-native-prop-types":"^2.3.0","prop-types":"^15.5.10"},"devDependencies":{"@react-native-community/eslint-config":"^1.0.0","eslint":"^6.8.0","eslint-plugin-prettier":"^3.1.2","husky":"^4.2.3","lint-staged":"^10.1.2","prettier":"2.0.4","react":"16.13.1","react-native":"0.62.1"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write"]},"types":"./index.d.ts","gitHead":"fb84b44a9e8994ae7443c4043145942a0374062d","_id":"@ben39053372/react-native-blur@3.6.2","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-1adEAMdJozoLyuN5qJNJFmSR1kc8wJX8sm8vQhBokNvYIiqxWX7OUTR1nSEWRRI5K06gHZrl3tQak0iCHkWWeQ==","shasum":"1ee6b293ad046e9010b6fc5f099b12c0764f78ce","tarball":"https://registry.npmjs.org/@ben39053372/react-native-blur/-/react-native-blur-3.6.2.tgz","fileCount":33,"unpackedSize":52080,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrTf/Aj4C6wjy3iCmqubSUsxF9Um8HVaouyogpcKc89wIhAOjsaoOZT2A68q+WW3OeGPE7ICoPrL+r4fSPWlFXiD2S"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixF9HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlDA//U5/NmQltu79dTeEtwlSHiZQPUDEgUcpOGVQzlpDGIyOMq4De\r\ngPhiQXq3Y1rNxXiz+/WRMeHHscgoonCV7Wg3EIzEoZ68cFiUY+tmofIwWY8E\r\noWBqj7vueA8p76UI7Upe6PxcrmNCCSK4zHXokRg8y4hW7lWvCSCdfQX5maXR\r\nNI8xEtIq0V5bhE/W6oU9hxnznmmL+Tk3nMOyQi25nW03rJnF0SfdjnHWloK5\r\nKHxez2Uv3hrhTPbeJQHzCDbo37k7/Xp/cy28CgZ66HW1jxn3iqFirCmoL3tr\r\nv4bjl4zy27WtSPQB3aUZSbe6fbyiI4JVLqSkYmUpyRZzrgC3R8DfdavcNfRb\r\nBAPJp5EtHTFGcjRkkbmcctalgWMi09mhrDKn6dCme7GZA2nTM8TTn75FpedE\r\nwBBjfaRznN+QwUCxuw5DpezgkVd22JRnoZ9AedGwHT5/wcexuHTZGtOZLoHB\r\nWV9g3H1Z/kWSCvaI9WJRI4sZJeesORk0sygJL6BjoAWNs5Lr6BJIrUPZ4lf5\r\nTqx460N4aUud5MuvhH4EFTTorEjimDImjue5Zh+ZfnpjH5oXpKw6rT9FKsYx\r\nTptk1sncWj+xQFDdi+H3H/Gbz33lrgtt6Kxw9j7iN0bhg2mx59gOnzj2S6jK\r\nxD7PefGxuxD3zuu9hHhrmbjtFBkvIoh7zIs=\r\n=eEmk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"ben39053372","email":"ben39053372@gmail.com"},"directories":{},"maintainers":[{"name":"ben39053372","email":"ben39053372@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-blur_3.6.2_1657036615624_0.016855519097206173"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-05T15:55:43.325Z","3.6.1":"2022-07-05T15:55:43.542Z","modified":"2022-07-05T15:56:55.927Z","3.6.2":"2022-07-05T15:56:55.813Z"},"maintainers":[{"name":"ben39053372","email":"ben39053372@gmail.com"}],"description":"React Native Blur component","homepage":"https://github.com/react-native-community/react-native-blur","keywords":["react-native","ios","react-component"],"repository":{"type":"git","url":"git+https://github.com/ben39053372/react-native-blur.git"},"author":{"name":"Alexey Kureev","email":"kureev-mail@ya.ru","url":"https://github.com/Kureev"},"bugs":{"url":"https://github.com/react-native-community/react-native-blur/issues"},"license":"MIT","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.<br>\n\n<img src='https://cloud.githubusercontent.com/assets/139536/25066337/3c9d44c0-224d-11e7-8ca6-028478bf4a7d.gif' />\n\n### Content\n\n- [Installation](#installation)\n- [BlurView](#blurview)\n- [VibrancyView](#vibrancyview)\n- [Example React Native app](#example-react-native-app)\n- [Questions?](#questions)\n\n### Installation\n\n1. Install the library using either Yarn:\n\n```\nyarn add @react-native-community/blur\n```\n\nor npm:\n\n```\nnpm install --save @react-native-community/blur\n```\n\n2. **React-Native 0.59 and below only**: Link your native dependencies:\n\n```\nreact-native link @react-native-community/blur\n```\n\n3. (iOS only) Install to Xcode:\n\n```\nnpx pod-install\n```\nOr, if you already have installed [Cocoapods](https://cocoapods.org/) on your system:\n```\ncd ios && pod install\n```\n\n4. (Android only, optional)\nIf you've defined _[project-wide properties](https://developer.android.com/studio/build/gradle-tips.html)_ (**recommended**) in your root `build.gradle`, this library will detect the presence of the following properties:\n\n```groovy\nbuildscript {...}\nallprojects {...}\n\n/**\n  + Project-wide Gradle configuration properties\n  */\next {\n    compileSdkVersion   = 27\n    targetSdkVersion    = 27\n    buildToolsVersion   = \"27.0.3\"\n}\n```\n\n5. Include the library in your code:\n\n```javascript\nimport { BlurView, VibrancyView } from \"@react-native-community/blur\";\n```\n\n6. Compile and have fun!\n\n### BlurView\n\n**Properties:**\n\n- `blurType` (String)\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  - iOS 13 only Blur types:\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    - `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- `blurAmount` (Default: 10, Number)\n  - `0-100` - Adjusts blur intensity\n- `reducedTransparencyFallbackColor` (Color) (iOS only)\n  - `black, white, #rrggbb, etc` - background color to use if accessibility setting ReduceTransparency is enabled\n\n> Note: The maximum `blurAmount` on Android is 32, so higher values will be clamped to 32.\n\n> Complete 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 class Menu extends Component {\n\n  render() {\n    return (\n      <View style={styles.container}>\n        <Image\n          key={'blurryImage'}\n          source={{ uri }}\n          style={styles.absolute}\n        />\n        <Text style={styles.absolute}>Hi, I am some blurred text</Text>\n{/* in terms of positioning and zIndex-ing everything before the BlurView will be blurred */}\n        <BlurView\n          style={styles.absolute}\n          blurType=\"light\"\n          blurAmount={10}\n          reducedTransparencyFallbackColor=\"white\"\n        />\n        <Text>I'm the non blurred text because I got rendered on top of the BlurView</Text>\n      </View>\n    );\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\n**Uses the same properties as `BlurView` (`blurType`, `blurAmount`, and `reducedTransparencyFallbackColor`).**\n\n> The vibrancy effect lets the content underneath a blurred view show through more vibrantly\n\n> (Note: `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 class Menu extends Component {\n  render() {\n    return (\n      <Image source={{ uri }} style={styles.absolute}>\n        <VibrancyView blurType=\"light\" style={styles.flex}>\n          <Text>Hi, I am some vibrant text.</Text>\n        </VibrancyView>\n      </Image>\n    );\n  }\n}\n```\n\n### Android\n\nAndroid uses the [BlurView](https://github.com/Dimezis/BlurView).\n\nIf you only need to support iOS, then you can safely ignore these limitations.\n\nIn addition to `blurType` and `blurAmount`, Android has some extra props that can be used to override the default behavior (or configure Android-specific behavior):\n\n- `blurRadius` (Number - between 0 and 25) - Manually adjust the blur radius. (Default: matches iOS blurAmount)\n- `downsampleFactor` (Number - between 0 and 25) - Scales down the image before blurring (Default: matches iOS blurAmount)\n- `overlayColor` (Color) - Set a custom overlay color (Default color based on iOS blurType)\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\n1. Clone the repository\n\n```\ncd ~\ngit clone https://github.com/react-native-community/react-native-blur.git\n```\n\n2. cd to `example`\n\n```\ncd react-native-blur/example\n```\n\n3. Install dependencies\n\n```\nnpm install\n```\n\n4. Run the apps:\n\n#### Run the iOS app\n\n```\nreact-native run-ios\n```\n\n#### Run the tvOS app\n\ntype:\n\n```\nreact-native run-ios\n```\n\n`react-native link` don’t works properly with the tvOS target so we need to add the library manually.\n\nFirst select your project in Xcode.\n\n<img src=\"./docs/tvOS-step-1.jpg\" width=\"40%\">\n\nAfter that, select the tvOS target of your application and select « General » tab\n\n<img src=\"./docs/tvOS-step-2.jpg\" width=\"40%\">\n\nScroll to « Linked Frameworks and Libraries » and tap on the + button\n\n<img src=\"./docs/tvOS-step-3.jpg\" width=\"40%\">\n\nSelect RNBlur-tvOS\n\n<img src=\"./docs/tvOS-step-4.jpg\" width=\"40%\">\n\nThat’s all, you can use react-native-blur for your tvOS application\n\n#### Run the Android app\n\n```\nreact-native run-android\n```\n\n### Troubleshooting\n\nOn older instances of react-native, BlurView package does not get added into the MainActivity/MainApplication classes where you would see `Warning: Native component for 'BlurView' does not exist` in RN YellowBox or console.\n\nTo rectify this, you can add the BlurViewPackage manually in MainActivity/MainApplication classes\n\n```java\n...\nimport com.cmcewen.blurview.BlurViewPackage;\n...\n\npublic class MainApplication extends Application implements ReactApplication {\n...\n    @Override\n    protected List<ReactPackage> getPackages() {\n      return Arrays.<ReactPackage>asList(\n          new MainReactPackage(),\n          new BlurViewPackage()\n      );\n    }\n...\n}\n```\n\n### Questions?\n\nFeel free to contact me on [twitter](https://twitter.com/kureevalexey) or [create an issue](https://github.com/Kureev/react-native-blur/issues/new)\n","readmeFilename":"README.md"}