├── .editorconfig ├── .gitattributes ├── .github └── dependabot.yml ├── .gitignore ├── .vscode └── settings.json ├── .watchmanconfig ├── .yarnrc ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── android ├── build.gradle ├── gradle.properties └── src │ ├── main │ ├── AndroidManifest.xml │ ├── java │ │ └── com │ │ │ └── reactnativecommunity │ │ │ └── blurview │ │ │ ├── BlurViewManagerImpl.java │ │ │ └── BlurViewPackage.java │ └── res │ │ └── values │ │ ├── attr.xml │ │ └── defaults.xml │ ├── newarch │ └── java │ │ └── com │ │ └── reactnativecommunity │ │ └── blurview │ │ └── BlurViewManager.java │ └── oldarch │ └── java │ └── com │ └── reactnativecommunity │ └── blurview │ └── BlurViewManager.java ├── babel.config.js ├── example ├── .gitignore ├── .watchmanconfig ├── android │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── babel.config.js ├── index.tsx ├── ios │ ├── Podfile │ └── Podfile.lock ├── metro.config.js ├── package.json ├── react-native.config.js ├── src │ ├── App.tsx │ └── bgimage.jpeg └── yarn.lock ├── ios ├── BlurEffectWithAmount.h ├── BlurEffectWithAmount.m ├── BlurView.h ├── BlurView.mm ├── BlurViewManager.h ├── BlurViewManager.mm ├── RNBlur.xcodeproj │ └── project.pbxproj ├── VibrancyView.h ├── VibrancyView.mm ├── VibrancyViewManager.h └── VibrancyViewManager.mm ├── lefthook.yml ├── package.json ├── react-native-blur.podspec ├── scripts └── bootstrap.js ├── src ├── components │ ├── BlurView.android.tsx │ ├── BlurView.ios.tsx │ ├── VibrancyView.android.tsx │ └── VibrancyView.ios.tsx ├── fabric │ ├── BlurViewNativeComponent.ts │ ├── BlurViewNativeComponentAndroid.ts │ └── VibrancyViewNativeComponent.ts └── index.tsx ├── tsconfig.build.json ├── tsconfig.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | indent_style = space 10 | indent_size = 2 11 | 12 | end_of_line = lf 13 | charset = utf-8 14 | trim_trailing_whitespace = true 15 | insert_final_newline = true 16 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | # specific for windows script files 3 | *.bat text eol=crlf -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: '/' 5 | schedule: 6 | interval: daily 7 | commit-message: 8 | prefix: fix 9 | prefix-development: chore 10 | include: scope 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # XDE 6 | .expo/ 7 | 8 | # VSCode 9 | .vscode/ 10 | jsconfig.json 11 | 12 | # Xcode 13 | # 14 | build/ 15 | *.pbxuser 16 | !default.pbxuser 17 | *.mode1v3 18 | !default.mode1v3 19 | *.mode2v3 20 | !default.mode2v3 21 | *.perspectivev3 22 | !default.perspectivev3 23 | xcuserdata 24 | *.xccheckout 25 | *.moved-aside 26 | DerivedData 27 | *.hmap 28 | *.ipa 29 | *.xcuserstate 30 | project.xcworkspace 31 | 32 | # Android/IJ 33 | # 34 | .classpath 35 | .cxx 36 | .gradle 37 | .idea 38 | .project 39 | .settings 40 | local.properties 41 | android.iml 42 | 43 | # Cocoapods 44 | # 45 | */ios/Pods 46 | 47 | # Ruby 48 | */vendor/ 49 | 50 | # node.js 51 | # 52 | node_modules/ 53 | npm-debug.log 54 | yarn-debug.log 55 | yarn-error.log 56 | 57 | # BUCK 58 | buck-out/ 59 | \.buckd/ 60 | android/app/libs 61 | android/keystores/debug.keystore 62 | 63 | # Expo 64 | .expo/* 65 | 66 | # generated by bob 67 | lib/ 68 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | "editor.codeActionsOnSave": { 4 | "source.fixAll.eslint": true 5 | } 6 | } -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | # Override Yarn command so we can automatically setup the repo on running `yarn` 2 | 3 | yarn-path "scripts/bootstrap.js" 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | We want this community to be friendly and respectful to each other. Please follow it in all your interactions with the project. 4 | 5 | ## Development workflow 6 | 7 | To get started with the project, run `yarn` in the root directory to install the required dependencies for each package: 8 | 9 | ```sh 10 | yarn 11 | ``` 12 | 13 | > While it's possible to use [`npm`](https://github.com/npm/cli), the tooling is built around [`yarn`](https://classic.yarnpkg.com/), so you'll have an easier time if you use `yarn` for development. 14 | 15 | While developing, you can run the [example app](/example/) to test your changes. Any changes you make in your library's JavaScript code will be reflected in the example app without a rebuild. If you change any native code, then you'll need to rebuild the example app. 16 | 17 | To start the packager: 18 | 19 | ```sh 20 | yarn example start 21 | ``` 22 | 23 | To run the example app on Android: 24 | 25 | ```sh 26 | yarn example android 27 | ``` 28 | 29 | To run the example app on iOS: 30 | 31 | ```sh 32 | yarn example ios 33 | ``` 34 | 35 | 36 | Make sure your code passes TypeScript and ESLint. Run the following to verify: 37 | 38 | ```sh 39 | yarn typescript 40 | yarn lint 41 | ``` 42 | 43 | To fix formatting errors, run the following: 44 | 45 | ```sh 46 | yarn lint --fix 47 | ``` 48 | 49 | Remember to add tests for your change if possible. Run the unit tests by: 50 | 51 | ```sh 52 | yarn test 53 | ``` 54 | To edit the Objective-C files, open `example/ios/BlurExample.xcworkspace` in XCode and find the source files at `Pods > Development Pods > @react-native-community/blur`. 55 | 56 | To edit the Kotlin files, open `example/android` in Android studio and find the source files at `reactnativecommunityblur` under `Android`. 57 | ### Commit message convention 58 | 59 | We follow the [conventional commits specification](https://www.conventionalcommits.org/en) for our commit messages: 60 | 61 | - `fix`: bug fixes, e.g. fix crash due to deprecated method. 62 | - `feat`: new features, e.g. add new method to the module. 63 | - `refactor`: code refactor, e.g. migrate from class components to hooks. 64 | - `docs`: changes into documentation, e.g. add usage example for the module.. 65 | - `test`: adding or updating tests, e.g. add integration tests using detox. 66 | - `chore`: tooling changes, e.g. change CI config. 67 | 68 | Our pre-commit hooks verify that your commit message matches this format when committing. 69 | 70 | ### Linting and tests 71 | 72 | [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/) 73 | 74 | We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing. 75 | 76 | Our pre-commit hooks verify that the linter and tests pass when committing. 77 | 78 | ### Publishing to npm 79 | 80 | We use [release-it](https://github.com/release-it/release-it) to make it easier to publish new versions. It handles common tasks like bumping version based on semver, creating tags and releases etc. 81 | 82 | To publish new versions, run the following: 83 | 84 | ```sh 85 | yarn release 86 | ``` 87 | 88 | ### Scripts 89 | 90 | The `package.json` file contains various scripts for common tasks: 91 | 92 | - `yarn bootstrap`: setup project by installing all dependencies and pods. 93 | - `yarn typescript`: type-check files with TypeScript. 94 | - `yarn lint`: lint files with ESLint. 95 | - `yarn test`: run unit tests with Jest. 96 | - `yarn example start`: start the Metro server for the example app. 97 | - `yarn example android`: run the example app on Android. 98 | - `yarn example ios`: run the example app on iOS. 99 | 100 | ### Sending a pull request 101 | 102 | > **Working on your first pull request?** You can learn how from this _free_ series: [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github). 103 | 104 | When you're sending a pull request: 105 | 106 | - Prefer small pull requests focused on one change. 107 | - Verify that linters and tests are passing. 108 | - Review the documentation to make sure it looks good. 109 | - Follow the pull request template when opening a pull request. 110 | - For pull requests that change the API or implementation, discuss with maintainers first by opening an issue. 111 | 112 | ## Code of Conduct 113 | 114 | ### Our Pledge 115 | 116 | We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body size, visible or invisible disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. 117 | 118 | We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. 119 | 120 | ### Our Standards 121 | 122 | Examples of behavior that contributes to a positive environment for our community include: 123 | 124 | - Demonstrating empathy and kindness toward other people 125 | - Being respectful of differing opinions, viewpoints, and experiences 126 | - Giving and gracefully accepting constructive feedback 127 | - Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience 128 | - Focusing on what is best not just for us as individuals, but for the overall community 129 | 130 | Examples of unacceptable behavior include: 131 | 132 | - The use of sexualized language or imagery, and sexual attention or 133 | advances of any kind 134 | - Trolling, insulting or derogatory comments, and personal or political attacks 135 | - Public or private harassment 136 | - Publishing others' private information, such as a physical or email 137 | address, without their explicit permission 138 | - Other conduct which could reasonably be considered inappropriate in a 139 | professional setting 140 | 141 | ### Enforcement Responsibilities 142 | 143 | Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior and will take appropriate and fair corrective action in response to any behavior that they deem inappropriate, threatening, offensive, or harmful. 144 | 145 | Community leaders have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and will communicate reasons for moderation decisions when appropriate. 146 | 147 | ### Scope 148 | 149 | This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing the community in public spaces. Examples of representing our community include using an official e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. 150 | 151 | ### Enforcement 152 | 153 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community leaders responsible for enforcement at [INSERT CONTACT METHOD]. All complaints will be reviewed and investigated promptly and fairly. 154 | 155 | All community leaders are obligated to respect the privacy and security of the reporter of any incident. 156 | 157 | ### Enforcement Guidelines 158 | 159 | Community leaders will follow these Community Impact Guidelines in determining the consequences for any action they deem in violation of this Code of Conduct: 160 | 161 | #### 1. Correction 162 | 163 | **Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or unwelcome in the community. 164 | 165 | **Consequence**: A private, written warning from community leaders, providing clarity around the nature of the violation and an explanation of why the behavior was inappropriate. A public apology may be requested. 166 | 167 | #### 2. Warning 168 | 169 | **Community Impact**: A violation through a single incident or series of actions. 170 | 171 | **Consequence**: A warning with consequences for continued behavior. No interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, for a specified period of time. This includes avoiding interactions in community spaces as well as external channels like social media. Violating these terms may lead to a temporary or permanent ban. 172 | 173 | #### 3. Temporary Ban 174 | 175 | **Community Impact**: A serious violation of community standards, including sustained inappropriate behavior. 176 | 177 | **Consequence**: A temporary ban from any sort of interaction or public communication with the community for a specified period of time. No public or private interaction with the people involved, including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this period. Violating these terms may lead to a permanent ban. 178 | 179 | #### 4. Permanent Ban 180 | 181 | **Community Impact**: Demonstrating a pattern of violation of community standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. 182 | 183 | **Consequence**: A permanent ban from any sort of public interaction within the community. 184 | 185 | ### Attribution 186 | 187 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, 188 | available at https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 189 | 190 | Community Impact Guidelines were inspired by [Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity). 191 | 192 | [homepage]: https://www.contributor-covenant.org 193 | 194 | For answers to common questions about this code of conduct, see the FAQ at 195 | https://www.contributor-covenant.org/faq. Translations are available at https://www.contributor-covenant.org/translations. 196 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 React Native Community 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `@react-native-community/blur` 2 | 3 | [![npm version](https://badge.fury.io/js/%40react-native-community%2Fblur.svg)](https://badge.fury.io/js/%40react-native-community%2Fblur) 4 | 5 | A component for UIVisualEffectView's blur and vibrancy effect on iOS, and [BlurView](https://github.com/Dimezis/BlurView) on Android.
6 | 7 | 8 | 9 | ### Current Maintainers: 10 | - [Thibault Malbranche](https://github.com/Titozzz) ([Twitter @titozzz](https://twitter.com/titozzz)) from [Brigad](https://www.brigad.co/en-gb/about-us) 11 | 12 | ### Content 13 | 14 | - [Installation](#installation) 15 | - [Usage](#usage) 16 | - [VibrancyView](#vibrancyview) 17 | - [Example React Native app](#example-react-native-app) 18 | - [Questions?](#questions) 19 | 20 | ### Installation 21 | 22 | ``` 23 | yarn add @react-native-community/blur 24 | ``` 25 | 26 | Install native dependencies (iOS only): 27 | 28 | ``` 29 | cd ios && pod install 30 | ``` 31 | 32 | ### Usage 33 | 34 | #### BlurView 35 | 36 | | Property | Possible Values | Default | Platform 37 | | ----------- | ----------- | ----------- | ----------- 38 | | `blurType` | See blurType below | - | All 39 | | `blurAmount` | 0 - 100 (The maximum blurAmount on Android is 32, so higher values will be clamped to 32) | 10 | All 40 | | `reducedTransparencyFallbackColor` | Any color | - | iOS only 41 | | `blurRadius` | 0 - 25 | Matches iOS blurAmount | Android only 42 | | `downsampleFactor` | 0 - 25 | Matches iOS blurAmount | Android only 43 | | `overlayColor` | Any color | Default color based on iOS blurType | Android only 44 | 45 | #### blurType 46 | 47 | | Name | Description 48 | | ----------- | ----------- 49 | | `xlight` | extra light blur type 50 | | `light` | light blur type 51 | | `dark` | dark blur type 52 | | `extraDark` | extra dark blur type (tvOS only) 53 | | `regular` | regular blur type (iOS 10+ and tvOS only) 54 | | `prominent` | prominent blur type (iOS 10+ and tvOS only) 55 | 56 | #### blurType (iOS 13 only) 57 | 58 | | Name | Description 59 | | ----------- | ----------- 60 | | `chromeMaterial` | An adaptable blur effect that creates the appearance of the system chrome. 61 | | `material` | An adaptable blur effect that creates the appearance of a material with normal thickness. 62 | | `thickMaterial` | An adaptable blur effect that creates the appearance of a material that is thicker than normal. 63 | | `chromeMaterial` | An adaptable blur effect that creates the appearance of the system chrome. 64 | | `thinMaterial` | An adaptable blur effect that creates the appearance of an ultra-thin material. 65 | | `ultraThinMaterial` | An adaptable blur effect that creates the appearance of an ultra-thin material. 66 | | `chromeMaterialDark` | A blur effect that creates the appearance of an ultra-thin material and is always dark. 67 | | `materialDark` | A blur effect that creates the appearance of a thin material and is always dark. 68 | | `thickMaterialDark` | A blur effect that creates the appearance of a material with normal thickness and is always dark. 69 | | `thinMaterialDark` | A blur effect that creates the appearance of a material that is thicker than normal and is always dark. 70 | | `ultraThinMaterialDark` | A blur effect that creates the appearance of the system chrome and is always dark. 71 | | `chromeMaterialLight` | An adaptable blur effect that creates the appearance of the system chrome. 72 | | `materialLight` | An adaptable blur effect that creates the appearance of a material with normal thickness. 73 | | `thickMaterialLight` | An adaptable blur effect that creates the appearance of a material that is thicker than normal. 74 | | `thinMaterialLight` | An adaptable blur effect that creates the appearance of a thin material. 75 | | `ultraThinMaterialLight` | An adaptable blur effect that creates the appearance of an ultra-thin material. 76 | 77 | Complete usage example that works on iOS and Android: 78 | 79 | ```javascript 80 | import React, { Component } from "react"; 81 | import { View, Image, Text, StyleSheet } from "react-native"; 82 | import { BlurView } from "@react-native-community/blur"; 83 | 84 | export default function Menu() { 85 | return ( 86 | 87 | 92 | Hi, I am some blurred text 93 | {/* in terms of positioning and zIndex-ing everything before the BlurView will be blurred */} 94 | 100 | I'm the non blurred text because I got rendered on top of the BlurView 101 | 102 | ) 103 | } 104 | 105 | const styles = StyleSheet.create({ 106 | container: { 107 | justifyContent: "center", 108 | alignItems: "center" 109 | }, 110 | absolute: { 111 | position: "absolute", 112 | top: 0, 113 | left: 0, 114 | bottom: 0, 115 | right: 0 116 | } 117 | }); 118 | ``` 119 | 120 | In this example, the `Image` component will be blurred, because the `BlurView` in positioned on top. But the `Text` will stay unblurred. 121 | 122 | If 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`) 123 | 124 | ### VibrancyView 125 | 126 | Uses the same properties as `BlurView` (`blurType`, `blurAmount`, and `reducedTransparencyFallbackColor`). 127 | 128 | The vibrancy effect lets the content underneath a blurred view show through more vibrantly 129 | 130 | `VibrancyView is only supported on iOS. Also note that the VibrancyView must contain nested views` 131 | 132 | ```javascript 133 | import { VibrancyView } from "@react-native-community/blur"; 134 | 135 | export default function Menu() { 136 | return ( 137 | 138 | 139 | Hi, I am some vibrant text. 140 | 141 | 142 | ) 143 | } 144 | ``` 145 | 146 | ### Example React Native App 147 | 148 | This project includes an example React Native app, which was used to make the GIF in this README. 149 | You can run the apps by following these steps: 150 | 151 | Clone the repository 152 | 153 | ``` 154 | git clone https://github.com/react-native-community/react-native-blur.git 155 | ``` 156 | 157 | Install dependencies 158 | 159 | ``` 160 | yarn 161 | ``` 162 | 163 | #### Run the app 164 | 165 | ``` 166 | yarn example android/ios 167 | ``` 168 | 169 | ### Questions? 170 | 171 | Feel free to [create an issue](https://github.com/Kureev/react-native-blur/issues/new) 172 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | repositories { 3 | google() 4 | mavenCentral() 5 | } 6 | 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:3.5.3' 9 | } 10 | } 11 | 12 | def isNewArchitectureEnabled() { 13 | return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true" 14 | } 15 | 16 | apply plugin: 'com.android.library' 17 | 18 | if (isNewArchitectureEnabled()) { 19 | apply plugin: 'com.facebook.react' 20 | } 21 | 22 | def getExtOrDefault(name) { 23 | return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['Blur_' + name] 24 | } 25 | 26 | def getExtOrIntegerDefault(name) { 27 | return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties['Blur_' + name]).toInteger() 28 | } 29 | 30 | android { 31 | compileSdkVersion getExtOrIntegerDefault('compileSdkVersion') 32 | namespace "com.reactnativecommunity.blurview" 33 | 34 | defaultConfig { 35 | minSdkVersion getExtOrIntegerDefault('minSdkVersion') 36 | targetSdkVersion getExtOrIntegerDefault('targetSdkVersion') 37 | buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString() 38 | } 39 | buildTypes { 40 | release { 41 | minifyEnabled false 42 | } 43 | } 44 | 45 | lintOptions { 46 | disable 'GradleCompatible' 47 | } 48 | 49 | compileOptions { 50 | sourceCompatibility JavaVersion.VERSION_1_8 51 | targetCompatibility JavaVersion.VERSION_1_8 52 | } 53 | 54 | sourceSets { 55 | main { 56 | if (isNewArchitectureEnabled()) { 57 | java.srcDirs += ['src/newarch'] 58 | } else { 59 | java.srcDirs += ['src/oldarch'] 60 | } 61 | } 62 | } 63 | } 64 | 65 | repositories { 66 | mavenCentral() 67 | google() 68 | maven { url 'https://jitpack.io' } 69 | 70 | def found = false 71 | def defaultDir = null 72 | def androidSourcesName = 'React Native sources' 73 | 74 | if (rootProject.ext.has('reactNativeAndroidRoot')) { 75 | defaultDir = rootProject.ext.get('reactNativeAndroidRoot') 76 | } else { 77 | defaultDir = new File( 78 | projectDir, 79 | '/../../../node_modules/react-native/android' 80 | ) 81 | } 82 | 83 | if (defaultDir.exists()) { 84 | maven { 85 | url defaultDir.toString() 86 | name androidSourcesName 87 | } 88 | 89 | logger.info(":${project.name}:reactNativeAndroidRoot ${defaultDir.canonicalPath}") 90 | found = true 91 | } else { 92 | def parentDir = rootProject.projectDir 93 | 94 | 1.upto(5, { 95 | if (found) return true 96 | parentDir = parentDir.parentFile 97 | 98 | def androidSourcesDir = new File( 99 | parentDir, 100 | 'node_modules/react-native' 101 | ) 102 | 103 | def androidPrebuiltBinaryDir = new File( 104 | parentDir, 105 | 'node_modules/react-native/android' 106 | ) 107 | 108 | if (androidPrebuiltBinaryDir.exists()) { 109 | maven { 110 | url androidPrebuiltBinaryDir.toString() 111 | name androidSourcesName 112 | } 113 | 114 | logger.info(":${project.name}:reactNativeAndroidRoot ${androidPrebuiltBinaryDir.canonicalPath}") 115 | found = true 116 | } else if (androidSourcesDir.exists()) { 117 | maven { 118 | url androidSourcesDir.toString() 119 | name androidSourcesName 120 | } 121 | 122 | logger.info(":${project.name}:reactNativeAndroidRoot ${androidSourcesDir.canonicalPath}") 123 | found = true 124 | } 125 | }) 126 | } 127 | 128 | if (!found) { 129 | throw new GradleException( 130 | "${project.name}: unable to locate React Native android sources. " + 131 | "Ensure you have you installed React Native as a dependency in your project and try again." 132 | ) 133 | } 134 | } 135 | 136 | 137 | dependencies { 138 | //noinspection GradleDynamicVersion 139 | implementation "com.facebook.react:react-native:+" 140 | // From node_modules 141 | 142 | implementation 'com.github.Dimezis:BlurView:version-2.0.4' 143 | } 144 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | Blur_kotlinVersion=1.7.0 2 | Blur_minSdkVersion=21 3 | Blur_targetSdkVersion=31 4 | Blur_compileSdkVersion=31 5 | Blur_ndkversion=21.4.7075529 6 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /android/src/main/java/com/reactnativecommunity/blurview/BlurViewManagerImpl.java: -------------------------------------------------------------------------------- 1 | package com.reactnativecommunity.blurview; 2 | 3 | import android.view.View; 4 | import com.facebook.react.uimanager.ThemedReactContext; 5 | 6 | import eightbitlab.com.blurview.BlurView; 7 | 8 | import java.util.Objects; 9 | import javax.annotation.Nonnull; 10 | 11 | @SuppressWarnings("unused") 12 | class BlurViewManagerImpl { 13 | 14 | public static final String REACT_CLASS = "AndroidBlurView"; 15 | 16 | public static final int defaultRadius = 10; 17 | public static final int defaultSampling = 10; 18 | 19 | public static @Nonnull BlurView createViewInstance(@Nonnull ThemedReactContext ctx) { 20 | BlurView blurView = new BlurView(ctx); 21 | View decorView = Objects 22 | .requireNonNull(ctx.getCurrentActivity()) 23 | .getWindow() 24 | .getDecorView(); 25 | blurView 26 | .setupWith(decorView.findViewById(android.R.id.content)) 27 | .setFrameClearDrawable(decorView.getBackground()) 28 | .setBlurRadius(defaultRadius); 29 | return blurView; 30 | } 31 | 32 | public static void setRadius(BlurView view, int radius) { 33 | view.setBlurRadius(radius); 34 | view.invalidate(); 35 | } 36 | 37 | public static void setColor(BlurView view, int color) { 38 | view.setOverlayColor(color); 39 | view.invalidate(); 40 | } 41 | 42 | public static void setDownsampleFactor(BlurView view, int factor) {} 43 | 44 | public static void setAutoUpdate(BlurView view, boolean autoUpdate) { 45 | view.setBlurAutoUpdate(autoUpdate); 46 | view.invalidate(); 47 | } 48 | 49 | public static void setBlurEnabled(BlurView view, boolean enabled) { 50 | view.setBlurEnabled(enabled); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /android/src/main/java/com/reactnativecommunity/blurview/BlurViewPackage.java: -------------------------------------------------------------------------------- 1 | package com.reactnativecommunity.blurview; 2 | 3 | import com.facebook.react.ReactPackage; 4 | import com.facebook.react.bridge.JavaScriptModule; 5 | import com.facebook.react.bridge.NativeModule; 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.react.uimanager.ViewManager; 8 | import java.util.ArrayList; 9 | import java.util.Collections; 10 | import java.util.List; 11 | import javax.annotation.Nonnull; 12 | 13 | public class BlurViewPackage implements ReactPackage { 14 | 15 | @Override 16 | @Nonnull 17 | public List createNativeModules( 18 | @Nonnull ReactApplicationContext reactApplicationContext 19 | ) { 20 | return new ArrayList<>(); 21 | } 22 | 23 | @SuppressWarnings("unused") 24 | public List> createJSModules() { 25 | return Collections.emptyList(); 26 | } 27 | 28 | @Override 29 | @Nonnull 30 | public List createViewManagers( 31 | @Nonnull ReactApplicationContext reactContext 32 | ) { 33 | return Collections.singletonList(new BlurViewManager(reactContext)); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /android/src/main/res/values/attr.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /android/src/main/res/values/defaults.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 15 4 | 8 5 | #AAFFFFFF 6 | 7 | -------------------------------------------------------------------------------- /android/src/newarch/java/com/reactnativecommunity/blurview/BlurViewManager.java: -------------------------------------------------------------------------------- 1 | package com.reactnativecommunity.blurview; 2 | 3 | import androidx.annotation.NonNull; 4 | import androidx.annotation.Nullable; 5 | 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.react.module.annotations.ReactModule; 8 | import com.facebook.react.uimanager.ThemedReactContext; 9 | import com.facebook.react.uimanager.ViewGroupManager; 10 | import com.facebook.react.uimanager.ViewManagerDelegate; 11 | import com.facebook.react.uimanager.annotations.ReactProp; 12 | import com.facebook.react.viewmanagers.AndroidBlurViewManagerDelegate; 13 | import com.facebook.react.viewmanagers.AndroidBlurViewManagerInterface; 14 | 15 | import eightbitlab.com.blurview.BlurView; 16 | 17 | @ReactModule(name = BlurViewManagerImpl.REACT_CLASS) 18 | class BlurViewManager extends ViewGroupManager 19 | implements AndroidBlurViewManagerInterface { 20 | 21 | private final ViewManagerDelegate mDelegate; 22 | 23 | public BlurViewManager(ReactApplicationContext context) { 24 | mDelegate = new AndroidBlurViewManagerDelegate<>(this); 25 | } 26 | 27 | @Nullable 28 | @Override 29 | protected ViewManagerDelegate getDelegate() { 30 | return mDelegate; 31 | } 32 | 33 | @NonNull 34 | @Override 35 | public String getName() { 36 | return BlurViewManagerImpl.REACT_CLASS; 37 | } 38 | 39 | @NonNull 40 | @Override 41 | protected BlurView createViewInstance(@NonNull ThemedReactContext context) { 42 | return BlurViewManagerImpl.createViewInstance(context); 43 | } 44 | 45 | @Override 46 | @ReactProp(name = "blurRadius", defaultInt = BlurViewManagerImpl.defaultRadius) 47 | public void setBlurRadius(BlurView view, int radius) { 48 | BlurViewManagerImpl.setRadius(view, radius); 49 | } 50 | 51 | @Override 52 | @ReactProp(name = "overlayColor", customType = "Color") 53 | public void setOverlayColor(BlurView view, Integer color) { 54 | BlurViewManagerImpl.setColor(view, color); 55 | } 56 | 57 | @Override 58 | @ReactProp(name = "downsampleFactor", defaultInt = BlurViewManagerImpl.defaultSampling) 59 | public void setDownsampleFactor(BlurView view, int factor) {} 60 | 61 | @Override 62 | @ReactProp(name = "autoUpdate", defaultBoolean = true) 63 | public void setAutoUpdate(BlurView view, boolean autoUpdate) { 64 | BlurViewManagerImpl.setAutoUpdate(view, autoUpdate); 65 | } 66 | 67 | @Override 68 | @ReactProp(name = "enabled", defaultBoolean = true) 69 | public void setEnabled(BlurView view, boolean enabled) { 70 | BlurViewManagerImpl.setBlurEnabled(view, enabled); 71 | } 72 | 73 | @Override 74 | public void setBlurAmount(BlurView view, int value) {} 75 | 76 | @Override 77 | public void setBlurType(BlurView view, @Nullable String value) {} 78 | } 79 | -------------------------------------------------------------------------------- /android/src/oldarch/java/com/reactnativecommunity/blurview/BlurViewManager.java: -------------------------------------------------------------------------------- 1 | package com.reactnativecommunity.blurview; 2 | 3 | import androidx.annotation.NonNull; 4 | 5 | import com.facebook.react.bridge.ReactApplicationContext; 6 | import com.facebook.react.uimanager.ThemedReactContext; 7 | import com.facebook.react.uimanager.ViewGroupManager; 8 | import com.facebook.react.uimanager.annotations.ReactProp; 9 | 10 | import eightbitlab.com.blurview.BlurView; 11 | 12 | class BlurViewManager extends ViewGroupManager { 13 | 14 | ReactApplicationContext mCallerContext; 15 | 16 | public BlurViewManager(ReactApplicationContext reactContext) { 17 | mCallerContext = reactContext; 18 | } 19 | 20 | @Override 21 | public BlurView createViewInstance(ThemedReactContext context) { 22 | return BlurViewManagerImpl.createViewInstance(context); 23 | } 24 | 25 | @NonNull 26 | @Override 27 | public String getName() { 28 | return BlurViewManagerImpl.REACT_CLASS; 29 | } 30 | 31 | @ReactProp(name = "blurRadius", defaultInt = BlurViewManagerImpl.defaultRadius) 32 | public void setRadius(BlurView view, int radius) { 33 | BlurViewManagerImpl.setRadius(view, radius); 34 | } 35 | 36 | @ReactProp(name = "overlayColor", customType = "Color") 37 | public void setColor(BlurView view, int color) { 38 | BlurViewManagerImpl.setColor(view, color); 39 | } 40 | 41 | @ReactProp(name = "downsampleFactor", defaultInt = BlurViewManagerImpl.defaultSampling) 42 | public void setDownsampleFactor(BlurView view, int factor) {} 43 | 44 | @ReactProp(name = "autoUpdate", defaultBoolean = true) 45 | public void setAutoUpdate(BlurView view, boolean autoUpdate) { 46 | BlurViewManagerImpl.setAutoUpdate(view, autoUpdate); 47 | } 48 | 49 | @ReactProp(name = "enabled", defaultBoolean = true) 50 | public void setBlurEnabled(BlurView view, boolean enabled) { 51 | BlurViewManagerImpl.setBlurEnabled(view, enabled); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | *.binlog 2 | *.hprof 3 | *.xcworkspace/ 4 | *.zip 5 | .DS_Store 6 | .gradle/ 7 | .idea/ 8 | .vs/ 9 | Pods/ 10 | build/ 11 | dist/ 12 | local.properties 13 | msbuild.binlog 14 | node_modules/ 15 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | def androidTestAppDir = "../node_modules/react-native-test-app/android" 3 | apply(from: "${androidTestAppDir}/dependencies.gradle") 4 | apply(from: "${androidTestAppDir}/test-app-util.gradle") 5 | 6 | repositories { 7 | mavenCentral() 8 | google() 9 | } 10 | 11 | dependencies { 12 | classpath("com.android.tools.build:gradle:${androidPluginVersion}") 13 | 14 | if (isNewArchitectureEnabled(project)) { 15 | classpath("com.facebook.react:react-native-gradle-plugin") 16 | classpath("de.undercouch:gradle-download-task:5.1.0") 17 | } 18 | } 19 | } 20 | 21 | allprojects { 22 | repositories { 23 | maven { 24 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 25 | url("${rootDir}/../node_modules/react-native/android") 26 | } 27 | mavenCentral() 28 | google() 29 | maven { url 'https://www.jitpack.io' } 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the Gradle Daemon. The setting is 11 | # particularly useful for configuring JVM memory settings for build performance. 12 | # This does not affect the JVM settings for the Gradle client VM. 13 | # The default is `-Xmx512m -XX:MaxMetaspaceSize=256m`. 14 | org.gradle.jvmargs=-Xmx2g -XX:MaxMetaspaceSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 15 | 16 | # When configured, Gradle will fork up to org.gradle.workers.max JVMs to execute 17 | # projects in parallel. To learn more about parallel task execution, see the 18 | # section on Gradle build performance: 19 | # https://docs.gradle.org/current/userguide/performance.html#parallel_execution. 20 | # Default is `false`. 21 | #org.gradle.parallel=true 22 | 23 | # AndroidX package structure to make it clearer which packages are bundled with the 24 | # Android operating system, and which are packaged with your app's APK 25 | # https://developer.android.com/topic/libraries/support-library/androidx-rn 26 | android.useAndroidX=true 27 | # Automatically convert third-party libraries to use AndroidX 28 | android.enableJetifier=true 29 | 30 | # Version of Flipper to use with React Native. Default value is whatever React 31 | # Native defaults to. To disable Flipper, set it to `false`. 32 | #FLIPPER_VERSION=0.125.0 33 | 34 | # Enable Fabric at runtime. 35 | #USE_FABRIC=1 36 | 37 | # Enable new architecture, i.e. Fabric + TurboModule - implies USE_FABRIC=1. 38 | # Note that this is incompatible with web debugging. 39 | #newArchEnabled=true 40 | 41 | # Uncomment the line below if building react-native from source 42 | #ANDROID_NDK_VERSION=21.4.7075529 43 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kureev/react-native-blur/7edfaa0f2ef37ae5fa4cbf378f9ca75080752a76/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.4.2-bin.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | # 4 | # Copyright © 2015-2021 the original authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # https://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | # 21 | # Gradle start up script for POSIX generated by Gradle. 22 | # 23 | # Important for running: 24 | # 25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is 26 | # noncompliant, but you have some other compliant shell such as ksh or 27 | # bash, then to run this script, type that shell name before the whole 28 | # command line, like: 29 | # 30 | # ksh Gradle 31 | # 32 | # Busybox and similar reduced shells will NOT work, because this script 33 | # requires all of these POSIX shell features: 34 | # * functions; 35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}», 36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»; 37 | # * compound commands having a testable exit status, especially «case»; 38 | # * various built-in commands including «command», «set», and «ulimit». 39 | # 40 | # Important for patching: 41 | # 42 | # (2) This script targets any POSIX shell, so it avoids extensions provided 43 | # by Bash, Ksh, etc; in particular arrays are avoided. 44 | # 45 | # The "traditional" practice of packing multiple parameters into a 46 | # space-separated string is a well documented source of bugs and security 47 | # problems, so this is (mostly) avoided, by progressively accumulating 48 | # options in "$@", and eventually passing that to Java. 49 | # 50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS, 51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly; 52 | # see the in-line comments for details. 53 | # 54 | # There are tweaks for specific operating systems such as AIX, CygWin, 55 | # Darwin, MinGW, and NonStop. 56 | # 57 | # (3) This script is generated from the Groovy template 58 | # https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt 59 | # within the Gradle project. 60 | # 61 | # You can find Gradle at https://github.com/gradle/gradle/. 62 | # 63 | ############################################################################## 64 | 65 | # Attempt to set APP_HOME 66 | 67 | # Resolve links: $0 may be a link 68 | app_path=$0 69 | 70 | # Need this for daisy-chained symlinks. 71 | while 72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path 73 | [ -h "$app_path" ] 74 | do 75 | ls=$( ls -ld "$app_path" ) 76 | link=${ls#*' -> '} 77 | case $link in #( 78 | /*) app_path=$link ;; #( 79 | *) app_path=$APP_HOME$link ;; 80 | esac 81 | done 82 | 83 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit 84 | 85 | APP_NAME="Gradle" 86 | APP_BASE_NAME=${0##*/} 87 | 88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 90 | 91 | # Use the maximum available, or set MAX_FD != -1 to use that value. 92 | MAX_FD=maximum 93 | 94 | warn () { 95 | echo "$*" 96 | } >&2 97 | 98 | die () { 99 | echo 100 | echo "$*" 101 | echo 102 | exit 1 103 | } >&2 104 | 105 | # OS specific support (must be 'true' or 'false'). 106 | cygwin=false 107 | msys=false 108 | darwin=false 109 | nonstop=false 110 | case "$( uname )" in #( 111 | CYGWIN* ) cygwin=true ;; #( 112 | Darwin* ) darwin=true ;; #( 113 | MSYS* | MINGW* ) msys=true ;; #( 114 | NONSTOP* ) nonstop=true ;; 115 | esac 116 | 117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 118 | 119 | 120 | # Determine the Java command to use to start the JVM. 121 | if [ -n "$JAVA_HOME" ] ; then 122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 123 | # IBM's JDK on AIX uses strange locations for the executables 124 | JAVACMD=$JAVA_HOME/jre/sh/java 125 | else 126 | JAVACMD=$JAVA_HOME/bin/java 127 | fi 128 | if [ ! -x "$JAVACMD" ] ; then 129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 130 | 131 | Please set the JAVA_HOME variable in your environment to match the 132 | location of your Java installation." 133 | fi 134 | else 135 | JAVACMD=java 136 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 137 | 138 | Please set the JAVA_HOME variable in your environment to match the 139 | location of your Java installation." 140 | fi 141 | 142 | # Increase the maximum file descriptors if we can. 143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then 144 | case $MAX_FD in #( 145 | max*) 146 | MAX_FD=$( ulimit -H -n ) || 147 | warn "Could not query maximum file descriptor limit" 148 | esac 149 | case $MAX_FD in #( 150 | '' | soft) :;; #( 151 | *) 152 | ulimit -n "$MAX_FD" || 153 | warn "Could not set maximum file descriptor limit to $MAX_FD" 154 | esac 155 | fi 156 | 157 | # Collect all arguments for the java command, stacking in reverse order: 158 | # * args from the command line 159 | # * the main class name 160 | # * -classpath 161 | # * -D...appname settings 162 | # * --module-path (only if needed) 163 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables. 164 | 165 | # For Cygwin or MSYS, switch paths to Windows format before running java 166 | if "$cygwin" || "$msys" ; then 167 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" ) 168 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" ) 169 | 170 | JAVACMD=$( cygpath --unix "$JAVACMD" ) 171 | 172 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 173 | for arg do 174 | if 175 | case $arg in #( 176 | -*) false ;; # don't mess with options #( 177 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath 178 | [ -e "$t" ] ;; #( 179 | *) false ;; 180 | esac 181 | then 182 | arg=$( cygpath --path --ignore --mixed "$arg" ) 183 | fi 184 | # Roll the args list around exactly as many times as the number of 185 | # args, so each arg winds up back in the position where it started, but 186 | # possibly modified. 187 | # 188 | # NB: a `for` loop captures its iteration list before it begins, so 189 | # changing the positional parameters here affects neither the number of 190 | # iterations, nor the values presented in `arg`. 191 | shift # remove old arg 192 | set -- "$@" "$arg" # push replacement arg 193 | done 194 | fi 195 | 196 | # Collect all arguments for the java command; 197 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of 198 | # shell script including quotes and variable substitutions, so put them in 199 | # double quotes to make sure that they get re-expanded; and 200 | # * put everything else in single quotes, so that it's not re-expanded. 201 | 202 | set -- \ 203 | "-Dorg.gradle.appname=$APP_BASE_NAME" \ 204 | -classpath "$CLASSPATH" \ 205 | org.gradle.wrapper.GradleWrapperMain \ 206 | "$@" 207 | 208 | # Use "xargs" to parse quoted args. 209 | # 210 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed. 211 | # 212 | # In Bash we could simply go: 213 | # 214 | # readarray ARGS < <( xargs -n1 <<<"$var" ) && 215 | # set -- "${ARGS[@]}" "$@" 216 | # 217 | # but POSIX shell has neither arrays nor command substitution, so instead we 218 | # post-process each arg (as a line of input to sed) to backslash-escape any 219 | # character that might be a shell metacharacter, then use eval to reverse 220 | # that process (while maintaining the separation between arguments), and wrap 221 | # the whole thing up as a single "set" statement. 222 | # 223 | # This will of course break if any of these variables contains a newline or 224 | # an unmatched quote. 225 | # 226 | 227 | eval "set -- $( 228 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" | 229 | xargs -n1 | 230 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' | 231 | tr '\n' ' ' 232 | )" '"$@"' 233 | 234 | exec "$JAVACMD" "$@" 235 | -------------------------------------------------------------------------------- /example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem https://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter. 33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi 34 | 35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 37 | 38 | @rem Find java.exe 39 | if defined JAVA_HOME goto findJavaFromJavaHome 40 | 41 | set JAVA_EXE=java.exe 42 | %JAVA_EXE% -version >NUL 2>&1 43 | if "%ERRORLEVEL%" == "0" goto execute 44 | 45 | echo. 46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 47 | echo. 48 | echo Please set the JAVA_HOME variable in your environment to match the 49 | echo location of your Java installation. 50 | 51 | goto fail 52 | 53 | :findJavaFromJavaHome 54 | set JAVA_HOME=%JAVA_HOME:"=% 55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 56 | 57 | if exist "%JAVA_EXE%" goto execute 58 | 59 | echo. 60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 61 | echo. 62 | echo Please set the JAVA_HOME variable in your environment to match the 63 | echo location of your Java installation. 64 | 65 | goto fail 66 | 67 | :execute 68 | @rem Setup the command line 69 | 70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 71 | 72 | 73 | @rem Execute Gradle 74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %* 75 | 76 | :end 77 | @rem End local scope for the variables with windows NT shell 78 | if "%ERRORLEVEL%"=="0" goto mainEnd 79 | 80 | :fail 81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 82 | rem the _cmd.exe /c_ return code! 83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 84 | exit /b 1 85 | 86 | :mainEnd 87 | if "%OS%"=="Windows_NT" endlocal 88 | 89 | :omega 90 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | pluginManagement { 2 | repositories { 3 | gradlePluginPortal() 4 | mavenCentral() 5 | google() 6 | } 7 | } 8 | 9 | rootProject.name = "BlurExample" 10 | 11 | apply(from: "../node_modules/react-native-test-app/test-app.gradle") 12 | applyTestAppSettings(settings) 13 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "BlurExample", 3 | "displayName": "BlurExample", 4 | "components": [ 5 | { 6 | "appKey": "main", 7 | "displayName": "BlurExample" 8 | } 9 | ], 10 | "resources": { 11 | "android": ["dist/res", "dist/main.android.jsbundle"], 12 | "ios": ["dist/assets", "dist/main.ios.jsbundle"], 13 | "macos": ["dist/assets", "dist/main.macos.jsbundle"], 14 | "windows": ["dist/assets", "dist/main.windows.bundle"] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /example/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /example/index.tsx: -------------------------------------------------------------------------------- 1 | import { AppRegistry } from 'react-native'; 2 | import App from './src/App'; 3 | 4 | AppRegistry.registerComponent('main', () => App); 5 | -------------------------------------------------------------------------------- /example/ios/Podfile: -------------------------------------------------------------------------------- 1 | require_relative '../node_modules/react-native-test-app/test_app' 2 | 3 | use_flipper! 4 | 5 | workspace 'BlurExample.xcworkspace' 6 | 7 | use_test_app! :hermes_enabled => true 8 | -------------------------------------------------------------------------------- /example/ios/Podfile.lock: -------------------------------------------------------------------------------- 1 | PODS: 2 | - boost (1.76.0) 3 | - CocoaAsyncSocket (7.6.5) 4 | - DoubleConversion (1.1.6) 5 | - FBLazyVector (0.70.1) 6 | - FBReactNativeSpec (0.70.1): 7 | - RCT-Folly (= 2021.07.22.00) 8 | - RCTRequired (= 0.70.1) 9 | - RCTTypeSafety (= 0.70.1) 10 | - React-Core (= 0.70.1) 11 | - React-jsi (= 0.70.1) 12 | - ReactCommon/turbomodule/core (= 0.70.1) 13 | - Flipper (0.125.0): 14 | - Flipper-Folly (~> 2.6) 15 | - Flipper-RSocket (~> 1.4) 16 | - Flipper-Boost-iOSX (1.76.0.1.11) 17 | - Flipper-DoubleConversion (3.2.0.1) 18 | - Flipper-Fmt (7.1.7) 19 | - Flipper-Folly (2.6.10): 20 | - Flipper-Boost-iOSX 21 | - Flipper-DoubleConversion 22 | - Flipper-Fmt (= 7.1.7) 23 | - Flipper-Glog 24 | - libevent (~> 2.1.12) 25 | - OpenSSL-Universal (= 1.1.1100) 26 | - Flipper-Glog (0.5.0.5) 27 | - Flipper-PeerTalk (0.0.4) 28 | - Flipper-RSocket (1.4.3): 29 | - Flipper-Folly (~> 2.6) 30 | - FlipperKit (0.125.0): 31 | - FlipperKit/Core (= 0.125.0) 32 | - FlipperKit/Core (0.125.0): 33 | - Flipper (~> 0.125.0) 34 | - FlipperKit/CppBridge 35 | - FlipperKit/FBCxxFollyDynamicConvert 36 | - FlipperKit/FBDefines 37 | - FlipperKit/FKPortForwarding 38 | - SocketRocket (~> 0.6.0) 39 | - FlipperKit/CppBridge (0.125.0): 40 | - Flipper (~> 0.125.0) 41 | - FlipperKit/FBCxxFollyDynamicConvert (0.125.0): 42 | - Flipper-Folly (~> 2.6) 43 | - FlipperKit/FBDefines (0.125.0) 44 | - FlipperKit/FKPortForwarding (0.125.0): 45 | - CocoaAsyncSocket (~> 7.6) 46 | - Flipper-PeerTalk (~> 0.0.4) 47 | - FlipperKit/FlipperKitHighlightOverlay (0.125.0) 48 | - FlipperKit/FlipperKitLayoutHelpers (0.125.0): 49 | - FlipperKit/Core 50 | - FlipperKit/FlipperKitHighlightOverlay 51 | - FlipperKit/FlipperKitLayoutTextSearchable 52 | - FlipperKit/FlipperKitLayoutIOSDescriptors (0.125.0): 53 | - FlipperKit/Core 54 | - FlipperKit/FlipperKitHighlightOverlay 55 | - FlipperKit/FlipperKitLayoutHelpers 56 | - YogaKit (~> 1.18) 57 | - FlipperKit/FlipperKitLayoutPlugin (0.125.0): 58 | - FlipperKit/Core 59 | - FlipperKit/FlipperKitHighlightOverlay 60 | - FlipperKit/FlipperKitLayoutHelpers 61 | - FlipperKit/FlipperKitLayoutIOSDescriptors 62 | - FlipperKit/FlipperKitLayoutTextSearchable 63 | - YogaKit (~> 1.18) 64 | - FlipperKit/FlipperKitLayoutTextSearchable (0.125.0) 65 | - FlipperKit/FlipperKitNetworkPlugin (0.125.0): 66 | - FlipperKit/Core 67 | - FlipperKit/FlipperKitReactPlugin (0.125.0): 68 | - FlipperKit/Core 69 | - FlipperKit/FlipperKitUserDefaultsPlugin (0.125.0): 70 | - FlipperKit/Core 71 | - FlipperKit/SKIOSNetworkPlugin (0.125.0): 72 | - FlipperKit/Core 73 | - FlipperKit/FlipperKitNetworkPlugin 74 | - fmt (6.2.1) 75 | - glog (0.3.5) 76 | - hermes-engine (0.70.1) 77 | - libevent (2.1.12) 78 | - OpenSSL-Universal (1.1.1100) 79 | - RCT-Folly (2021.07.22.00): 80 | - boost 81 | - DoubleConversion 82 | - fmt (~> 6.2.1) 83 | - glog 84 | - RCT-Folly/Default (= 2021.07.22.00) 85 | - RCT-Folly/Default (2021.07.22.00): 86 | - boost 87 | - DoubleConversion 88 | - fmt (~> 6.2.1) 89 | - glog 90 | - RCT-Folly/Fabric (2021.07.22.00): 91 | - boost 92 | - DoubleConversion 93 | - fmt (~> 6.2.1) 94 | - glog 95 | - RCT-Folly/Futures (2021.07.22.00): 96 | - boost 97 | - DoubleConversion 98 | - fmt (~> 6.2.1) 99 | - glog 100 | - libevent 101 | - RCTRequired (0.70.1) 102 | - RCTTypeSafety (0.70.1): 103 | - FBLazyVector (= 0.70.1) 104 | - RCTRequired (= 0.70.1) 105 | - React-Core (= 0.70.1) 106 | - React (0.70.1): 107 | - React-Core (= 0.70.1) 108 | - React-Core/DevSupport (= 0.70.1) 109 | - React-Core/RCTWebSocket (= 0.70.1) 110 | - React-RCTActionSheet (= 0.70.1) 111 | - React-RCTAnimation (= 0.70.1) 112 | - React-RCTBlob (= 0.70.1) 113 | - React-RCTImage (= 0.70.1) 114 | - React-RCTLinking (= 0.70.1) 115 | - React-RCTNetwork (= 0.70.1) 116 | - React-RCTSettings (= 0.70.1) 117 | - React-RCTText (= 0.70.1) 118 | - React-RCTVibration (= 0.70.1) 119 | - React-bridging (0.70.1): 120 | - RCT-Folly (= 2021.07.22.00) 121 | - React-jsi (= 0.70.1) 122 | - React-callinvoker (0.70.1) 123 | - React-Codegen (0.70.1): 124 | - FBReactNativeSpec (= 0.70.1) 125 | - RCT-Folly (= 2021.07.22.00) 126 | - RCTRequired (= 0.70.1) 127 | - RCTTypeSafety (= 0.70.1) 128 | - React-Core (= 0.70.1) 129 | - React-graphics (= 0.70.1) 130 | - React-jsi (= 0.70.1) 131 | - React-jsiexecutor (= 0.70.1) 132 | - React-rncore (= 0.70.1) 133 | - ReactCommon/turbomodule/core (= 0.70.1) 134 | - React-Core (0.70.1): 135 | - glog 136 | - RCT-Folly (= 2021.07.22.00) 137 | - React-Core/Default (= 0.70.1) 138 | - React-cxxreact (= 0.70.1) 139 | - React-jsi (= 0.70.1) 140 | - React-jsiexecutor (= 0.70.1) 141 | - React-perflogger (= 0.70.1) 142 | - Yoga 143 | - React-Core/CoreModulesHeaders (0.70.1): 144 | - glog 145 | - RCT-Folly (= 2021.07.22.00) 146 | - React-Core/Default 147 | - React-cxxreact (= 0.70.1) 148 | - React-jsi (= 0.70.1) 149 | - React-jsiexecutor (= 0.70.1) 150 | - React-perflogger (= 0.70.1) 151 | - Yoga 152 | - React-Core/Default (0.70.1): 153 | - glog 154 | - RCT-Folly (= 2021.07.22.00) 155 | - React-cxxreact (= 0.70.1) 156 | - React-jsi (= 0.70.1) 157 | - React-jsiexecutor (= 0.70.1) 158 | - React-perflogger (= 0.70.1) 159 | - Yoga 160 | - React-Core/DevSupport (0.70.1): 161 | - glog 162 | - RCT-Folly (= 2021.07.22.00) 163 | - React-Core/Default (= 0.70.1) 164 | - React-Core/RCTWebSocket (= 0.70.1) 165 | - React-cxxreact (= 0.70.1) 166 | - React-jsi (= 0.70.1) 167 | - React-jsiexecutor (= 0.70.1) 168 | - React-jsinspector (= 0.70.1) 169 | - React-perflogger (= 0.70.1) 170 | - Yoga 171 | - React-Core/RCTActionSheetHeaders (0.70.1): 172 | - glog 173 | - RCT-Folly (= 2021.07.22.00) 174 | - React-Core/Default 175 | - React-cxxreact (= 0.70.1) 176 | - React-jsi (= 0.70.1) 177 | - React-jsiexecutor (= 0.70.1) 178 | - React-perflogger (= 0.70.1) 179 | - Yoga 180 | - React-Core/RCTAnimationHeaders (0.70.1): 181 | - glog 182 | - RCT-Folly (= 2021.07.22.00) 183 | - React-Core/Default 184 | - React-cxxreact (= 0.70.1) 185 | - React-jsi (= 0.70.1) 186 | - React-jsiexecutor (= 0.70.1) 187 | - React-perflogger (= 0.70.1) 188 | - Yoga 189 | - React-Core/RCTBlobHeaders (0.70.1): 190 | - glog 191 | - RCT-Folly (= 2021.07.22.00) 192 | - React-Core/Default 193 | - React-cxxreact (= 0.70.1) 194 | - React-jsi (= 0.70.1) 195 | - React-jsiexecutor (= 0.70.1) 196 | - React-perflogger (= 0.70.1) 197 | - Yoga 198 | - React-Core/RCTImageHeaders (0.70.1): 199 | - glog 200 | - RCT-Folly (= 2021.07.22.00) 201 | - React-Core/Default 202 | - React-cxxreact (= 0.70.1) 203 | - React-jsi (= 0.70.1) 204 | - React-jsiexecutor (= 0.70.1) 205 | - React-perflogger (= 0.70.1) 206 | - Yoga 207 | - React-Core/RCTLinkingHeaders (0.70.1): 208 | - glog 209 | - RCT-Folly (= 2021.07.22.00) 210 | - React-Core/Default 211 | - React-cxxreact (= 0.70.1) 212 | - React-jsi (= 0.70.1) 213 | - React-jsiexecutor (= 0.70.1) 214 | - React-perflogger (= 0.70.1) 215 | - Yoga 216 | - React-Core/RCTNetworkHeaders (0.70.1): 217 | - glog 218 | - RCT-Folly (= 2021.07.22.00) 219 | - React-Core/Default 220 | - React-cxxreact (= 0.70.1) 221 | - React-jsi (= 0.70.1) 222 | - React-jsiexecutor (= 0.70.1) 223 | - React-perflogger (= 0.70.1) 224 | - Yoga 225 | - React-Core/RCTSettingsHeaders (0.70.1): 226 | - glog 227 | - RCT-Folly (= 2021.07.22.00) 228 | - React-Core/Default 229 | - React-cxxreact (= 0.70.1) 230 | - React-jsi (= 0.70.1) 231 | - React-jsiexecutor (= 0.70.1) 232 | - React-perflogger (= 0.70.1) 233 | - Yoga 234 | - React-Core/RCTTextHeaders (0.70.1): 235 | - glog 236 | - RCT-Folly (= 2021.07.22.00) 237 | - React-Core/Default 238 | - React-cxxreact (= 0.70.1) 239 | - React-jsi (= 0.70.1) 240 | - React-jsiexecutor (= 0.70.1) 241 | - React-perflogger (= 0.70.1) 242 | - Yoga 243 | - React-Core/RCTVibrationHeaders (0.70.1): 244 | - glog 245 | - RCT-Folly (= 2021.07.22.00) 246 | - React-Core/Default 247 | - React-cxxreact (= 0.70.1) 248 | - React-jsi (= 0.70.1) 249 | - React-jsiexecutor (= 0.70.1) 250 | - React-perflogger (= 0.70.1) 251 | - Yoga 252 | - React-Core/RCTWebSocket (0.70.1): 253 | - glog 254 | - RCT-Folly (= 2021.07.22.00) 255 | - React-Core/Default (= 0.70.1) 256 | - React-cxxreact (= 0.70.1) 257 | - React-jsi (= 0.70.1) 258 | - React-jsiexecutor (= 0.70.1) 259 | - React-perflogger (= 0.70.1) 260 | - Yoga 261 | - React-CoreModules (0.70.1): 262 | - RCT-Folly (= 2021.07.22.00) 263 | - RCTTypeSafety (= 0.70.1) 264 | - React-Codegen (= 0.70.1) 265 | - React-Core/CoreModulesHeaders (= 0.70.1) 266 | - React-jsi (= 0.70.1) 267 | - React-RCTImage (= 0.70.1) 268 | - ReactCommon/turbomodule/core (= 0.70.1) 269 | - React-cxxreact (0.70.1): 270 | - boost (= 1.76.0) 271 | - DoubleConversion 272 | - glog 273 | - RCT-Folly (= 2021.07.22.00) 274 | - React-callinvoker (= 0.70.1) 275 | - React-jsi (= 0.70.1) 276 | - React-jsinspector (= 0.70.1) 277 | - React-logger (= 0.70.1) 278 | - React-perflogger (= 0.70.1) 279 | - React-runtimeexecutor (= 0.70.1) 280 | - React-Fabric (0.70.1): 281 | - RCT-Folly/Fabric (= 2021.07.22.00) 282 | - RCTRequired (= 0.70.1) 283 | - RCTTypeSafety (= 0.70.1) 284 | - React-Fabric/animations (= 0.70.1) 285 | - React-Fabric/attributedstring (= 0.70.1) 286 | - React-Fabric/butter (= 0.70.1) 287 | - React-Fabric/componentregistry (= 0.70.1) 288 | - React-Fabric/componentregistrynative (= 0.70.1) 289 | - React-Fabric/components (= 0.70.1) 290 | - React-Fabric/config (= 0.70.1) 291 | - React-Fabric/core (= 0.70.1) 292 | - React-Fabric/debug_core (= 0.70.1) 293 | - React-Fabric/debug_renderer (= 0.70.1) 294 | - React-Fabric/imagemanager (= 0.70.1) 295 | - React-Fabric/leakchecker (= 0.70.1) 296 | - React-Fabric/mounting (= 0.70.1) 297 | - React-Fabric/runtimescheduler (= 0.70.1) 298 | - React-Fabric/scheduler (= 0.70.1) 299 | - React-Fabric/telemetry (= 0.70.1) 300 | - React-Fabric/templateprocessor (= 0.70.1) 301 | - React-Fabric/textlayoutmanager (= 0.70.1) 302 | - React-Fabric/uimanager (= 0.70.1) 303 | - React-Fabric/utils (= 0.70.1) 304 | - React-graphics (= 0.70.1) 305 | - React-jsi (= 0.70.1) 306 | - React-jsiexecutor (= 0.70.1) 307 | - ReactCommon/turbomodule/core (= 0.70.1) 308 | - React-Fabric/animations (0.70.1): 309 | - RCT-Folly/Fabric (= 2021.07.22.00) 310 | - RCTRequired (= 0.70.1) 311 | - RCTTypeSafety (= 0.70.1) 312 | - React-graphics (= 0.70.1) 313 | - React-jsi (= 0.70.1) 314 | - React-jsiexecutor (= 0.70.1) 315 | - ReactCommon/turbomodule/core (= 0.70.1) 316 | - React-Fabric/attributedstring (0.70.1): 317 | - RCT-Folly/Fabric (= 2021.07.22.00) 318 | - RCTRequired (= 0.70.1) 319 | - RCTTypeSafety (= 0.70.1) 320 | - React-graphics (= 0.70.1) 321 | - React-jsi (= 0.70.1) 322 | - React-jsiexecutor (= 0.70.1) 323 | - ReactCommon/turbomodule/core (= 0.70.1) 324 | - React-Fabric/butter (0.70.1): 325 | - RCT-Folly/Fabric (= 2021.07.22.00) 326 | - RCTRequired (= 0.70.1) 327 | - RCTTypeSafety (= 0.70.1) 328 | - React-graphics (= 0.70.1) 329 | - React-jsi (= 0.70.1) 330 | - React-jsiexecutor (= 0.70.1) 331 | - ReactCommon/turbomodule/core (= 0.70.1) 332 | - React-Fabric/componentregistry (0.70.1): 333 | - RCT-Folly/Fabric (= 2021.07.22.00) 334 | - RCTRequired (= 0.70.1) 335 | - RCTTypeSafety (= 0.70.1) 336 | - React-graphics (= 0.70.1) 337 | - React-jsi (= 0.70.1) 338 | - React-jsiexecutor (= 0.70.1) 339 | - ReactCommon/turbomodule/core (= 0.70.1) 340 | - React-Fabric/componentregistrynative (0.70.1): 341 | - RCT-Folly/Fabric (= 2021.07.22.00) 342 | - RCTRequired (= 0.70.1) 343 | - RCTTypeSafety (= 0.70.1) 344 | - React-graphics (= 0.70.1) 345 | - React-jsi (= 0.70.1) 346 | - React-jsiexecutor (= 0.70.1) 347 | - ReactCommon/turbomodule/core (= 0.70.1) 348 | - React-Fabric/components (0.70.1): 349 | - RCT-Folly/Fabric (= 2021.07.22.00) 350 | - RCTRequired (= 0.70.1) 351 | - RCTTypeSafety (= 0.70.1) 352 | - React-Fabric/components/activityindicator (= 0.70.1) 353 | - React-Fabric/components/image (= 0.70.1) 354 | - React-Fabric/components/inputaccessory (= 0.70.1) 355 | - React-Fabric/components/legacyviewmanagerinterop (= 0.70.1) 356 | - React-Fabric/components/modal (= 0.70.1) 357 | - React-Fabric/components/root (= 0.70.1) 358 | - React-Fabric/components/safeareaview (= 0.70.1) 359 | - React-Fabric/components/scrollview (= 0.70.1) 360 | - React-Fabric/components/slider (= 0.70.1) 361 | - React-Fabric/components/text (= 0.70.1) 362 | - React-Fabric/components/textinput (= 0.70.1) 363 | - React-Fabric/components/unimplementedview (= 0.70.1) 364 | - React-Fabric/components/view (= 0.70.1) 365 | - React-graphics (= 0.70.1) 366 | - React-jsi (= 0.70.1) 367 | - React-jsiexecutor (= 0.70.1) 368 | - ReactCommon/turbomodule/core (= 0.70.1) 369 | - React-Fabric/components/activityindicator (0.70.1): 370 | - RCT-Folly/Fabric (= 2021.07.22.00) 371 | - RCTRequired (= 0.70.1) 372 | - RCTTypeSafety (= 0.70.1) 373 | - React-graphics (= 0.70.1) 374 | - React-jsi (= 0.70.1) 375 | - React-jsiexecutor (= 0.70.1) 376 | - ReactCommon/turbomodule/core (= 0.70.1) 377 | - React-Fabric/components/image (0.70.1): 378 | - RCT-Folly/Fabric (= 2021.07.22.00) 379 | - RCTRequired (= 0.70.1) 380 | - RCTTypeSafety (= 0.70.1) 381 | - React-graphics (= 0.70.1) 382 | - React-jsi (= 0.70.1) 383 | - React-jsiexecutor (= 0.70.1) 384 | - ReactCommon/turbomodule/core (= 0.70.1) 385 | - React-Fabric/components/inputaccessory (0.70.1): 386 | - RCT-Folly/Fabric (= 2021.07.22.00) 387 | - RCTRequired (= 0.70.1) 388 | - RCTTypeSafety (= 0.70.1) 389 | - React-graphics (= 0.70.1) 390 | - React-jsi (= 0.70.1) 391 | - React-jsiexecutor (= 0.70.1) 392 | - ReactCommon/turbomodule/core (= 0.70.1) 393 | - React-Fabric/components/legacyviewmanagerinterop (0.70.1): 394 | - RCT-Folly/Fabric (= 2021.07.22.00) 395 | - RCTRequired (= 0.70.1) 396 | - RCTTypeSafety (= 0.70.1) 397 | - React-graphics (= 0.70.1) 398 | - React-jsi (= 0.70.1) 399 | - React-jsiexecutor (= 0.70.1) 400 | - ReactCommon/turbomodule/core (= 0.70.1) 401 | - React-Fabric/components/modal (0.70.1): 402 | - RCT-Folly/Fabric (= 2021.07.22.00) 403 | - RCTRequired (= 0.70.1) 404 | - RCTTypeSafety (= 0.70.1) 405 | - React-graphics (= 0.70.1) 406 | - React-jsi (= 0.70.1) 407 | - React-jsiexecutor (= 0.70.1) 408 | - ReactCommon/turbomodule/core (= 0.70.1) 409 | - React-Fabric/components/root (0.70.1): 410 | - RCT-Folly/Fabric (= 2021.07.22.00) 411 | - RCTRequired (= 0.70.1) 412 | - RCTTypeSafety (= 0.70.1) 413 | - React-graphics (= 0.70.1) 414 | - React-jsi (= 0.70.1) 415 | - React-jsiexecutor (= 0.70.1) 416 | - ReactCommon/turbomodule/core (= 0.70.1) 417 | - React-Fabric/components/safeareaview (0.70.1): 418 | - RCT-Folly/Fabric (= 2021.07.22.00) 419 | - RCTRequired (= 0.70.1) 420 | - RCTTypeSafety (= 0.70.1) 421 | - React-graphics (= 0.70.1) 422 | - React-jsi (= 0.70.1) 423 | - React-jsiexecutor (= 0.70.1) 424 | - ReactCommon/turbomodule/core (= 0.70.1) 425 | - React-Fabric/components/scrollview (0.70.1): 426 | - RCT-Folly/Fabric (= 2021.07.22.00) 427 | - RCTRequired (= 0.70.1) 428 | - RCTTypeSafety (= 0.70.1) 429 | - React-graphics (= 0.70.1) 430 | - React-jsi (= 0.70.1) 431 | - React-jsiexecutor (= 0.70.1) 432 | - ReactCommon/turbomodule/core (= 0.70.1) 433 | - React-Fabric/components/slider (0.70.1): 434 | - RCT-Folly/Fabric (= 2021.07.22.00) 435 | - RCTRequired (= 0.70.1) 436 | - RCTTypeSafety (= 0.70.1) 437 | - React-graphics (= 0.70.1) 438 | - React-jsi (= 0.70.1) 439 | - React-jsiexecutor (= 0.70.1) 440 | - ReactCommon/turbomodule/core (= 0.70.1) 441 | - React-Fabric/components/text (0.70.1): 442 | - RCT-Folly/Fabric (= 2021.07.22.00) 443 | - RCTRequired (= 0.70.1) 444 | - RCTTypeSafety (= 0.70.1) 445 | - React-graphics (= 0.70.1) 446 | - React-jsi (= 0.70.1) 447 | - React-jsiexecutor (= 0.70.1) 448 | - ReactCommon/turbomodule/core (= 0.70.1) 449 | - React-Fabric/components/textinput (0.70.1): 450 | - RCT-Folly/Fabric (= 2021.07.22.00) 451 | - RCTRequired (= 0.70.1) 452 | - RCTTypeSafety (= 0.70.1) 453 | - React-graphics (= 0.70.1) 454 | - React-jsi (= 0.70.1) 455 | - React-jsiexecutor (= 0.70.1) 456 | - ReactCommon/turbomodule/core (= 0.70.1) 457 | - React-Fabric/components/unimplementedview (0.70.1): 458 | - RCT-Folly/Fabric (= 2021.07.22.00) 459 | - RCTRequired (= 0.70.1) 460 | - RCTTypeSafety (= 0.70.1) 461 | - React-graphics (= 0.70.1) 462 | - React-jsi (= 0.70.1) 463 | - React-jsiexecutor (= 0.70.1) 464 | - ReactCommon/turbomodule/core (= 0.70.1) 465 | - React-Fabric/components/view (0.70.1): 466 | - RCT-Folly/Fabric (= 2021.07.22.00) 467 | - RCTRequired (= 0.70.1) 468 | - RCTTypeSafety (= 0.70.1) 469 | - React-graphics (= 0.70.1) 470 | - React-jsi (= 0.70.1) 471 | - React-jsiexecutor (= 0.70.1) 472 | - ReactCommon/turbomodule/core (= 0.70.1) 473 | - Yoga 474 | - React-Fabric/config (0.70.1): 475 | - RCT-Folly/Fabric (= 2021.07.22.00) 476 | - RCTRequired (= 0.70.1) 477 | - RCTTypeSafety (= 0.70.1) 478 | - React-graphics (= 0.70.1) 479 | - React-jsi (= 0.70.1) 480 | - React-jsiexecutor (= 0.70.1) 481 | - ReactCommon/turbomodule/core (= 0.70.1) 482 | - React-Fabric/core (0.70.1): 483 | - RCT-Folly/Fabric (= 2021.07.22.00) 484 | - RCTRequired (= 0.70.1) 485 | - RCTTypeSafety (= 0.70.1) 486 | - React-graphics (= 0.70.1) 487 | - React-jsi (= 0.70.1) 488 | - React-jsiexecutor (= 0.70.1) 489 | - ReactCommon/turbomodule/core (= 0.70.1) 490 | - React-Fabric/debug_core (0.70.1): 491 | - RCT-Folly/Fabric (= 2021.07.22.00) 492 | - RCTRequired (= 0.70.1) 493 | - RCTTypeSafety (= 0.70.1) 494 | - React-graphics (= 0.70.1) 495 | - React-jsi (= 0.70.1) 496 | - React-jsiexecutor (= 0.70.1) 497 | - ReactCommon/turbomodule/core (= 0.70.1) 498 | - React-Fabric/debug_renderer (0.70.1): 499 | - RCT-Folly/Fabric (= 2021.07.22.00) 500 | - RCTRequired (= 0.70.1) 501 | - RCTTypeSafety (= 0.70.1) 502 | - React-graphics (= 0.70.1) 503 | - React-jsi (= 0.70.1) 504 | - React-jsiexecutor (= 0.70.1) 505 | - ReactCommon/turbomodule/core (= 0.70.1) 506 | - React-Fabric/imagemanager (0.70.1): 507 | - RCT-Folly/Fabric (= 2021.07.22.00) 508 | - RCTRequired (= 0.70.1) 509 | - RCTTypeSafety (= 0.70.1) 510 | - React-graphics (= 0.70.1) 511 | - React-jsi (= 0.70.1) 512 | - React-jsiexecutor (= 0.70.1) 513 | - React-RCTImage (= 0.70.1) 514 | - ReactCommon/turbomodule/core (= 0.70.1) 515 | - React-Fabric/leakchecker (0.70.1): 516 | - RCT-Folly/Fabric (= 2021.07.22.00) 517 | - RCTRequired (= 0.70.1) 518 | - RCTTypeSafety (= 0.70.1) 519 | - React-graphics (= 0.70.1) 520 | - React-jsi (= 0.70.1) 521 | - React-jsiexecutor (= 0.70.1) 522 | - ReactCommon/turbomodule/core (= 0.70.1) 523 | - React-Fabric/mounting (0.70.1): 524 | - RCT-Folly/Fabric (= 2021.07.22.00) 525 | - RCTRequired (= 0.70.1) 526 | - RCTTypeSafety (= 0.70.1) 527 | - React-graphics (= 0.70.1) 528 | - React-jsi (= 0.70.1) 529 | - React-jsiexecutor (= 0.70.1) 530 | - ReactCommon/turbomodule/core (= 0.70.1) 531 | - React-Fabric/runtimescheduler (0.70.1): 532 | - RCT-Folly/Fabric (= 2021.07.22.00) 533 | - RCTRequired (= 0.70.1) 534 | - RCTTypeSafety (= 0.70.1) 535 | - React-graphics (= 0.70.1) 536 | - React-jsi (= 0.70.1) 537 | - React-jsiexecutor (= 0.70.1) 538 | - ReactCommon/turbomodule/core (= 0.70.1) 539 | - React-Fabric/scheduler (0.70.1): 540 | - RCT-Folly/Fabric (= 2021.07.22.00) 541 | - RCTRequired (= 0.70.1) 542 | - RCTTypeSafety (= 0.70.1) 543 | - React-graphics (= 0.70.1) 544 | - React-jsi (= 0.70.1) 545 | - React-jsiexecutor (= 0.70.1) 546 | - ReactCommon/turbomodule/core (= 0.70.1) 547 | - React-Fabric/telemetry (0.70.1): 548 | - RCT-Folly/Fabric (= 2021.07.22.00) 549 | - RCTRequired (= 0.70.1) 550 | - RCTTypeSafety (= 0.70.1) 551 | - React-graphics (= 0.70.1) 552 | - React-jsi (= 0.70.1) 553 | - React-jsiexecutor (= 0.70.1) 554 | - ReactCommon/turbomodule/core (= 0.70.1) 555 | - React-Fabric/templateprocessor (0.70.1): 556 | - RCT-Folly/Fabric (= 2021.07.22.00) 557 | - RCTRequired (= 0.70.1) 558 | - RCTTypeSafety (= 0.70.1) 559 | - React-graphics (= 0.70.1) 560 | - React-jsi (= 0.70.1) 561 | - React-jsiexecutor (= 0.70.1) 562 | - ReactCommon/turbomodule/core (= 0.70.1) 563 | - React-Fabric/textlayoutmanager (0.70.1): 564 | - RCT-Folly/Fabric (= 2021.07.22.00) 565 | - RCTRequired (= 0.70.1) 566 | - RCTTypeSafety (= 0.70.1) 567 | - React-Fabric/uimanager 568 | - React-graphics (= 0.70.1) 569 | - React-jsi (= 0.70.1) 570 | - React-jsiexecutor (= 0.70.1) 571 | - ReactCommon/turbomodule/core (= 0.70.1) 572 | - React-Fabric/uimanager (0.70.1): 573 | - RCT-Folly/Fabric (= 2021.07.22.00) 574 | - RCTRequired (= 0.70.1) 575 | - RCTTypeSafety (= 0.70.1) 576 | - React-graphics (= 0.70.1) 577 | - React-jsi (= 0.70.1) 578 | - React-jsiexecutor (= 0.70.1) 579 | - ReactCommon/turbomodule/core (= 0.70.1) 580 | - React-Fabric/utils (0.70.1): 581 | - RCT-Folly/Fabric (= 2021.07.22.00) 582 | - RCTRequired (= 0.70.1) 583 | - RCTTypeSafety (= 0.70.1) 584 | - React-graphics (= 0.70.1) 585 | - React-jsi (= 0.70.1) 586 | - React-jsiexecutor (= 0.70.1) 587 | - ReactCommon/turbomodule/core (= 0.70.1) 588 | - React-graphics (0.70.1): 589 | - RCT-Folly/Fabric (= 2021.07.22.00) 590 | - React-Core/Default (= 0.70.1) 591 | - React-hermes (0.70.1): 592 | - DoubleConversion 593 | - glog 594 | - hermes-engine 595 | - RCT-Folly (= 2021.07.22.00) 596 | - RCT-Folly/Futures (= 2021.07.22.00) 597 | - React-cxxreact (= 0.70.1) 598 | - React-jsi (= 0.70.1) 599 | - React-jsiexecutor (= 0.70.1) 600 | - React-jsinspector (= 0.70.1) 601 | - React-perflogger (= 0.70.1) 602 | - React-jsi (0.70.1): 603 | - boost (= 1.76.0) 604 | - DoubleConversion 605 | - glog 606 | - RCT-Folly (= 2021.07.22.00) 607 | - React-jsi/Default (= 0.70.1) 608 | - React-jsi/Default (0.70.1): 609 | - boost (= 1.76.0) 610 | - DoubleConversion 611 | - glog 612 | - RCT-Folly (= 2021.07.22.00) 613 | - React-jsi/Fabric (0.70.1): 614 | - boost (= 1.76.0) 615 | - DoubleConversion 616 | - glog 617 | - RCT-Folly (= 2021.07.22.00) 618 | - React-jsiexecutor (0.70.1): 619 | - DoubleConversion 620 | - glog 621 | - RCT-Folly (= 2021.07.22.00) 622 | - React-cxxreact (= 0.70.1) 623 | - React-jsi (= 0.70.1) 624 | - React-perflogger (= 0.70.1) 625 | - React-jsinspector (0.70.1) 626 | - React-logger (0.70.1): 627 | - glog 628 | - react-native-blur (4.3.2): 629 | - RCT-Folly 630 | - RCTRequired 631 | - RCTTypeSafety 632 | - React-Codegen 633 | - React-RCTFabric 634 | - ReactCommon/turbomodule/core 635 | - react-native-segmented-control (2.2.2): 636 | - React-Core 637 | - React-perflogger (0.70.1) 638 | - React-RCTActionSheet (0.70.1): 639 | - React-Core/RCTActionSheetHeaders (= 0.70.1) 640 | - React-RCTAnimation (0.70.1): 641 | - RCT-Folly (= 2021.07.22.00) 642 | - RCTTypeSafety (= 0.70.1) 643 | - React-Codegen (= 0.70.1) 644 | - React-Core/RCTAnimationHeaders (= 0.70.1) 645 | - React-jsi (= 0.70.1) 646 | - ReactCommon/turbomodule/core (= 0.70.1) 647 | - React-RCTBlob (0.70.1): 648 | - RCT-Folly (= 2021.07.22.00) 649 | - React-Codegen (= 0.70.1) 650 | - React-Core/RCTBlobHeaders (= 0.70.1) 651 | - React-Core/RCTWebSocket (= 0.70.1) 652 | - React-jsi (= 0.70.1) 653 | - React-RCTNetwork (= 0.70.1) 654 | - ReactCommon/turbomodule/core (= 0.70.1) 655 | - React-RCTFabric (0.70.1): 656 | - RCT-Folly/Fabric (= 2021.07.22.00) 657 | - React-Core (= 0.70.1) 658 | - React-Fabric (= 0.70.1) 659 | - React-RCTImage (= 0.70.1) 660 | - React-RCTImage (0.70.1): 661 | - RCT-Folly (= 2021.07.22.00) 662 | - RCTTypeSafety (= 0.70.1) 663 | - React-Codegen (= 0.70.1) 664 | - React-Core/RCTImageHeaders (= 0.70.1) 665 | - React-jsi (= 0.70.1) 666 | - React-RCTNetwork (= 0.70.1) 667 | - ReactCommon/turbomodule/core (= 0.70.1) 668 | - React-RCTLinking (0.70.1): 669 | - React-Codegen (= 0.70.1) 670 | - React-Core/RCTLinkingHeaders (= 0.70.1) 671 | - React-jsi (= 0.70.1) 672 | - ReactCommon/turbomodule/core (= 0.70.1) 673 | - React-RCTNetwork (0.70.1): 674 | - RCT-Folly (= 2021.07.22.00) 675 | - RCTTypeSafety (= 0.70.1) 676 | - React-Codegen (= 0.70.1) 677 | - React-Core/RCTNetworkHeaders (= 0.70.1) 678 | - React-jsi (= 0.70.1) 679 | - ReactCommon/turbomodule/core (= 0.70.1) 680 | - React-RCTSettings (0.70.1): 681 | - RCT-Folly (= 2021.07.22.00) 682 | - RCTTypeSafety (= 0.70.1) 683 | - React-Codegen (= 0.70.1) 684 | - React-Core/RCTSettingsHeaders (= 0.70.1) 685 | - React-jsi (= 0.70.1) 686 | - ReactCommon/turbomodule/core (= 0.70.1) 687 | - React-RCTText (0.70.1): 688 | - React-Core/RCTTextHeaders (= 0.70.1) 689 | - React-RCTVibration (0.70.1): 690 | - RCT-Folly (= 2021.07.22.00) 691 | - React-Codegen (= 0.70.1) 692 | - React-Core/RCTVibrationHeaders (= 0.70.1) 693 | - React-jsi (= 0.70.1) 694 | - ReactCommon/turbomodule/core (= 0.70.1) 695 | - React-rncore (0.70.1) 696 | - React-runtimeexecutor (0.70.1): 697 | - React-jsi (= 0.70.1) 698 | - ReactCommon/turbomodule/core (0.70.1): 699 | - DoubleConversion 700 | - glog 701 | - RCT-Folly (= 2021.07.22.00) 702 | - React-bridging (= 0.70.1) 703 | - React-callinvoker (= 0.70.1) 704 | - React-Core (= 0.70.1) 705 | - React-cxxreact (= 0.70.1) 706 | - React-jsi (= 0.70.1) 707 | - React-logger (= 0.70.1) 708 | - React-perflogger (= 0.70.1) 709 | - ReactTestApp-DevSupport (1.6.16): 710 | - React-Core 711 | - React-jsi 712 | - ReactTestApp-Resources (1.0.0-dev) 713 | - SocketRocket (0.6.0) 714 | - Yoga (1.14.0) 715 | - YogaKit (1.18.1): 716 | - Yoga (~> 1.14) 717 | 718 | DEPENDENCIES: 719 | - boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`) 720 | - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`) 721 | - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`) 722 | - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`) 723 | - Flipper (= 0.125.0) 724 | - Flipper-Boost-iOSX (= 1.76.0.1.11) 725 | - Flipper-DoubleConversion (= 3.2.0.1) 726 | - Flipper-Fmt (= 7.1.7) 727 | - Flipper-Folly (= 2.6.10) 728 | - Flipper-Glog (= 0.5.0.5) 729 | - Flipper-PeerTalk (= 0.0.4) 730 | - Flipper-RSocket (= 1.4.3) 731 | - FlipperKit (= 0.125.0) 732 | - FlipperKit/Core (= 0.125.0) 733 | - FlipperKit/CppBridge (= 0.125.0) 734 | - FlipperKit/FBCxxFollyDynamicConvert (= 0.125.0) 735 | - FlipperKit/FBDefines (= 0.125.0) 736 | - FlipperKit/FKPortForwarding (= 0.125.0) 737 | - FlipperKit/FlipperKitHighlightOverlay (= 0.125.0) 738 | - FlipperKit/FlipperKitLayoutPlugin (= 0.125.0) 739 | - FlipperKit/FlipperKitLayoutTextSearchable (= 0.125.0) 740 | - FlipperKit/FlipperKitNetworkPlugin (= 0.125.0) 741 | - FlipperKit/FlipperKitReactPlugin (= 0.125.0) 742 | - FlipperKit/FlipperKitUserDefaultsPlugin (= 0.125.0) 743 | - FlipperKit/SKIOSNetworkPlugin (= 0.125.0) 744 | - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`) 745 | - hermes-engine (from `../node_modules/react-native/sdks/hermes/hermes-engine.podspec`) 746 | - libevent (~> 2.1.12) 747 | - OpenSSL-Universal (= 1.1.1100) 748 | - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`) 749 | - RCT-Folly/Fabric (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`) 750 | - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`) 751 | - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`) 752 | - React (from `../node_modules/react-native/`) 753 | - React-bridging (from `../node_modules/react-native/ReactCommon`) 754 | - React-callinvoker (from `../node_modules/react-native/ReactCommon/callinvoker`) 755 | - React-Codegen (from `build/generated/ios`) 756 | - React-Core (from `../node_modules/react-native/`) 757 | - React-Core/DevSupport (from `../node_modules/react-native/`) 758 | - React-Core/RCTWebSocket (from `../node_modules/react-native/`) 759 | - React-CoreModules (from `../node_modules/react-native/React/CoreModules`) 760 | - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`) 761 | - React-Fabric (from `../node_modules/react-native/ReactCommon`) 762 | - React-graphics (from `../node_modules/react-native/ReactCommon/react/renderer/graphics`) 763 | - React-hermes (from `../node_modules/react-native/ReactCommon/hermes`) 764 | - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`) 765 | - React-jsi/Fabric (from `../node_modules/react-native/ReactCommon/jsi`) 766 | - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) 767 | - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) 768 | - React-logger (from `../node_modules/react-native/ReactCommon/logger`) 769 | - react-native-blur (from `../..`) 770 | - "react-native-segmented-control (from `../node_modules/@react-native-community/segmented-control`)" 771 | - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`) 772 | - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) 773 | - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) 774 | - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) 775 | - React-RCTFabric (from `../node_modules/react-native/React`) 776 | - React-RCTImage (from `../node_modules/react-native/Libraries/Image`) 777 | - React-RCTLinking (from `../node_modules/react-native/Libraries/LinkingIOS`) 778 | - React-RCTNetwork (from `../node_modules/react-native/Libraries/Network`) 779 | - React-RCTSettings (from `../node_modules/react-native/Libraries/Settings`) 780 | - React-RCTText (from `../node_modules/react-native/Libraries/Text`) 781 | - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) 782 | - React-rncore (from `../node_modules/react-native/ReactCommon`) 783 | - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`) 784 | - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) 785 | - ReactTestApp-DevSupport (from `../node_modules/react-native-test-app`) 786 | - ReactTestApp-Resources (from `..`) 787 | - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) 788 | 789 | SPEC REPOS: 790 | trunk: 791 | - CocoaAsyncSocket 792 | - Flipper 793 | - Flipper-Boost-iOSX 794 | - Flipper-DoubleConversion 795 | - Flipper-Fmt 796 | - Flipper-Folly 797 | - Flipper-Glog 798 | - Flipper-PeerTalk 799 | - Flipper-RSocket 800 | - FlipperKit 801 | - fmt 802 | - libevent 803 | - OpenSSL-Universal 804 | - SocketRocket 805 | - YogaKit 806 | 807 | EXTERNAL SOURCES: 808 | boost: 809 | :podspec: "../node_modules/react-native/third-party-podspecs/boost.podspec" 810 | DoubleConversion: 811 | :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec" 812 | FBLazyVector: 813 | :path: "../node_modules/react-native/Libraries/FBLazyVector" 814 | FBReactNativeSpec: 815 | :path: "../node_modules/react-native/React/FBReactNativeSpec" 816 | glog: 817 | :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec" 818 | hermes-engine: 819 | :podspec: "../node_modules/react-native/sdks/hermes/hermes-engine.podspec" 820 | RCT-Folly: 821 | :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec" 822 | RCTRequired: 823 | :path: "../node_modules/react-native/Libraries/RCTRequired" 824 | RCTTypeSafety: 825 | :path: "../node_modules/react-native/Libraries/TypeSafety" 826 | React: 827 | :path: "../node_modules/react-native/" 828 | React-bridging: 829 | :path: "../node_modules/react-native/ReactCommon" 830 | React-callinvoker: 831 | :path: "../node_modules/react-native/ReactCommon/callinvoker" 832 | React-Codegen: 833 | :path: build/generated/ios 834 | React-Core: 835 | :path: "../node_modules/react-native/" 836 | React-CoreModules: 837 | :path: "../node_modules/react-native/React/CoreModules" 838 | React-cxxreact: 839 | :path: "../node_modules/react-native/ReactCommon/cxxreact" 840 | React-Fabric: 841 | :path: "../node_modules/react-native/ReactCommon" 842 | React-graphics: 843 | :path: "../node_modules/react-native/ReactCommon/react/renderer/graphics" 844 | React-hermes: 845 | :path: "../node_modules/react-native/ReactCommon/hermes" 846 | React-jsi: 847 | :path: "../node_modules/react-native/ReactCommon/jsi" 848 | React-jsiexecutor: 849 | :path: "../node_modules/react-native/ReactCommon/jsiexecutor" 850 | React-jsinspector: 851 | :path: "../node_modules/react-native/ReactCommon/jsinspector" 852 | React-logger: 853 | :path: "../node_modules/react-native/ReactCommon/logger" 854 | react-native-blur: 855 | :path: "../.." 856 | react-native-segmented-control: 857 | :path: "../node_modules/@react-native-community/segmented-control" 858 | React-perflogger: 859 | :path: "../node_modules/react-native/ReactCommon/reactperflogger" 860 | React-RCTActionSheet: 861 | :path: "../node_modules/react-native/Libraries/ActionSheetIOS" 862 | React-RCTAnimation: 863 | :path: "../node_modules/react-native/Libraries/NativeAnimation" 864 | React-RCTBlob: 865 | :path: "../node_modules/react-native/Libraries/Blob" 866 | React-RCTFabric: 867 | :path: "../node_modules/react-native/React" 868 | React-RCTImage: 869 | :path: "../node_modules/react-native/Libraries/Image" 870 | React-RCTLinking: 871 | :path: "../node_modules/react-native/Libraries/LinkingIOS" 872 | React-RCTNetwork: 873 | :path: "../node_modules/react-native/Libraries/Network" 874 | React-RCTSettings: 875 | :path: "../node_modules/react-native/Libraries/Settings" 876 | React-RCTText: 877 | :path: "../node_modules/react-native/Libraries/Text" 878 | React-RCTVibration: 879 | :path: "../node_modules/react-native/Libraries/Vibration" 880 | React-rncore: 881 | :path: "../node_modules/react-native/ReactCommon" 882 | React-runtimeexecutor: 883 | :path: "../node_modules/react-native/ReactCommon/runtimeexecutor" 884 | ReactCommon: 885 | :path: "../node_modules/react-native/ReactCommon" 886 | ReactTestApp-DevSupport: 887 | :path: "../node_modules/react-native-test-app" 888 | ReactTestApp-Resources: 889 | :path: ".." 890 | Yoga: 891 | :path: "../node_modules/react-native/ReactCommon/yoga" 892 | 893 | SPEC CHECKSUMS: 894 | boost: a7c83b31436843459a1961bfd74b96033dc77234 895 | CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 896 | DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54 897 | FBLazyVector: d3cdc05875c89782840d2f38e1d6174fab24e4d2 898 | FBReactNativeSpec: ff899785a731ba3b45fe35b8d2c97bfb7042be63 899 | Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0 900 | Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c 901 | Flipper-DoubleConversion: 2dc99b02f658daf147069aad9dbd29d8feb06d30 902 | Flipper-Fmt: 60cbdd92fc254826e61d669a5d87ef7015396a9b 903 | Flipper-Folly: 584845625005ff068a6ebf41f857f468decd26b3 904 | Flipper-Glog: 70c50ce58ddaf67dc35180db05f191692570f446 905 | Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9 906 | Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541 907 | FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86 908 | fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 909 | glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b 910 | hermes-engine: 9cd393f741bfa14d1d0cd90cc373e3619c0bc7ea 911 | libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 912 | OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c 913 | RCT-Folly: 0080d0a6ebf2577475bda044aa59e2ca1f909cda 914 | RCTRequired: 1b4e0388c8ad776b2d23f8135926fa4e7ddacdf4 915 | RCTTypeSafety: 23dc09d6e9ed210fabab031a568bb0194d492385 916 | React: 8ca78b2619353c251478892f087d007365af8170 917 | React-bridging: e98ade701d1e8e8e764a5e7a66f1725135a0a8ce 918 | React-callinvoker: d32c4a1e448799506e9c45ef25ae8ff3c5f77246 919 | React-Codegen: dd44244a30b709993679a45ae140095fbfd8391c 920 | React-Core: 59487b5839f3ff353bbc847df22fc7f8a42ff421 921 | React-CoreModules: 62df56334be6c6ef93e1b637284abb782a731318 922 | React-cxxreact: 5a641acd449213f420ec01f0c912c8433a91c4ba 923 | React-Fabric: c72023a12b8158da92331c8f5e84d01121ddf708 924 | React-graphics: 980ce065e7481f340c370fa3a62ddd5d1c34f75c 925 | React-hermes: 909477fce9db1d83e854489d5f3c360dd40cf8b9 926 | React-jsi: 28343c93479aa1380251c450a76a9d6eabacf3cd 927 | React-jsiexecutor: 47201924064085223b63ec7e3ee9fd40ad8508e8 928 | React-jsinspector: 1363be638eccfe1aea1b10dd42e632b0397e5ec8 929 | React-logger: 7bd569e3857d74ed412ce0a5c51f421ff7d4ca7f 930 | react-native-blur: 0f3bad33d17deaee5c68b09a5c3d37abb737f926 931 | react-native-segmented-control: 65df6cd0619b780b3843d574a72d4c7cec396097 932 | React-perflogger: 48c6b363e867d64b682e84f80ca45636bd65e19c 933 | React-RCTActionSheet: 33c74fe5c754835e3715c300618da9aa2f7203fa 934 | React-RCTAnimation: 2dbf0120d4d1ab7716079b4180f2ca89c465e46b 935 | React-RCTBlob: ccf17363f809c5030746fdb56641527e6bf9adb7 936 | React-RCTFabric: 1c4e2356bf00fa7cdbb8e70beaf9f8da83b26009 937 | React-RCTImage: 88a61b23cd5a6feb8d4436f1e306d9f2ecee3462 938 | React-RCTLinking: c63a07ce60a6cb7642acebc80a447fb3f1872eba 939 | React-RCTNetwork: f79b6e7c64e7317d34dec7dcfabd1279a6c1d2e7 940 | React-RCTSettings: 1ff0f34d41646c7942adea36ab5706320e693756 941 | React-RCTText: 7cb05abb91cae0ab7841d551e811ccefa3714dbd 942 | React-RCTVibration: e9164827303fb6a5cf79e4c4af4846a09956b11f 943 | React-rncore: 6b6fb37401595add7a8aaec4d1e7b5455673caf6 944 | React-runtimeexecutor: a11d0c2e14140baf1e449264ca9168ae9ae6bbd0 945 | ReactCommon: 7f86326b92009925c6dcf93f8e825060171c379f 946 | ReactTestApp-DevSupport: e90b51adb8ebbde327af9f44c775f712d25022e7 947 | ReactTestApp-Resources: ff5f151e465e890010b417ce65ca6c5de6aeccbb 948 | SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608 949 | Yoga: 6c8252e38d65aa387daee699eacf027e055e0b31 950 | YogaKit: f782866e155069a2cca2517aafea43200b01fd5a 951 | 952 | PODFILE CHECKSUM: d8804e7b87afaf511197f6c873091d2bdfe790f5 953 | 954 | COCOAPODS: 1.14.2 955 | -------------------------------------------------------------------------------- /example/metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | const path = require("path"); 9 | 10 | const exclusionList = (() => { 11 | try { 12 | return require("metro-config/src/defaults/exclusionList"); 13 | } catch (_) { 14 | // `blacklist` was renamed to `exclusionList` in 0.60 15 | return require("metro-config/src/defaults/blacklist"); 16 | } 17 | })(); 18 | 19 | const blockList = exclusionList([ 20 | /node_modules\/.*\/node_modules\/react-native\/.*/, 21 | 22 | // This stops "react-native run-windows" from causing the metro server to 23 | // crash if its already running 24 | new RegExp(`${path.join(__dirname, "windows").replace(/[/\\]+/g, "/")}.*`), 25 | 26 | // Workaround for `EPERM: operation not permitted, lstat '~\midl-MIDLRT-cl.read.1.tlog'` 27 | /.*\.tlog/, 28 | 29 | // Prevent Metro from watching temporary files generated by Visual Studio 30 | // otherwise it may crash when they are removed when closing a project. 31 | /.*\/.vs\/.*/, 32 | 33 | // Workaround for `EBUSY: resource busy or locked, open '~\msbuild.ProjectImports.zip'` 34 | /.*\.ProjectImports\.zip/, 35 | ]); 36 | 37 | module.exports = { 38 | resolver: { 39 | blacklistRE: blockList, 40 | blockList, 41 | }, 42 | transformer: { 43 | getTransformOptions: async () => ({ 44 | transform: { 45 | experimentalImportSupport: false, 46 | inlineRequires: false, 47 | }, 48 | }), 49 | }, 50 | }; 51 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "BlurExample", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "android": "react-native run-android", 7 | "build:android": "mkdirp dist/res && react-native bundle --entry-file index.tsx --platform android --dev true --bundle-output dist/main.android.jsbundle --assets-dest dist/res", 8 | "build:ios": "mkdirp dist && react-native bundle --entry-file index.tsx --platform ios --dev true --bundle-output dist/main.ios.jsbundle --assets-dest dist", 9 | "ios": "react-native run-ios", 10 | "lint": "eslint .", 11 | "pods": "pod-install --quiet", 12 | "start": "react-native start", 13 | "test": "jest" 14 | }, 15 | "dependencies": { 16 | "@react-native-community/segmented-control": "^2.2.2", 17 | "react": "18.1.0", 18 | "react-native": "0.70.1" 19 | }, 20 | "devDependencies": { 21 | "@babel/core": "^7.12.9", 22 | "@babel/runtime": "^7.12.5", 23 | "@react-native-community/blur": "../", 24 | "@react-native-community/eslint-config": "^2.0.0", 25 | "babel-jest": "^26.6.3", 26 | "eslint": "^7.32.0", 27 | "jest": "^26.6.3", 28 | "metro-react-native-babel-preset": "^0.72.1", 29 | "mkdirp": "^1.0.0", 30 | "react-native-test-app": "^1.6.16", 31 | "react-test-renderer": "18.1.0" 32 | }, 33 | "jest": { 34 | "preset": "react-native" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /example/react-native.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const project = (() => { 4 | try { 5 | const { 6 | androidManifestPath, 7 | iosProjectPath, 8 | } = require('react-native-test-app'); 9 | const iosProject = iosProjectPath('ios'); 10 | return { 11 | android: { 12 | sourceDir: 'android', 13 | manifestPath: androidManifestPath(path.join(__dirname, 'android')), 14 | }, 15 | 16 | ...(iosProject ? { ios: { project: iosProject } } : undefined), 17 | }; 18 | } catch (_) { 19 | return undefined; 20 | } 21 | })(); 22 | 23 | module.exports = { 24 | ...(project ? { project } : undefined), 25 | dependencies: { 26 | '@react-native-community/blur': { 27 | root: path.join(__dirname, '..'), 28 | }, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /example/src/App.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Basic [iOS] Example for react-native-blur 3 | * https://github.com/react-native-community/react-native-blur 4 | */ 5 | import React, { useState, useCallback } from 'react'; 6 | import { 7 | Image, 8 | StyleSheet, 9 | Platform, 10 | Switch, 11 | Text, 12 | View, 13 | SafeAreaView, 14 | Dimensions, 15 | } from 'react-native'; 16 | import SegmentedControl from '@react-native-community/segmented-control'; // Note: SegmentedControl does not yet support Fabric 17 | 18 | import { 19 | BlurView, 20 | VibrancyView, 21 | BlurViewProps, 22 | } from '@react-native-community/blur'; 23 | 24 | const blurTypeValues = 25 | Platform.OS === 'ios' 26 | ? ['xlight', 'light', 'dark', 'regular', 'prominent'] 27 | : ['xlight', 'light', 'dark']; 28 | 29 | const Blurs = () => { 30 | const [blurBlurType, setBlurBlurType] = 31 | useState('light'); 32 | const [blurActiveSegment, setBlurActiveSegment] = useState(1); 33 | const [vibrancyBlurType, setVibrancyBlurType] = 34 | useState('dark'); 35 | const [vibrancyActiveSegment, setVibrancyActiveSegment] = useState(2); 36 | 37 | const onBlurChange = useCallback( 38 | (e) => setBlurActiveSegment(e.nativeEvent.selectedSegmentIndex), 39 | [] 40 | ); 41 | const onBlurValueChange = useCallback((value) => setBlurBlurType(value), []); 42 | const onVibrancyChange = useCallback( 43 | (e) => setVibrancyActiveSegment(e.nativeEvent.selectedSegmentIndex), 44 | [] 45 | ); 46 | const onVibrancyValueChange = useCallback( 47 | (value) => setVibrancyBlurType(value), 48 | [] 49 | ); 50 | 51 | const tintColor = blurBlurType === 'xlight' ? 'black' : 'white'; 52 | const platform = Platform.OS === 'ios' ? 'iOS' : 'Android'; 53 | 54 | return ( 55 | 56 | 57 | {/* 58 | BlurView is supported on both iOS and Android. 59 | If you also need to support Android, the BlurView must be 60 | absolutely positioned behind your unblurred views, and it 61 | cannot contain any child views. 62 | */} 63 | 69 | 70 | Blur component ({platform}) 71 | 72 | { 76 | onBlurChange(event); 77 | }} 78 | onValueChange={(value) => { 79 | onBlurValueChange(value); 80 | }} 81 | tintColor={tintColor} 82 | /> 83 | 84 | 85 | { 86 | /* 87 | VibrancyView is only supported on iOS, and must contain child views, 88 | otherwise the vibrancy effect doesn't work. 89 | */ 90 | Platform.OS === 'ios' ? ( 91 | 97 | Vibrancy component (iOS-only) 98 | 99 | { 103 | onVibrancyChange(event); 104 | }} 105 | onValueChange={(value) => { 106 | onVibrancyValueChange(value); 107 | }} 108 | tintColor="white" 109 | /> 110 | 111 | ) : null 112 | } 113 | 114 | ); 115 | }; 116 | 117 | const Example = () => { 118 | const [showBlurs, setShowBlurs] = React.useState(true); 119 | 120 | return ( 121 | 122 | 127 | 128 | {showBlurs ? : null} 129 | 130 | 131 | setShowBlurs(value)} 133 | value={showBlurs} 134 | /> 135 | 136 | 137 | ); 138 | }; 139 | 140 | const styles = StyleSheet.create({ 141 | container: { 142 | flex: 1, 143 | backgroundColor: 'transparent', 144 | }, 145 | blurContainer: { 146 | flex: 1, 147 | backgroundColor: 'transparent', 148 | justifyContent: 'center', 149 | alignItems: 'stretch', 150 | paddingHorizontal: 20, 151 | }, 152 | blurView: { 153 | position: 'absolute', 154 | left: 0, 155 | right: 0, 156 | top: 0, 157 | bottom: 0, 158 | }, 159 | img: { 160 | position: 'absolute', 161 | left: 0, 162 | right: 0, 163 | top: 0, 164 | bottom: 0, 165 | height: Dimensions.get('window').height, 166 | width: Dimensions.get('window').width, 167 | }, 168 | text: { 169 | fontSize: 20, 170 | fontWeight: 'bold', 171 | textAlign: 'center', 172 | margin: 10, 173 | color: 'white', 174 | }, 175 | blurToggle: { 176 | position: 'absolute', 177 | top: 30, 178 | right: 10, 179 | alignItems: 'flex-end', 180 | }, 181 | }); 182 | 183 | export default Example; 184 | -------------------------------------------------------------------------------- /example/src/bgimage.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kureev/react-native-blur/7edfaa0f2ef37ae5fa4cbf378f9ca75080752a76/example/src/bgimage.jpeg -------------------------------------------------------------------------------- /ios/BlurEffectWithAmount.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | @interface BlurEffectWithAmount : UIBlurEffect 4 | @property (nonatomic, strong) NSNumber *blurAmount; 5 | 6 | + (instancetype)effectWithStyle:(UIBlurEffectStyle)style andBlurAmount:(NSNumber*)blurAmount; 7 | @end 8 | -------------------------------------------------------------------------------- /ios/BlurEffectWithAmount.m: -------------------------------------------------------------------------------- 1 | // 2 | // We subclass UIBlurEffect so that we can set the BlurAmount. 3 | // See: http://stackoverflow.com/a/30744777/304706 4 | // 5 | 6 | #import "BlurEffectWithAmount.h" 7 | #import 8 | 9 | @interface UIBlurEffect (Protected) 10 | 11 | @property (nonatomic, readonly) id effectSettings; 12 | 13 | @end 14 | 15 | @implementation BlurEffectWithAmount 16 | @dynamic blurAmount; 17 | 18 | + (instancetype)effectWithStyle:(UIBlurEffectStyle)style 19 | { 20 | id instance = [super effectWithStyle:style]; 21 | object_setClass(instance, self); 22 | return instance; 23 | } 24 | 25 | + (instancetype)effectWithStyle:(UIBlurEffectStyle)style andBlurAmount:(NSNumber*)blurAmount 26 | { 27 | BlurEffectWithAmount *effect = (BlurEffectWithAmount*)[self effectWithStyle:style]; 28 | effect.blurAmount = blurAmount; 29 | return effect; 30 | } 31 | 32 | - (void)setBlurAmount:(NSNumber*)blurAmount { 33 | objc_setAssociatedObject(self, 34 | @selector(blurAmount), 35 | blurAmount, 36 | OBJC_ASSOCIATION_RETAIN_NONATOMIC); 37 | } 38 | 39 | - (NSNumber*)blurAmount { 40 | return objc_getAssociatedObject(self, @selector(blurAmount)); 41 | } 42 | 43 | - (id)effectSettings 44 | { 45 | id settings = [super effectSettings]; 46 | NSNumber *blurAmount = self.blurAmount; 47 | if (blurAmount) { 48 | [settings setValue:blurAmount forKey:@"blurRadius"]; 49 | } 50 | return settings; 51 | } 52 | 53 | - (id)copyWithZone:(NSZone*)zone 54 | { 55 | id instance = [super copyWithZone:zone]; 56 | object_setClass(instance, [self class]); 57 | // Must also copy blur amount to new instance 58 | objc_setAssociatedObject(instance, 59 | @selector(blurAmount), 60 | self.blurAmount, 61 | OBJC_ASSOCIATION_RETAIN_NONATOMIC); 62 | return instance; 63 | } 64 | 65 | @end 66 | -------------------------------------------------------------------------------- /ios/BlurView.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import "BlurEffectWithAmount.h" 3 | 4 | #ifdef RCT_NEW_ARCH_ENABLED 5 | #import 6 | #endif // RCT_NEW_ARCH_ENABLED 7 | 8 | @interface BlurView : 9 | #ifdef RCT_NEW_ARCH_ENABLED 10 | RCTViewComponentView 11 | #else 12 | UIView 13 | #endif // RCT_NEW_ARCH_ENABLED 14 | 15 | @property (nonatomic, copy, nullable) NSString *blurType; 16 | @property (nonatomic, copy, nullable) NSNumber *blurAmount; 17 | @property (nonatomic, copy, nullable) UIColor *reducedTransparencyFallbackColor; 18 | 19 | @property (nonatomic, strong, nullable) BlurEffectWithAmount *blurEffect; 20 | @property (nonatomic, strong, nullable) UIVisualEffectView *blurEffectView; 21 | @property (nonatomic, strong, nullable) UIView *reducedTransparencyFallbackView; 22 | 23 | - (void)updateBlurEffect; 24 | - (void)updateFallbackView; 25 | - (BOOL)useReduceTransparencyFallback; 26 | @end 27 | -------------------------------------------------------------------------------- /ios/BlurView.mm: -------------------------------------------------------------------------------- 1 | #import "BlurView.h" 2 | #import "BlurEffectWithAmount.h" 3 | 4 | #ifdef RCT_NEW_ARCH_ENABLED 5 | #import 6 | #import 7 | #import 8 | #import 9 | #import 10 | #endif // RCT_NEW_ARCH_ENABLED 11 | 12 | #ifdef RCT_NEW_ARCH_ENABLED 13 | using namespace facebook::react; 14 | 15 | @interface BlurView () 16 | #else 17 | @interface BlurView () 18 | #endif // RCT_NEW_ARCH_ENABLED 19 | @end 20 | 21 | @implementation BlurView 22 | 23 | - (instancetype)init 24 | { 25 | if (self = [super init]) { 26 | [[NSNotificationCenter defaultCenter] addObserver:self 27 | selector:@selector(reduceTransparencyStatusDidChange:) 28 | name:UIAccessibilityReduceTransparencyStatusDidChangeNotification 29 | object:nil]; 30 | } 31 | 32 | return self; 33 | } 34 | 35 | - (instancetype)initWithFrame:(CGRect)frame 36 | { 37 | if (self = [super initWithFrame:frame]) { 38 | #ifdef RCT_NEW_ARCH_ENABLED 39 | static const auto defaultProps = std::make_shared(); 40 | _props = defaultProps; 41 | #endif // RCT_NEW_ARCH_ENABLED 42 | 43 | self.blurEffectView = [[UIVisualEffectView alloc] init]; 44 | self.blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; 45 | self.blurEffectView.frame = frame; 46 | 47 | self.reducedTransparencyFallbackView = [[UIView alloc] init]; 48 | self.reducedTransparencyFallbackView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; 49 | self.reducedTransparencyFallbackView.frame = frame; 50 | 51 | self.blurAmount = @10; 52 | self.blurType = @"dark"; 53 | [self updateBlurEffect]; 54 | [self updateFallbackView]; 55 | 56 | self.clipsToBounds = true; 57 | 58 | [self addSubview:self.blurEffectView]; 59 | } 60 | 61 | return self; 62 | } 63 | 64 | #ifdef RCT_NEW_ARCH_ENABLED 65 | #pragma mark - RCTComponentViewProtocol 66 | 67 | + (ComponentDescriptorProvider)componentDescriptorProvider 68 | { 69 | return concreteComponentDescriptorProvider(); 70 | } 71 | 72 | - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps 73 | { 74 | const auto &oldViewProps = *std::static_pointer_cast(_props); 75 | const auto &newViewProps = *std::static_pointer_cast(props); 76 | 77 | if (oldViewProps.blurAmount != newViewProps.blurAmount) { 78 | NSNumber *blurAmount = [NSNumber numberWithInt:newViewProps.blurAmount]; 79 | [self setBlurAmount:blurAmount]; 80 | } 81 | 82 | if (oldViewProps.blurType != newViewProps.blurType) { 83 | NSString *blurType = [NSString stringWithUTF8String:toString(newViewProps.blurType).c_str()]; 84 | [self setBlurType:blurType]; 85 | } 86 | 87 | if (oldViewProps.reducedTransparencyFallbackColor != newViewProps.reducedTransparencyFallbackColor) { 88 | UIColor *color = RCTUIColorFromSharedColor(newViewProps.reducedTransparencyFallbackColor); 89 | [self setReducedTransparencyFallbackColor:color]; 90 | } 91 | 92 | [super updateProps:props oldProps:oldProps]; 93 | } 94 | #endif // RCT_NEW_ARCH_ENABLED 95 | 96 | - (void)dealloc 97 | { 98 | [[NSNotificationCenter defaultCenter] removeObserver:self]; 99 | } 100 | 101 | - (void)layoutSubviews 102 | { 103 | [super layoutSubviews]; 104 | self.blurEffectView.frame = self.bounds; 105 | self.reducedTransparencyFallbackView.frame = self.bounds; 106 | } 107 | 108 | - (void)setBlurType:(NSString *)blurType 109 | { 110 | if (blurType && ![self.blurType isEqual:blurType]) { 111 | _blurType = blurType; 112 | [self updateBlurEffect]; 113 | } 114 | } 115 | 116 | - (void)setBlurAmount:(NSNumber *)blurAmount 117 | { 118 | if (blurAmount && ![self.blurAmount isEqualToNumber:blurAmount]) { 119 | _blurAmount = blurAmount; 120 | [self updateBlurEffect]; 121 | } 122 | } 123 | 124 | - (void)setReducedTransparencyFallbackColor:(nullable UIColor *)reducedTransparencyFallbackColor 125 | { 126 | if (reducedTransparencyFallbackColor && ![self.reducedTransparencyFallbackColor isEqual:reducedTransparencyFallbackColor]) { 127 | _reducedTransparencyFallbackColor = reducedTransparencyFallbackColor; 128 | [self updateFallbackView]; 129 | } 130 | } 131 | 132 | - (UIBlurEffectStyle)blurEffectStyle 133 | { 134 | if ([self.blurType isEqual: @"xlight"]) return UIBlurEffectStyleExtraLight; 135 | if ([self.blurType isEqual: @"light"]) return UIBlurEffectStyleLight; 136 | if ([self.blurType isEqual: @"dark"]) return UIBlurEffectStyleDark; 137 | 138 | #if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 100000 /* __IPHONE_10_0 */ 139 | if ([self.blurType isEqual: @"regular"]) return UIBlurEffectStyleRegular; 140 | if ([self.blurType isEqual: @"prominent"]) return UIBlurEffectStyleProminent; 141 | #endif 142 | 143 | #if !TARGET_OS_TV && defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && __IPHONE_OS_VERSION_MAX_ALLOWED >= 130000 /* __IPHONE_13_0 */ 144 | // Adaptable blur styles 145 | if ([self.blurType isEqual: @"chromeMaterial"]) return UIBlurEffectStyleSystemChromeMaterial; 146 | if ([self.blurType isEqual: @"material"]) return UIBlurEffectStyleSystemMaterial; 147 | if ([self.blurType isEqual: @"thickMaterial"]) return UIBlurEffectStyleSystemThickMaterial; 148 | if ([self.blurType isEqual: @"thinMaterial"]) return UIBlurEffectStyleSystemThinMaterial; 149 | if ([self.blurType isEqual: @"ultraThinMaterial"]) return UIBlurEffectStyleSystemUltraThinMaterial; 150 | // dark blur styles 151 | if ([self.blurType isEqual: @"chromeMaterialDark"]) return UIBlurEffectStyleSystemChromeMaterialDark; 152 | if ([self.blurType isEqual: @"materialDark"]) return UIBlurEffectStyleSystemMaterialDark; 153 | if ([self.blurType isEqual: @"thickMaterialDark"]) return UIBlurEffectStyleSystemThickMaterialDark; 154 | if ([self.blurType isEqual: @"thinMaterialDark"]) return UIBlurEffectStyleSystemThinMaterialDark; 155 | if ([self.blurType isEqual: @"ultraThinMaterialDark"]) return UIBlurEffectStyleSystemUltraThinMaterialDark; 156 | // light blur styles 157 | if ([self.blurType isEqual: @"chromeMaterialLight"]) return UIBlurEffectStyleSystemChromeMaterialLight; 158 | if ([self.blurType isEqual: @"materialLight"]) return UIBlurEffectStyleSystemMaterialLight; 159 | if ([self.blurType isEqual: @"thickMaterialLight"]) return UIBlurEffectStyleSystemThickMaterialLight; 160 | if ([self.blurType isEqual: @"thinMaterialLight"]) return UIBlurEffectStyleSystemThinMaterialLight; 161 | if ([self.blurType isEqual: @"ultraThinMaterialLight"]) return UIBlurEffectStyleSystemUltraThinMaterialLight; 162 | #endif 163 | 164 | #if TARGET_OS_TV 165 | if ([self.blurType isEqual: @"regular"]) return UIBlurEffectStyleRegular; 166 | if ([self.blurType isEqual: @"prominent"]) return UIBlurEffectStyleProminent; 167 | if ([self.blurType isEqual: @"extraDark"]) return UIBlurEffectStyleExtraDark; 168 | #endif 169 | 170 | return UIBlurEffectStyleDark; 171 | } 172 | 173 | - (BOOL)useReduceTransparencyFallback 174 | { 175 | return UIAccessibilityIsReduceTransparencyEnabled() == YES && self.reducedTransparencyFallbackColor != NULL; 176 | } 177 | 178 | - (void)updateBlurEffect 179 | { 180 | // Without resetting the effect, changing blurAmount doesn't seem to work in Fabric... 181 | // Setting it to nil should also enable blur animations (see PR #392) 182 | self.blurEffectView.effect = nil; 183 | UIBlurEffectStyle style = [self blurEffectStyle]; 184 | self.blurEffect = [BlurEffectWithAmount effectWithStyle:style andBlurAmount:self.blurAmount]; 185 | self.blurEffectView.effect = self.blurEffect; 186 | } 187 | 188 | - (void)updateFallbackView 189 | { 190 | if ([self useReduceTransparencyFallback]) { 191 | if (![self.subviews containsObject:self.reducedTransparencyFallbackView]) { 192 | [self insertSubview:self.reducedTransparencyFallbackView atIndex:0]; 193 | } 194 | 195 | if ([self.subviews containsObject:self.blurEffectView]) { 196 | [self.blurEffectView removeFromSuperview]; 197 | } 198 | } else { 199 | if ([self.subviews containsObject:self.reducedTransparencyFallbackView]) { 200 | [self.reducedTransparencyFallbackView removeFromSuperview]; 201 | } 202 | 203 | if (![self.subviews containsObject:self.blurEffectView]) { 204 | [self insertSubview:self.blurEffectView atIndex:0]; 205 | } 206 | } 207 | 208 | self.reducedTransparencyFallbackView.backgroundColor = self.reducedTransparencyFallbackColor; 209 | } 210 | 211 | - (void)reduceTransparencyStatusDidChange:(__unused NSNotification *)notification 212 | { 213 | [self updateFallbackView]; 214 | } 215 | 216 | @end 217 | 218 | #ifdef RCT_NEW_ARCH_ENABLED 219 | Class BlurViewCls(void) 220 | { 221 | return BlurView.class; 222 | } 223 | #endif // RCT_NEW_ARCH_ENABLED 224 | -------------------------------------------------------------------------------- /ios/BlurViewManager.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | @interface BlurViewManager : RCTViewManager 4 | 5 | @end 6 | -------------------------------------------------------------------------------- /ios/BlurViewManager.mm: -------------------------------------------------------------------------------- 1 | #import "BlurViewManager.h" 2 | #import "BlurView.h" 3 | 4 | @implementation BlurViewManager 5 | 6 | RCT_EXPORT_MODULE(); 7 | 8 | - (UIView *)view 9 | { 10 | return [[BlurView alloc] init]; 11 | } 12 | 13 | RCT_EXPORT_VIEW_PROPERTY(blurType, NSString); 14 | RCT_EXPORT_VIEW_PROPERTY(blurAmount, NSNumber); 15 | RCT_EXPORT_VIEW_PROPERTY(reducedTransparencyFallbackColor, UIColor); 16 | 17 | @end 18 | -------------------------------------------------------------------------------- /ios/RNBlur.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 46; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 215426C328894FC500DF69C3 /* VibrancyView.mm in Sources */ = {isa = PBXBuildFile; fileRef = 215426BB28894FC400DF69C3 /* VibrancyView.mm */; }; 11 | 215426C428894FC500DF69C3 /* BlurView.mm in Sources */ = {isa = PBXBuildFile; fileRef = 215426BC28894FC400DF69C3 /* BlurView.mm */; }; 12 | 215426C528894FC500DF69C3 /* BlurEffectWithAmount.m in Sources */ = {isa = PBXBuildFile; fileRef = 215426BF28894FC400DF69C3 /* BlurEffectWithAmount.m */; }; 13 | 215426C628894FC500DF69C3 /* BlurViewManager.mm in Sources */ = {isa = PBXBuildFile; fileRef = 215426C028894FC400DF69C3 /* BlurViewManager.mm */; }; 14 | 215426C728894FC500DF69C3 /* VibrancyViewManager.mm in Sources */ = {isa = PBXBuildFile; fileRef = 215426C228894FC500DF69C3 /* VibrancyViewManager.mm */; }; 15 | /* End PBXBuildFile section */ 16 | 17 | /* Begin PBXCopyFilesBuildPhase section */ 18 | 58B511D91A9E6C8500147676 /* CopyFiles */ = { 19 | isa = PBXCopyFilesBuildPhase; 20 | buildActionMask = 2147483647; 21 | dstPath = "include/$(PRODUCT_NAME)"; 22 | dstSubfolderSpec = 16; 23 | files = ( 24 | ); 25 | runOnlyForDeploymentPostprocessing = 0; 26 | }; 27 | /* End PBXCopyFilesBuildPhase section */ 28 | 29 | /* Begin PBXFileReference section */ 30 | 134814201AA4EA6300B7C361 /* libRNBlur.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRNBlur.a; sourceTree = BUILT_PRODUCTS_DIR; }; 31 | 215426B928894FC400DF69C3 /* VibrancyViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = VibrancyViewManager.h; sourceTree = ""; }; 32 | 215426BA28894FC400DF69C3 /* VibrancyView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = VibrancyView.h; sourceTree = ""; }; 33 | 215426BB28894FC400DF69C3 /* VibrancyView.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = VibrancyView.mm; sourceTree = ""; }; 34 | 215426BC28894FC400DF69C3 /* BlurView.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = BlurView.mm; sourceTree = ""; }; 35 | 215426BD28894FC400DF69C3 /* BlurView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = BlurView.h; sourceTree = ""; }; 36 | 215426BE28894FC400DF69C3 /* BlurEffectWithAmount.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = BlurEffectWithAmount.h; sourceTree = ""; }; 37 | 215426BF28894FC400DF69C3 /* BlurEffectWithAmount.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = BlurEffectWithAmount.m; sourceTree = ""; }; 38 | 215426C028894FC400DF69C3 /* BlurViewManager.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = BlurViewManager.mm; sourceTree = ""; }; 39 | 215426C128894FC400DF69C3 /* BlurViewManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = BlurViewManager.h; sourceTree = ""; }; 40 | 215426C228894FC500DF69C3 /* VibrancyViewManager.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = VibrancyViewManager.mm; sourceTree = ""; }; 41 | /* End PBXFileReference section */ 42 | 43 | /* Begin PBXFrameworksBuildPhase section */ 44 | 58B511D81A9E6C8500147676 /* Frameworks */ = { 45 | isa = PBXFrameworksBuildPhase; 46 | buildActionMask = 2147483647; 47 | files = ( 48 | ); 49 | runOnlyForDeploymentPostprocessing = 0; 50 | }; 51 | /* End PBXFrameworksBuildPhase section */ 52 | 53 | /* Begin PBXGroup section */ 54 | 134814211AA4EA7D00B7C361 /* Products */ = { 55 | isa = PBXGroup; 56 | children = ( 57 | 134814201AA4EA6300B7C361 /* libRNBlur.a */, 58 | ); 59 | name = Products; 60 | sourceTree = ""; 61 | }; 62 | 58B511D21A9E6C8500147676 = { 63 | isa = PBXGroup; 64 | children = ( 65 | 215426BE28894FC400DF69C3 /* BlurEffectWithAmount.h */, 66 | 215426BF28894FC400DF69C3 /* BlurEffectWithAmount.m */, 67 | 215426BD28894FC400DF69C3 /* BlurView.h */, 68 | 215426BC28894FC400DF69C3 /* BlurView.mm */, 69 | 215426C128894FC400DF69C3 /* BlurViewManager.h */, 70 | 215426C028894FC400DF69C3 /* BlurViewManager.mm */, 71 | 215426BA28894FC400DF69C3 /* VibrancyView.h */, 72 | 215426BB28894FC400DF69C3 /* VibrancyView.mm */, 73 | 215426B928894FC400DF69C3 /* VibrancyViewManager.h */, 74 | 215426C228894FC500DF69C3 /* VibrancyViewManager.mm */, 75 | 134814211AA4EA7D00B7C361 /* Products */, 76 | ); 77 | sourceTree = ""; 78 | }; 79 | /* End PBXGroup section */ 80 | 81 | /* Begin PBXNativeTarget section */ 82 | 58B511DA1A9E6C8500147676 /* RNBlur */ = { 83 | isa = PBXNativeTarget; 84 | buildConfigurationList = 58B511EF1A9E6C8500147676 /* Build configuration list for PBXNativeTarget "RNBlur" */; 85 | buildPhases = ( 86 | 58B511D71A9E6C8500147676 /* Sources */, 87 | 58B511D81A9E6C8500147676 /* Frameworks */, 88 | 58B511D91A9E6C8500147676 /* CopyFiles */, 89 | ); 90 | buildRules = ( 91 | ); 92 | dependencies = ( 93 | ); 94 | name = RNBlur; 95 | productName = RCTDataManager; 96 | productReference = 134814201AA4EA6300B7C361 /* libRNBlur.a */; 97 | productType = "com.apple.product-type.library.static"; 98 | }; 99 | /* End PBXNativeTarget section */ 100 | 101 | /* Begin PBXProject section */ 102 | 58B511D31A9E6C8500147676 /* Project object */ = { 103 | isa = PBXProject; 104 | attributes = { 105 | LastUpgradeCheck = 0920; 106 | ORGANIZATIONNAME = Facebook; 107 | TargetAttributes = { 108 | 58B511DA1A9E6C8500147676 = { 109 | CreatedOnToolsVersion = 6.1.1; 110 | }; 111 | }; 112 | }; 113 | buildConfigurationList = 58B511D61A9E6C8500147676 /* Build configuration list for PBXProject "RNBlur" */; 114 | compatibilityVersion = "Xcode 3.2"; 115 | developmentRegion = English; 116 | hasScannedForEncodings = 0; 117 | knownRegions = ( 118 | English, 119 | en, 120 | ); 121 | mainGroup = 58B511D21A9E6C8500147676; 122 | productRefGroup = 58B511D21A9E6C8500147676; 123 | projectDirPath = ""; 124 | projectRoot = ""; 125 | targets = ( 126 | 58B511DA1A9E6C8500147676 /* RNBlur */, 127 | ); 128 | }; 129 | /* End PBXProject section */ 130 | 131 | /* Begin PBXSourcesBuildPhase section */ 132 | 58B511D71A9E6C8500147676 /* Sources */ = { 133 | isa = PBXSourcesBuildPhase; 134 | buildActionMask = 2147483647; 135 | files = ( 136 | 215426C728894FC500DF69C3 /* VibrancyViewManager.mm in Sources */, 137 | 215426C328894FC500DF69C3 /* VibrancyView.mm in Sources */, 138 | 215426C528894FC500DF69C3 /* BlurEffectWithAmount.m in Sources */, 139 | 215426C428894FC500DF69C3 /* BlurView.mm in Sources */, 140 | 215426C628894FC500DF69C3 /* BlurViewManager.mm in Sources */, 141 | ); 142 | runOnlyForDeploymentPostprocessing = 0; 143 | }; 144 | /* End PBXSourcesBuildPhase section */ 145 | 146 | /* Begin XCBuildConfiguration section */ 147 | 58B511ED1A9E6C8500147676 /* Debug */ = { 148 | isa = XCBuildConfiguration; 149 | buildSettings = { 150 | ALWAYS_SEARCH_USER_PATHS = NO; 151 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 152 | CLANG_CXX_LIBRARY = "libc++"; 153 | CLANG_ENABLE_MODULES = YES; 154 | CLANG_ENABLE_OBJC_ARC = YES; 155 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 156 | CLANG_WARN_BOOL_CONVERSION = YES; 157 | CLANG_WARN_COMMA = YES; 158 | CLANG_WARN_CONSTANT_CONVERSION = YES; 159 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 160 | CLANG_WARN_EMPTY_BODY = YES; 161 | CLANG_WARN_ENUM_CONVERSION = YES; 162 | CLANG_WARN_INFINITE_RECURSION = YES; 163 | CLANG_WARN_INT_CONVERSION = YES; 164 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 165 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 166 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 167 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 168 | CLANG_WARN_STRICT_PROTOTYPES = YES; 169 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 170 | CLANG_WARN_UNREACHABLE_CODE = YES; 171 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 172 | COPY_PHASE_STRIP = NO; 173 | ENABLE_STRICT_OBJC_MSGSEND = YES; 174 | ENABLE_TESTABILITY = YES; 175 | "EXCLUDED_ARCHS[sdk=*]" = arm64; 176 | GCC_C_LANGUAGE_STANDARD = gnu99; 177 | GCC_DYNAMIC_NO_PIC = NO; 178 | GCC_NO_COMMON_BLOCKS = YES; 179 | GCC_OPTIMIZATION_LEVEL = 0; 180 | GCC_PREPROCESSOR_DEFINITIONS = ( 181 | "DEBUG=1", 182 | "$(inherited)", 183 | ); 184 | GCC_SYMBOLS_PRIVATE_EXTERN = NO; 185 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 186 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 187 | GCC_WARN_UNDECLARED_SELECTOR = YES; 188 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 189 | GCC_WARN_UNUSED_FUNCTION = YES; 190 | GCC_WARN_UNUSED_VARIABLE = YES; 191 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 192 | MTL_ENABLE_DEBUG_INFO = YES; 193 | ONLY_ACTIVE_ARCH = YES; 194 | SDKROOT = iphoneos; 195 | }; 196 | name = Debug; 197 | }; 198 | 58B511EE1A9E6C8500147676 /* Release */ = { 199 | isa = XCBuildConfiguration; 200 | buildSettings = { 201 | ALWAYS_SEARCH_USER_PATHS = NO; 202 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 203 | CLANG_CXX_LIBRARY = "libc++"; 204 | CLANG_ENABLE_MODULES = YES; 205 | CLANG_ENABLE_OBJC_ARC = YES; 206 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 207 | CLANG_WARN_BOOL_CONVERSION = YES; 208 | CLANG_WARN_COMMA = YES; 209 | CLANG_WARN_CONSTANT_CONVERSION = YES; 210 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 211 | CLANG_WARN_EMPTY_BODY = YES; 212 | CLANG_WARN_ENUM_CONVERSION = YES; 213 | CLANG_WARN_INFINITE_RECURSION = YES; 214 | CLANG_WARN_INT_CONVERSION = YES; 215 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 216 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 217 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 218 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 219 | CLANG_WARN_STRICT_PROTOTYPES = YES; 220 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 221 | CLANG_WARN_UNREACHABLE_CODE = YES; 222 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 223 | COPY_PHASE_STRIP = YES; 224 | ENABLE_NS_ASSERTIONS = NO; 225 | ENABLE_STRICT_OBJC_MSGSEND = YES; 226 | "EXCLUDED_ARCHS[sdk=*]" = arm64; 227 | GCC_C_LANGUAGE_STANDARD = gnu99; 228 | GCC_NO_COMMON_BLOCKS = YES; 229 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 230 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 231 | GCC_WARN_UNDECLARED_SELECTOR = YES; 232 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 233 | GCC_WARN_UNUSED_FUNCTION = YES; 234 | GCC_WARN_UNUSED_VARIABLE = YES; 235 | IPHONEOS_DEPLOYMENT_TARGET = 8.0; 236 | MTL_ENABLE_DEBUG_INFO = NO; 237 | SDKROOT = iphoneos; 238 | VALIDATE_PRODUCT = YES; 239 | }; 240 | name = Release; 241 | }; 242 | 58B511F01A9E6C8500147676 /* Debug */ = { 243 | isa = XCBuildConfiguration; 244 | buildSettings = { 245 | HEADER_SEARCH_PATHS = ( 246 | "$(inherited)", 247 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 248 | "$(SRCROOT)/../../../React/**", 249 | "$(SRCROOT)/../../react-native/React/**", 250 | ); 251 | LIBRARY_SEARCH_PATHS = "$(inherited)"; 252 | OTHER_LDFLAGS = "-ObjC"; 253 | PRODUCT_NAME = RNBlur; 254 | SKIP_INSTALL = YES; 255 | }; 256 | name = Debug; 257 | }; 258 | 58B511F11A9E6C8500147676 /* Release */ = { 259 | isa = XCBuildConfiguration; 260 | buildSettings = { 261 | HEADER_SEARCH_PATHS = ( 262 | "$(inherited)", 263 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include, 264 | "$(SRCROOT)/../../../React/**", 265 | "$(SRCROOT)/../../react-native/React/**", 266 | ); 267 | LIBRARY_SEARCH_PATHS = "$(inherited)"; 268 | OTHER_LDFLAGS = "-ObjC"; 269 | PRODUCT_NAME = RNBlur; 270 | SKIP_INSTALL = YES; 271 | }; 272 | name = Release; 273 | }; 274 | /* End XCBuildConfiguration section */ 275 | 276 | /* Begin XCConfigurationList section */ 277 | 58B511D61A9E6C8500147676 /* Build configuration list for PBXProject "RNBlur" */ = { 278 | isa = XCConfigurationList; 279 | buildConfigurations = ( 280 | 58B511ED1A9E6C8500147676 /* Debug */, 281 | 58B511EE1A9E6C8500147676 /* Release */, 282 | ); 283 | defaultConfigurationIsVisible = 0; 284 | defaultConfigurationName = Release; 285 | }; 286 | 58B511EF1A9E6C8500147676 /* Build configuration list for PBXNativeTarget "RNBlur" */ = { 287 | isa = XCConfigurationList; 288 | buildConfigurations = ( 289 | 58B511F01A9E6C8500147676 /* Debug */, 290 | 58B511F11A9E6C8500147676 /* Release */, 291 | ); 292 | defaultConfigurationIsVisible = 0; 293 | defaultConfigurationName = Release; 294 | }; 295 | /* End XCConfigurationList section */ 296 | }; 297 | rootObject = 58B511D31A9E6C8500147676 /* Project object */; 298 | } 299 | -------------------------------------------------------------------------------- /ios/VibrancyView.h: -------------------------------------------------------------------------------- 1 | #import "BlurView.h" 2 | 3 | @interface VibrancyView : BlurView 4 | @end 5 | -------------------------------------------------------------------------------- /ios/VibrancyView.mm: -------------------------------------------------------------------------------- 1 | #import 2 | #import "BlurView.h" 3 | #import "VibrancyView.h" 4 | 5 | #ifdef RCT_NEW_ARCH_ENABLED 6 | #import 7 | #import 8 | #import 9 | #import 10 | #import 11 | #endif // RCT_NEW_ARCH_ENABLED 12 | 13 | #ifdef RCT_NEW_ARCH_ENABLED 14 | using namespace facebook::react; 15 | 16 | @interface VibrancyView () 17 | #else 18 | @interface VibrancyView () 19 | #endif // RCT_NEW_ARCH_ENABLED 20 | 21 | @property (nonatomic, strong) UIVibrancyEffect *vibrancyEffect; 22 | @property (nonatomic, strong) UIVisualEffectView *vibrancyEffectView; 23 | 24 | @end 25 | 26 | @implementation VibrancyView 27 | 28 | - (instancetype)initWithFrame:(CGRect)frame { 29 | if (self = [super initWithFrame:frame]) { 30 | self.vibrancyEffectView = [[UIVisualEffectView alloc] init]; 31 | self.vibrancyEffectView.frame = frame; 32 | [self updateVibrancyEffect]; 33 | 34 | [self.blurEffectView.contentView addSubview:self.vibrancyEffectView]; 35 | } 36 | 37 | return self; 38 | } 39 | 40 | #ifdef RCT_NEW_ARCH_ENABLED 41 | #pragma mark - RCTComponentViewProtocol 42 | 43 | + (ComponentDescriptorProvider)componentDescriptorProvider 44 | { 45 | return concreteComponentDescriptorProvider(); 46 | } 47 | 48 | - (void)mountChildComponentView:(UIView *)childComponentView index:(NSInteger)index 49 | { 50 | [self attachToVisualEffectView:childComponentView]; 51 | } 52 | 53 | - (void)unmountChildComponentView:(UIView *)childComponentView index:(NSInteger)index 54 | { 55 | // Override unmountChildComponentView to avoid an assertion on childComponentView.superview == self 56 | // childComponentView is not a direct subview of self, as it's inserted deeper in a UIVisualEffectView 57 | [childComponentView removeFromSuperview]; 58 | } 59 | #endif // RCT_NEW_ARCH_ENABLED 60 | 61 | - (void)layoutSubviews 62 | { 63 | [super layoutSubviews]; 64 | self.vibrancyEffectView.frame = self.bounds; 65 | } 66 | 67 | - (void)insertReactSubview:(id)subview atIndex:(NSInteger)atIndex 68 | { 69 | [self attachToVisualEffectView:(UIView *)subview]; 70 | } 71 | 72 | - (void)attachToVisualEffectView:(UIView *)subview 73 | { 74 | if ([self useReduceTransparencyFallback]) { 75 | [self addSubview:subview]; 76 | } else { 77 | [self.vibrancyEffectView.contentView addSubview:subview]; 78 | } 79 | } 80 | 81 | - (void)updateBlurEffect 82 | { 83 | [super updateBlurEffect]; 84 | [self updateVibrancyEffect]; 85 | } 86 | 87 | - (void)updateVibrancyEffect 88 | { 89 | self.vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:self.blurEffect]; 90 | self.vibrancyEffectView.effect = self.vibrancyEffect; 91 | } 92 | 93 | - (void)updateFallbackView 94 | { 95 | [super updateFallbackView]; 96 | 97 | if ([self useReduceTransparencyFallback]) { 98 | for (UIView *subview in self.blurEffectView.contentView.subviews) { 99 | [subview removeFromSuperview]; 100 | [self addSubview:subview]; 101 | } 102 | } else { 103 | for (UIView *subview in self.subviews) { 104 | if (subview == self.blurEffectView) continue; 105 | if (subview == self.reducedTransparencyFallbackView) continue; 106 | 107 | [subview removeFromSuperview]; 108 | [self.blurEffectView.contentView addSubview:subview]; 109 | } 110 | } 111 | } 112 | 113 | @end 114 | 115 | #ifdef RCT_NEW_ARCH_ENABLED 116 | Class VibrancyViewCls(void) 117 | { 118 | return VibrancyView.class; 119 | } 120 | #endif // RCT_NEW_ARCH_ENABLED 121 | -------------------------------------------------------------------------------- /ios/VibrancyViewManager.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | @interface VibrancyViewManager : RCTViewManager 4 | 5 | @end -------------------------------------------------------------------------------- /ios/VibrancyViewManager.mm: -------------------------------------------------------------------------------- 1 | #import "VibrancyViewManager.h" 2 | #import "VibrancyView.h" 3 | 4 | @implementation VibrancyViewManager 5 | 6 | RCT_EXPORT_MODULE(); 7 | 8 | - (UIView *)view 9 | { 10 | return [[VibrancyView alloc] init]; 11 | } 12 | 13 | RCT_EXPORT_VIEW_PROPERTY(blurType, NSString); 14 | RCT_EXPORT_VIEW_PROPERTY(blurAmount, NSNumber); 15 | RCT_EXPORT_VIEW_PROPERTY(reducedTransparencyFallbackColor, UIColor); 16 | 17 | @end 18 | -------------------------------------------------------------------------------- /lefthook.yml: -------------------------------------------------------------------------------- 1 | pre-commit: 2 | parallel: true 3 | commands: 4 | lint: 5 | files: git diff --name-only @{push} 6 | glob: "*.{js,ts,jsx,tsx}" 7 | run: npx eslint {files} 8 | types: 9 | files: git diff --name-only @{push} 10 | glob: "*.{js,ts, jsx, tsx}" 11 | run: npx tsc --noEmit 12 | commit-msg: 13 | parallel: true 14 | commands: 15 | commitlint: 16 | run: npx commitlint --edit 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@react-native-community/blur", 3 | "version": "4.4.1", 4 | "description": "React Native Blur component", 5 | "main": "lib/commonjs/index", 6 | "module": "lib/module/index", 7 | "types": "lib/typescript/index.d.ts", 8 | "react-native": "src/index", 9 | "source": "src/index", 10 | "files": [ 11 | "src", 12 | "lib", 13 | "android", 14 | "ios", 15 | "cpp", 16 | "react-native-blur.podspec", 17 | "!lib/typescript/example", 18 | "!android/build", 19 | "!ios/build", 20 | "!**/__tests__", 21 | "!**/__fixtures__", 22 | "!**/__mocks__" 23 | ], 24 | "scripts": { 25 | "test": "jest", 26 | "typescript": "tsc --noEmit", 27 | "lint": "eslint \"**/*.{js,ts,tsx}\"", 28 | "prepare": "bob build", 29 | "release": "release-it", 30 | "example": "yarn --cwd example", 31 | "bootstrap": "yarn example && yarn && yarn example pods" 32 | }, 33 | "keywords": [ 34 | "react-native", 35 | "ios", 36 | "android" 37 | ], 38 | "repository": "https://github.com/react-native-community/react-native-blur", 39 | "author": "Alexey Kureev (https://github.com/Kureev)", 40 | "license": "MIT", 41 | "bugs": { 42 | "url": "https://github.com/react-native-community/react-native-blur/issues" 43 | }, 44 | "homepage": "https://github.com/react-native-community/react-native-blur", 45 | "publishConfig": { 46 | "registry": "https://registry.npmjs.org/" 47 | }, 48 | "devDependencies": { 49 | "@arkweid/lefthook": "^0.7.7", 50 | "@babel/eslint-parser": "^7.18.2", 51 | "@commitlint/config-conventional": "^17.0.2", 52 | "@react-native-community/eslint-config": "^3.0.2", 53 | "@release-it/conventional-changelog": "^5.0.0", 54 | "@types/jest": "^29.5.1", 55 | "@types/react": "~18.0.20", 56 | "@types/react-native": "^0.70.1", 57 | "commitlint": "^17.0.2", 58 | "eslint": "^8.23.1", 59 | "eslint-config-prettier": "^8.5.0", 60 | "eslint-plugin-prettier": "^4.0.0", 61 | "jest": "^29.5.0", 62 | "pod-install": "^0.1.0", 63 | "prettier": "^2.0.5", 64 | "react": "18.1.0", 65 | "react-native": "0.70.1", 66 | "react-native-builder-bob": "^0.18.3", 67 | "react-native-test-app": "^1.6.16", 68 | "release-it": "^15.0.0", 69 | "typescript": "^4.5.2" 70 | }, 71 | "peerDependencies": { 72 | "react": "*", 73 | "react-native": "*" 74 | }, 75 | "jest": { 76 | "preset": "react-native", 77 | "modulePathIgnorePatterns": [ 78 | "/example/node_modules", 79 | "/lib/" 80 | ] 81 | }, 82 | "commitlint": { 83 | "extends": [ 84 | "@commitlint/config-conventional" 85 | ] 86 | }, 87 | "release-it": { 88 | "git": { 89 | "commitMessage": "chore: release ${version}", 90 | "tagName": "v${version}" 91 | }, 92 | "npm": { 93 | "publish": true 94 | }, 95 | "github": { 96 | "release": true 97 | }, 98 | "plugins": { 99 | "@release-it/conventional-changelog": { 100 | "preset": "angular" 101 | } 102 | } 103 | }, 104 | "eslintConfig": { 105 | "root": true, 106 | "parser": "@babel/eslint-parser", 107 | "extends": [ 108 | "@react-native-community", 109 | "prettier" 110 | ], 111 | "rules": { 112 | "prettier/prettier": [ 113 | "error", 114 | { 115 | "quoteProps": "consistent", 116 | "singleQuote": true, 117 | "tabWidth": 2, 118 | "trailingComma": "es5", 119 | "useTabs": false 120 | } 121 | ] 122 | } 123 | }, 124 | "eslintIgnore": [ 125 | "node_modules/", 126 | "lib/" 127 | ], 128 | "prettier": { 129 | "quoteProps": "consistent", 130 | "singleQuote": true, 131 | "tabWidth": 2, 132 | "trailingComma": "es5", 133 | "useTabs": false 134 | }, 135 | "react-native-builder-bob": { 136 | "source": "src", 137 | "output": "lib", 138 | "targets": [ 139 | "commonjs", 140 | "module", 141 | [ 142 | "typescript", 143 | { 144 | "project": "tsconfig.build.json" 145 | } 146 | ] 147 | ] 148 | }, 149 | "codegenConfig": { 150 | "name": "rnblurview", 151 | "type": "components", 152 | "jsSrcsDir": "./src/fabric", 153 | "android": { 154 | "javaPackageName": "com.reactnativecommunityblur" 155 | } 156 | } 157 | } 158 | -------------------------------------------------------------------------------- /react-native-blur.podspec: -------------------------------------------------------------------------------- 1 | require "json" 2 | 3 | new_arch_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1' 4 | package = JSON.parse(File.read(File.join(__dir__, "package.json"))) 5 | 6 | Pod::Spec.new do |s| 7 | s.name = "react-native-blur" 8 | s.version = package["version"] 9 | s.summary = package["description"] 10 | s.homepage = package["homepage"] 11 | s.license = package["license"] 12 | s.authors = package["author"] 13 | 14 | s.platforms = { :ios => "10.0", :tvos => "11.0", :visionos => "1.0" } 15 | s.source = { :git => "https://github.com/react-native-community/react-native-blur.git" } 16 | 17 | s.source_files = "ios/**/*.{h,m,mm}" 18 | 19 | if defined?(install_modules_dependencies()) != nil 20 | install_modules_dependencies(s) 21 | else 22 | # Don't install the dependencies when we run `pod install` in the old architecture. 23 | if new_arch_enabled then 24 | folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32' 25 | 26 | s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1" 27 | s.pod_target_xcconfig = { 28 | "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"", 29 | "CLANG_CXX_LANGUAGE_STANDARD" => "c++17" 30 | } 31 | 32 | s.dependency "React-RCTFabric" 33 | s.dependency "React-Codegen" 34 | s.dependency "RCT-Folly" 35 | s.dependency "RCTRequired" 36 | s.dependency "RCTTypeSafety" 37 | s.dependency "ReactCommon/turbomodule/core" 38 | else 39 | s.dependency "React-Core" 40 | end 41 | end 42 | end 43 | -------------------------------------------------------------------------------- /scripts/bootstrap.js: -------------------------------------------------------------------------------- 1 | const os = require('os'); 2 | const path = require('path'); 3 | const child_process = require('child_process'); 4 | 5 | const root = path.resolve(__dirname, '..'); 6 | const args = process.argv.slice(2); 7 | const options = { 8 | cwd: process.cwd(), 9 | env: process.env, 10 | stdio: 'inherit', 11 | encoding: 'utf-8', 12 | }; 13 | 14 | if (os.type() === 'Windows_NT') { 15 | options.shell = true; 16 | } 17 | 18 | let result; 19 | 20 | if (process.cwd() !== root || args.length) { 21 | // We're not in the root of the project, or additional arguments were passed 22 | // In this case, forward the command to `yarn` 23 | result = child_process.spawnSync('yarn', args, options); 24 | } else { 25 | // If `yarn` is run without arguments, perform bootstrap 26 | result = child_process.spawnSync('yarn', ['bootstrap'], options); 27 | } 28 | 29 | process.exitCode = result.status; 30 | -------------------------------------------------------------------------------- /src/components/BlurView.android.tsx: -------------------------------------------------------------------------------- 1 | import React, { forwardRef, useEffect } from 'react'; 2 | import { 3 | View, 4 | DeviceEventEmitter, 5 | StyleSheet, 6 | ViewProps, 7 | ViewStyle, 8 | } from 'react-native'; 9 | import NativeBlurView from '../fabric/BlurViewNativeComponentAndroid'; 10 | 11 | const OVERLAY_COLORS = { 12 | light: 'rgba(255, 255, 255, 0.2)', 13 | xlight: 'rgba(255, 255, 255, 0.75)', 14 | dark: 'rgba(16, 12, 12, 0.64)', 15 | }; 16 | 17 | export type BlurViewProps = ViewProps & { 18 | blurAmount?: number; 19 | blurType?: 'dark' | 'light' | 'xlight'; 20 | blurRadius?: number; 21 | downsampleFactor?: number; 22 | overlayColor?: string; 23 | enabled?: boolean; 24 | autoUpdate?: boolean; 25 | }; 26 | 27 | const BlurView = forwardRef( 28 | ( 29 | { 30 | downsampleFactor, 31 | blurRadius, 32 | blurAmount = 10, 33 | blurType = 'dark', 34 | overlayColor, 35 | enabled, 36 | autoUpdate, 37 | children, 38 | style, 39 | ...rest 40 | }, 41 | ref 42 | ) => { 43 | useEffect(() => { 44 | DeviceEventEmitter.addListener('ReactNativeBlurError', (message) => { 45 | throw new Error(`[ReactNativeBlur]: ${message}`); 46 | }); 47 | 48 | return () => { 49 | DeviceEventEmitter.removeAllListeners('ReactNativeBlurError'); 50 | }; 51 | }, []); 52 | 53 | const getOverlayColor = () => { 54 | if (overlayColor != null) { 55 | return overlayColor; 56 | } 57 | 58 | return OVERLAY_COLORS[blurType] || OVERLAY_COLORS.dark; 59 | }; 60 | 61 | const getBlurRadius = () => { 62 | if (blurRadius != null) { 63 | if (blurRadius > 25) { 64 | throw new Error( 65 | `[ReactNativeBlur]: blurRadius cannot be greater than 25! (was: ${blurRadius})` 66 | ); 67 | } 68 | return blurRadius; 69 | } 70 | 71 | // iOS seems to use a slightly different blurring algorithm (or scale?). 72 | // Android blurRadius + downsampleFactor is approximately 80% of blurAmount. 73 | const equivalentBlurRadius = Math.round(blurAmount * 0.8); 74 | 75 | if (equivalentBlurRadius > 25) { 76 | return 25; 77 | } 78 | return equivalentBlurRadius; 79 | }; 80 | 81 | const getDownsampleFactor = () => { 82 | if (downsampleFactor != null) { 83 | return downsampleFactor; 84 | } 85 | 86 | return blurRadius; 87 | }; 88 | 89 | return ( 90 | 103 | {children} 104 | 105 | ); 106 | } 107 | ); 108 | 109 | const styles = StyleSheet.create<{ transparent: ViewStyle }>({ 110 | transparent: { backgroundColor: 'transparent' }, 111 | }); 112 | 113 | export default BlurView; 114 | -------------------------------------------------------------------------------- /src/components/BlurView.ios.tsx: -------------------------------------------------------------------------------- 1 | import React, { forwardRef } from 'react'; 2 | import { StyleSheet, ViewProps, ViewStyle, View } from 'react-native'; 3 | import NativeBlurView from '../fabric/BlurViewNativeComponent'; 4 | 5 | type BlurType = 6 | | 'dark' 7 | | 'light' 8 | | 'xlight' 9 | | 'prominent' 10 | | 'regular' 11 | | 'extraDark' 12 | | 'chromeMaterial' 13 | | 'material' 14 | | 'thickMaterial' 15 | | 'thinMaterial' 16 | | 'ultraThinMaterial' 17 | | 'chromeMaterialDark' 18 | | 'materialDark' 19 | | 'thickMaterialDark' 20 | | 'thinMaterialDark' 21 | | 'ultraThinMaterialDark' 22 | | 'chromeMaterialLight' 23 | | 'materialLight' 24 | | 'thickMaterialLight' 25 | | 'thinMaterialLight' 26 | | 'ultraThinMaterialLight'; 27 | 28 | export type BlurViewProps = ViewProps & { 29 | blurType?: BlurType; 30 | blurAmount?: number; 31 | reducedTransparencyFallbackColor?: string; 32 | }; 33 | 34 | const BlurView = forwardRef( 35 | ({ blurType = 'dark', blurAmount = 10, style, ...rest }, ref) => ( 36 | 43 | ) 44 | ); 45 | 46 | const styles = StyleSheet.create<{ transparent: ViewStyle }>({ 47 | transparent: { backgroundColor: 'transparent' }, 48 | }); 49 | 50 | export default BlurView; 51 | -------------------------------------------------------------------------------- /src/components/VibrancyView.android.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class VibrancyView extends React.Component { 4 | render() { 5 | console.error('VibrancyView is not implemented on Android'); 6 | return null; 7 | } 8 | } 9 | 10 | export default VibrancyView; 11 | -------------------------------------------------------------------------------- /src/components/VibrancyView.ios.tsx: -------------------------------------------------------------------------------- 1 | import React, { forwardRef } from 'react'; 2 | import { StyleSheet, ViewProps, ViewStyle } from 'react-native'; 3 | import NativeVibrancyView from '../fabric/VibrancyViewNativeComponent'; 4 | import type { BlurViewProps } from './BlurView.ios'; 5 | 6 | export type VibrancyViewProps = ViewProps & { 7 | blurType?: BlurViewProps['blurType']; 8 | blurAmount: number; 9 | reducedTransparencyFallbackColor?: string; 10 | }; 11 | 12 | const VibrancyView = forwardRef( 13 | ({ style, ...rest }, ref) => ( 14 | 19 | ) 20 | ); 21 | 22 | const styles = StyleSheet.create<{ transparent: ViewStyle }>({ 23 | transparent: { backgroundColor: 'transparent' }, 24 | }); 25 | 26 | export default VibrancyView; 27 | -------------------------------------------------------------------------------- /src/fabric/BlurViewNativeComponent.ts: -------------------------------------------------------------------------------- 1 | import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; 2 | import type { ViewProps, HostComponent, ColorValue } from 'react-native'; 3 | import type { 4 | WithDefault, 5 | Int32, 6 | } from 'react-native/Libraries/Types/CodegenTypes'; 7 | 8 | interface NativeProps extends ViewProps { 9 | blurType?: WithDefault< 10 | | 'dark' 11 | | 'light' 12 | | 'xlight' 13 | | 'prominent' 14 | | 'regular' 15 | | 'extraDark' 16 | | 'chromeMaterial' 17 | | 'material' 18 | | 'thickMaterial' 19 | | 'thinMaterial' 20 | | 'ultraThinMaterial' 21 | | 'chromeMaterialDark' 22 | | 'materialDark' 23 | | 'thickMaterialDark' 24 | | 'thinMaterialDark' 25 | | 'ultraThinMaterialDark' 26 | | 'chromeMaterialLight' 27 | | 'materialLight' 28 | | 'thickMaterialLight' 29 | | 'thinMaterialLight' 30 | | 'ultraThinMaterialLight', 31 | 'dark' 32 | >; 33 | blurAmount?: WithDefault; 34 | reducedTransparencyFallbackColor?: ColorValue; 35 | } 36 | 37 | export default codegenNativeComponent('BlurView', { 38 | excludedPlatforms: ['android'], 39 | }) as HostComponent; 40 | -------------------------------------------------------------------------------- /src/fabric/BlurViewNativeComponentAndroid.ts: -------------------------------------------------------------------------------- 1 | import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; 2 | import type { ViewProps, HostComponent, ColorValue } from 'react-native'; 3 | import type { 4 | WithDefault, 5 | Int32, 6 | } from 'react-native/Libraries/Types/CodegenTypes'; 7 | 8 | interface NativeProps extends ViewProps { 9 | blurAmount?: WithDefault; 10 | blurType?: WithDefault<'dark' | 'light' | 'xlight', 'dark'>; 11 | blurRadius?: Int32; 12 | downsampleFactor?: Int32; 13 | overlayColor?: ColorValue; 14 | enabled?: boolean; 15 | autoUpdate?: boolean; 16 | } 17 | 18 | export default codegenNativeComponent('AndroidBlurView', { 19 | excludedPlatforms: ['iOS'], 20 | }) as HostComponent; 21 | -------------------------------------------------------------------------------- /src/fabric/VibrancyViewNativeComponent.ts: -------------------------------------------------------------------------------- 1 | import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; 2 | import type { ViewProps, HostComponent, ColorValue } from 'react-native'; 3 | import type { 4 | WithDefault, 5 | Int32, 6 | } from 'react-native/Libraries/Types/CodegenTypes'; 7 | 8 | interface NativeProps extends ViewProps { 9 | blurType?: WithDefault< 10 | | 'dark' 11 | | 'light' 12 | | 'xlight' 13 | | 'prominent' 14 | | 'regular' 15 | | 'extraDark' 16 | | 'chromeMaterial' 17 | | 'material' 18 | | 'thickMaterial' 19 | | 'thinMaterial' 20 | | 'ultraThinMaterial' 21 | | 'chromeMaterialDark' 22 | | 'materialDark' 23 | | 'thickMaterialDark' 24 | | 'thinMaterialDark' 25 | | 'ultraThinMaterialDark' 26 | | 'chromeMaterialLight' 27 | | 'materialLight' 28 | | 'thickMaterialLight' 29 | | 'thinMaterialLight' 30 | | 'ultraThinMaterialLight', 31 | 'dark' 32 | >; 33 | blurAmount?: WithDefault; 34 | reducedTransparencyFallbackColor?: ColorValue; 35 | } 36 | 37 | export default codegenNativeComponent('VibrancyView', { 38 | excludedPlatforms: ['android'], 39 | }) as HostComponent; 40 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import BlurViewUntyped from './components/BlurView'; 2 | import VibrancyViewUntyped from './components/VibrancyView'; 3 | import type { View } from 'react-native' 4 | 5 | import type { BlurViewProps as BlurViewPropsIOS } from './components/BlurView.ios'; 6 | import type { BlurViewProps as BlurViewPropsAndroid } from './components/BlurView.android'; 7 | import type { VibrancyViewProps as VibrancyViewPropsIOS } from './components/VibrancyView.ios'; 8 | 9 | type BlurViewProps = BlurViewPropsIOS | BlurViewPropsAndroid; 10 | type VibrancyViewProps = VibrancyViewPropsIOS; 11 | 12 | const BlurView = BlurViewUntyped as React.ForwardRefExoticComponent> 13 | const VibrancyView = VibrancyViewUntyped as React.ForwardRefExoticComponent> 14 | 15 | export { BlurView, VibrancyView }; 16 | export type { BlurViewProps, VibrancyViewProps }; -------------------------------------------------------------------------------- /tsconfig.build.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "extends": "./tsconfig", 4 | "exclude": ["example"] 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "./", 4 | "paths": { 5 | "@react-native-community/blur": ["./src/index"] 6 | }, 7 | "allowUnreachableCode": false, 8 | "allowUnusedLabels": false, 9 | "esModuleInterop": true, 10 | "importsNotUsedAsValues": "error", 11 | "forceConsistentCasingInFileNames": true, 12 | "jsx": "react", 13 | "lib": ["esnext"], 14 | "module": "esnext", 15 | "moduleResolution": "node", 16 | "moduleSuffixes": [".ios", ".android", ".native", ""], 17 | "noFallthroughCasesInSwitch": true, 18 | "noImplicitReturns": true, 19 | "noImplicitUseStrict": false, 20 | "noStrictGenericChecks": false, 21 | "noUncheckedIndexedAccess": true, 22 | "noUnusedLocals": true, 23 | "noUnusedParameters": true, 24 | "resolveJsonModule": true, 25 | "skipLibCheck": true, 26 | "strict": true, 27 | "target": "esnext" 28 | } 29 | } 30 | --------------------------------------------------------------------------------