Invariant Violation: requireNativeComponent: "AndroidBlurView" was not found in the UI manager - version `4.3.0`

[alexandre-eliot]

Environment

• Expo 45.0.8
• Running on Android 11
• OS OxygenOS 11.1.2.2
• @react-native-community/blur version 4.3.0

How

Trying to render a BlurView

Error

[Rohit22-dev]

I have the same problem. ( Invariant Violation: requireNativeComponent: "AndroidBlurView" was not found in the UI manager )

[VIVEK-SUTHAR]

I am having the same problem

[fullStackRyan]

I am experencing this issue too and I am new to React-Native (EXPO). Any help much appreciated :)

[MaxiTroy]

I have the same problem, have you found a solution yet?

[Parveshdhull]

In MainApplication.java update these changes to fix the issue

1. import com.reactnativecommunity.blurview.BlurViewPackage;
2. In getPackages function add packages.add(new BlurViewPackage()); (something like this)

[chrisdugne]

thanks @Parveshdhull , unfortunately it's not enough:

 error: package com.reactnativecommunity.blurview does not exist

I checked in my node_modules and the definition is correct though

package com.reactnativecommunity.blurview;
...
public class BlurViewPackage implements ReactPackage {

[Parveshdhull]

Hi @chrisdugne, sorry I forgot to mention few changes. But this is original PR. https://github.com/status-im/status-mobile/pull/13663/files

As, I can see we also need to modify android/app/build.gradle and android/settings.gradle (skip changes for nix/*, that was project specefic).

NOTE: At the time of PR I was using old version of react-native-blur and needed to add

import com.cmcewen.blurview.BlurViewPackage;

but in current version we need to add

import com.reactnativecommunity.blurview.BlurViewPackage;

[fullStackRyan]

@Parveshdhull Are you able to make the above change. I would do it myself but I wouldn't have the knowledge.

[Parveshdhull]

Hi @fullStackRyan, You have to make these changes to your project.

[fullStackRyan]

@Parveshdhull Thanks for the quick response.

import "com.reactnativecommunity.blurview.BlurViewPackage"

I've added the above line to top of my file post.js

import { useNavigation } from "@react-navigation/native";
import { shortenUserName } from "../../utils/shortenUserName";
import { Icon } from "@rneui/themed";
import "com.reactnativecommunity.blurview.BlurViewPackage";

"@react-native-community/blur": "^4.3.0", I'm using the above version in my package.json

I'm getting the below errors

Any help would be greatly appreciated.

[Parveshdhull]

Hi, you are making changes in wrong file.

You have to modify these files.

• android/app/build.gradle,
• android/app/src/main/java/im/status/ethereum/MainApplication.java,
• android/build.gradle,
• android/settings.gradle

Please check out PR from comment for reference.

[fullStackRyan]

Thanks for the above.

I'm struggling to find the above routes in my expo project and have checked my node_module under @react-native-community but can't see the routes there either.

I have changed my package.json to have

"@react-native-community/blur": "git+https://github.com/Kureev/react-native-blur#refs/tags/v3.6.1",

[Parveshdhull]

You don't need to change @react-native-community/blur. These changes should be in your project.

I didn't tried expo yet, so not familiar with directory structure. But from expo example: https://github.com/expo/examples/tree/master/with-dev-client It looks like expo also uses same directory structure.

[fullStackRyan]

Cheers for the information @Parveshdhull

I did a bit of research and it seems EXPO doesn't include the ios or Android folders anymore unless you run:

npx expo run:ios
npx expo run:android

Alternatively you can eject from expo.

For anyone else reading this see below links:

• https://docs.expo.dev/workflow/customizing/
• https://stackoverflow.com/questions/44270504/react-native-ios-and-android-folders-not-present

I will try to edit the Android files after work tonight.

Thanks again.

[fullStackRyan]

It's sadly not the same project structure file setup with npx expo run:android 😭

[sanjaysargam]

I am also getting same error PLease help me to resolve this

[antoniuschan99]

I tried declaring it like this

import { BlurView } from "@react-native-community/blur"; instead of import { BlurView } from "react-native-blur";

[Yugank-mialo]

Hey @Parveshdhull, Any solution for react native expo how can i tackel this issue is expo??

[Parveshdhull]

Hi @Yugank-mialo, Sorry I don't have any experience with expo myself. So, don't know exact steps to make this library work.

You can try fullStackRyan's suggestion (npx expo run: android )to get the Android folder and make the changes mentioned in https://github.com/Kureev/react-native-blur/issues/517#issuecomment-1400144792 and rebuild the app. Maybe this will work for you 🤞 (Don't forget to backup you project)

Note:

npx expo run:android requires Android Studio and the Android SDK to be installed. See how to setup environment.

Also you can checkout, expo's docs on how to add custom native code.

[sampriti026]

Hey @Parveshdhull, thanks for the comments, it got my app working. Curious how did you figure out this would lead to work - from a newbie to more experienced developer. :))

[Parveshdhull]

Hi @sampriti026, Thank you for the kind words.

I don't remember exactly, as it's been long time. But I think I used more of hit and trial method, by checking uses of other libraries in project and comparing what files were missing for this library.

[cwaidelich]

I am having problems fixing this, as the files created by npx expo run:android and the file structure, is not the same to the github mentioned.

Followed these exact same steps like this:

1. npx expo run:android
2. go to build.grade /app, find the dependencies part, add the line: implementation project(':react-native-blur') at the end of the dependency part
3. go to src/main/java/com/anonymous/demo/MainApplication.kt -> add import com.reactnativecommunity.blurview.BlurViewPackage; before "class MainApplication : Application(), ReactApplication {" starts
4. go to android/build.gradle, add jcenter() under allprojects.repositories, before mavenCentral()
5. go to android/settings.gradle add following lines at the end:

include ':react-native-blur'
project(':react-native-blur').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/blur/android')

Then I ran npx expo run:android again.

and got this error:

> Task :react-native-community_blur:packageDebugResources FAILED

FAILURE: Build failed with an exception.

* What went wrong:
A problem was found with the configuration of task ':react-native-community_blur:packageDebugResources' (type 'MergeResources').
  - Gradle detected a problem with the following location: '/home/cw/Git/ReactNativeTests/DemoTab/node_modules/@react-native-community/blur/android/build/generated/res/resValues/debug'.
    
    Reason: Task ':react-native-community_blur:packageDebugResources' uses this output of task ':react-native-blur:generateDebugResValues' without declaring an explicit or implicit dependency. This can lead to incorrect results being produced, depending on what order the tasks are executed.
    
    Possible solutions:
      1. Declare task ':react-native-blur:generateDebugResValues' as an input of ':react-native-community_blur:packageDebugResources'.
      2. Declare an explicit dependency on ':react-native-blur:generateDebugResValues' from ':react-native-community_blur:packageDebugResources' using Task#dependsOn.
      3. Declare an explicit dependency on ':react-native-blur:generateDebugResValues' from ':react-native-community_blur:packageDebugResources' using Task#mustRunAfter.
    
    For more information, please refer to https://docs.gradle.org/8.3/userguide/validation_problems.html#implicit_dependency in the Gradle documentation.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at https://help.gradle.org.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

For more on this, please refer to https://docs.gradle.org/8.3/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation.

java --version: 17.0.10 "@react-native-community/blur": "^4.4.0",

I don't think that the above proposed solution is accurate in todays time.

Pls note that in some cases, expo ernders the blur effect correctly, but throws the error when restarting the server. Kinda weird.

Did somebody made this run with expo? @Parveshdhull, any idea? Thx!

EDIT: also tried downgrading @react-native-community/blur to git+https://github.com/Kureev/react-native-blur#refs/tags/v3.6.1

[santi-andracchi]

This issue has been open for quite some time and I could not solve it. I have decided to go with the Expo option instead:

npx expo install expo-blur