React-native-blur: androidx support

Created on 29 Mar 2019  路  19Comments  路  Source: Kureev/react-native-blur

If we enable androidx in our app using:

android.useAndroidX=true

The blur library is making our build fail like this:

node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurringView.java:10: error: package android.support.v8.renderscript does not exist

> Task :@react-native-community_blur:compileDebugJavaWithJavac
import android.support.v8.renderscript.Allocation;
                                      ^
node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurringView.java:11: error: package android.support.v8.renderscript does not exist
import android.support.v8.renderscript.Element;
                                      ^
node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurringView.java:12: error: package android.support.v8.renderscript does not exist
import android.support.v8.renderscript.RenderScript;
                                      ^
node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurringView.java:13: error: package android.support.v8.renderscript does not exist
import android.support.v8.renderscript.ScriptIntrinsicBlur;
                                      ^
node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurringView.java:207: error: cannot find symbol
    private RenderScript mRenderScript;
            ^
  symbol:   class RenderScript
  location: class BlurringView
node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurringView.java:208: error: cannot find symbol
    private ScriptIntrinsicBlur mBlurScript;
            ^
  symbol:   class ScriptIntrinsicBlur
  location: class BlurringView
node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurringView.java:209: error: cannot find symbol
    private Allocation mBlurInput, mBlurOutput;
            ^
  symbol:   class Allocation
  location: class BlurringView
node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurringView.java:110: error: cannot find symbol
        mRenderScript = RenderScript.create(context);
                        ^
  symbol:   variable RenderScript
  location: class BlurringView
node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurringView.java:111: error: cannot find symbol
        mBlurScript = ScriptIntrinsicBlur.create(mRenderScript, Element.U8_4(mRenderScript));
                                                                ^
  symbol:   variable Element
  location: class BlurringView
node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurringView.java:111: error: cannot find symbol
        mBlurScript = ScriptIntrinsicBlur.create(mRenderScript, Element.U8_4(mRenderScript));
                      ^
  symbol:   variable ScriptIntrinsicBlur
  location: class BlurringView
node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurringView.java:153: error: package Allocation does not exist
                    Allocation.MipmapControl.MIPMAP_NONE, Allocation.USAGE_SCRIPT);
                              ^
node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurringView.java:153: error: cannot find symbol
                    Allocation.MipmapControl.MIPMAP_NONE, Allocation.USAGE_SCRIPT);
                                                          ^
  symbol:   variable Allocation
  location: class BlurringView
node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurringView.java:152: error: cannot find symbol
            mBlurInput = Allocation.createFromBitmap(mRenderScript, mBitmapToBlur,
                         ^
  symbol:   variable Allocation
  location: class BlurringView
node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurringView.java:154: error: cannot find symbol
            mBlurOutput = Allocation.createTyped(mRenderScript, mBlurInput.getType());
                          ^
  symbol:   variable Allocation
  location: class BlurringView

14 errors

The java is present as files inside node_modules/ not an aar, so jetifier is not able to automatically fix up the code, despite being enabled with:

android.enableJetifier=true

We're using @react-native-community/blur 3.3.0.

picture jgreen210
👍22

Most helpful comment

Download the dependency as local doesn't work for me.

What I did was in BlurringView.java, Replacing android.support.v8.renderscript with android.renderscript

import android.support.v8.renderscript.Allocation;
import android.support.v8.renderscript.Element;
import android.support.v8.renderscript.RenderScript;
import android.support.v8.renderscript.ScriptIntrinsicBlur;

with 

import android.renderscript.Allocation;
import android.renderscript.Element;
import android.renderscript.RenderScript;
import android.renderscript.ScriptIntrinsicBlur;

I'm now using Jetifier to convert the packages. And there has been discussion regarding this library. So I hope soon simply by running Jetifier will solve the problem,

picture Davidjin0418 on 20 Jun 2019
👍21 🚀2 👎1

All 19 comments

We have the same problem with another react-native library, so maybe the fix could be the same too: https://github.com/react-native-community/lottie-react-native/issues/443#issuecomment-478081871

jgreen210 picture jgreen210 on 29 Mar 2019

We're being forced to use androidx by some other library that we use that dropped support for the support lib (androidx's predecessor).

jgreen210 picture jgreen210 on 29 Mar 2019

+1

wkmcyz picture wkmcyz on 10 Apr 2019

+1

atopilskii picture atopilskii on 15 Apr 2019

A workaround for now is to download the dependency as local, and import it in your package.json as:

... "react-native-blur": "file:./src/modules/react-native-blur.tar.gz", ...

But before you do that, you can refactor from android studio IDE that it will replace all imports from support lib to androidx.

iagormoraes picture iagormoraes on 8 May 2019

facing the same issue.
are there any plans to update this lib to import androidX?
RN 0.60 + comes with "android.useAndroidX=true"

Nirony picture Nirony on 19 Jun 2019

@iagorm how did you manage the refactor in android studio?

Nirony picture Nirony on 19 Jun 2019

@Nirony Android Studio -> Refactor -> Migrate to AndroidX

phips28 picture phips28 on 19 Jun 2019
👍2

Download the dependency as local doesn't work for me.

What I did was in BlurringView.java, Replacing android.support.v8.renderscript with android.renderscript

import android.support.v8.renderscript.Allocation;
import android.support.v8.renderscript.Element;
import android.support.v8.renderscript.RenderScript;
import android.support.v8.renderscript.ScriptIntrinsicBlur;

with 

import android.renderscript.Allocation;
import android.renderscript.Element;
import android.renderscript.RenderScript;
import android.renderscript.ScriptIntrinsicBlur;

I'm now using Jetifier to convert the packages. And there has been discussion regarding this library. So I hope soon simply by running Jetifier will solve the problem,

Davidjin0418 picture Davidjin0418 on 20 Jun 2019
👍21 🚀2 👎1

@Davidjin0418 Thx, That was the fix.
Is there a way to merge this change into an upcoming version - it's not the way to go to change manually a node module. also, I'm using app center so it's a bit of a problem for me.

Nirony picture Nirony on 20 Jun 2019

@Nirony I noticed Jetifier has been updated to v1.1.0, which includes the conversion for renderscript. So I guess no need to do that manually.

Regarding the app center, for now I'm running a post-clone build script to do the work. 

#!/usr/bin/env bash
npm i -g npx
npm i jetifier && npx jetify

So the Jetifier will run after cloning my app.

Davidjin0418 picture Davidjin0418 on 20 Jun 2019
👍9 🚀4 ❤4 🎉3

@Davidjin0418 at first I did give the jetifier a go, but as I noticed that many modules did not get updates I started to make the change myself, using - https://gist.github.com/janicduplessis/df9b5e3c2b2e23bbae713255bdb99f3c

Thanks a lot for the post-clone script, i'll give it a try.
Currently, I'm a having a really weird issue - app build alright but bundler fails with several errors.
the stack trace of those errors leads me to react-native-vector-icons's index.js that is just requiring react native.
I know it's not quite the place but maybe you stumbled upon it as well?
Screen Shot 2019-06-20 at 12 26 14

Nirony picture Nirony on 20 Jun 2019

@Nirony Sorry not sure about this one. react-native-vector-icons works fine in my app.
Maybe it is related to the version? The version I'm using is 0.59.9 for RN and 6.5.0 for react-native-vector-icons.

Davidjin0418 picture Davidjin0418 on 21 Jun 2019

getting below error message when i enabled jetifier.
this is stooping the work. earliest help would be appreciated.

Execution failed for task ':app:preDebugBuild'.

Could not resolve all files for configuration ':app:debugCompileClasspath'.
Failed to transform artifact 'fingerprintidentify.aar (com.wei.android.lib:fingerprintidentify:1.2.1)' to match attributes {artifactType=android-manifest}.
Execution failed for JetifyTransform: C:\xxxxx.gradle\caches\modules-2\files-2.1\com.wei.android.lib\fingerprintidentify\1.2.1\4d29dc54b0145ba76535b98cea61a4dc4a714fc4\fingerprintidentify-1.2.1.aar.
Failed to transform 'C:\xxxxx.gradle\caches\modules-2\files-2.1\com.wei.android.lib\fingerprintidentify\1.2.1\4d29dc54b0145ba76535b98cea61a4dc4a714fc4\fingerprintidentify-1.2.1.aar' using Jetifier. Reason: null. (Run with --stacktrace for more details.)

praveens96 picture praveens96 on 24 Jun 2019

@Davidjin0418 thx finally found it... somehow I got a duplicated dev dependency - "babel-core": "^7.0.0-bridge.0", after removing it everything is working again.

@praveens96 I'm not sure but by the looks of it, try to clear gradle cache before running jetifier.
if it's not helpful try to manually change the imports where jetifier failed - u can use https://gist.github.com/janicduplessis/df9b5e3c2b2e23bbae713255bdb99f3c

Nirony picture Nirony on 24 Jun 2019

Any dependency that uses androidX can be reversed to support library by using jetifier package, vice versa works too.

iagormoraes picture iagormoraes on 14 Jul 2019
👍3

Still have issue

Bug

gradle.properties

android.useAndroidX=true
android.enableJetifier=true

Actual Error

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081
/Users/silverstar/Sites/mobiletrader/node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurViewManager.java:53: error: cannot find symbol
        if (context != null && context.getCurrentActivity() != null) {
                                      ^
  symbol:   method getCurrentActivity()
  location: variable context of type ThemedReactContext
/Users/silverstar/Sites/mobiletrader/node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurViewManager.java:54: error: cannot find symbol
          View viewToBlur = context.getCurrentActivity().findViewById(viewRef);
                                   ^
  symbol:   method getCurrentActivity()
  location: variable context of type ThemedReactContext
Note: /Users/silverstar/Sites/mobiletrader/node_modules/@react-native-community/blur/android/src/main/java/com/cmcewen/blurview/BlurringView.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
2 errors

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':@react-native-community_blur:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* 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

BUILD FAILED in 26s

    at checkExecSyncError (child_process.js:629:11)
    at execFileSync (child_process.js:647:13)
    at runOnAllDevices (/Users/silverstar/Sites/mobiletrader/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/runOnAllDevices.js:74:39)
    at buildAndRun (/Users/silverstar/Sites/mobiletrader/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:158:41)
    at then.result (/Users/silverstar/Sites/mobiletrader/node_modules/@react-native-community/cli-platform-android/build/commands/runAndroid/index.js:125:12)
    at process._tickCallback (internal/process/next_tick.js:68:7)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Environment info

{
  "name": "******",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "jest --watch",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.6.2",
    "@react-native-community/blur": "^3.3.1",
    "@types/react-native-vector-icons": "^6.4.4",
    "@typescript-eslint/parser": "^2.5.0",
    "axios": "^0.19.0",
    "camelize": "^1.0.0",
    "color": "^3.1.2",
    "i18next": "^17.0.11",
    "moxios": "^0.4.0",
    "qs": "^6.7.0",
    "react": "16.8.6",
    "react-i18next": "^10.12.2",
    "react-native": "0.60.4",
    "react-native-device-info": "^2.3.2",
    "react-native-firebase": "^5.5.6",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-modal": "^11.3.1",
    "react-native-paint": "^1.1.0",
    "react-native-reanimated": "^1.1.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-swiper": "^1.5.14",
    "react-native-tab-view": "^2.10.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-webview": "^7.5.1",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.9.3",
    "react-navigation-tabs": "^2.5.5",
    "react-redux": "^7.1.0",
    "redux": "^4.0.4",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/runtime": "^7.5.5",
    "@types/enzyme": "^3.10.3",
    "@types/enzyme-adapter-react-16": "^1.0.5",
    "@types/jest": "^24.0.16",
    "@types/node": "^12.6.9",
    "@types/qs": "^6.5.3",
    "@types/react": "^16.8.23",
    "@types/react-native": "^0.60.2",
    "@types/react-redux": "^7.1.1",
    "@types/react-test-renderer": "^16.8.3",
    "@types/redux-logger": "^3.0.7",
    "@typescript-eslint/eslint-plugin": "^2.5.0",
    "babel-eslint": "^10.0.2",
    "babel-jest": "^24.8.0",
    "babel-plugin-module-resolver": "^3.2.0",
    "babel-plugin-root-import": "^6.4.1",
    "babel-preset-react-native": "^4.0.1",
    "chai": "^4.2.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "enzyme-to-json": "^3.4.0",
    "eslint": "^6.1.0",
    "eslint-config-prettier": "^6.5.0",
    "eslint-config-react-app": "^4.0.1",
    "eslint-loader": "^2.2.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-react": "^7.14.3",
    "eslint-plugin-react-hooks": "^1.6.1",
    "husky": "^3.0.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.8.0",
    "jest-environment-enzyme": "^7.1.0",
    "jest-enzyme": "^7.1.0",
    "jest-fetch-mock": "^2.1.2",
    "jest-react-native": "^18.0.0",
    "jetifier": "^1.6.4",
    "metro-react-native-babel-preset": "^0.55.0",
    "prettier": "^1.19.1",
    "pretty-quick": "^2.0.0",
    "react-dom": "^16.9.0",
    "react-native-dotenv": "^0.2.0",
    "react-native-mock": "^0.3.1",
    "react-native-mock-render": "^0.1.5",
    "react-test-renderer": "16.8.6",
    "redux-logger": "^3.0.6",
    "ts-jest": "^24.0.2",
    "typescript": "^3.7.0-beta"
  },
  "jest": {
    "setupFiles": [
      "jest.config.js"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },
  "rnpm": {
    "assets": [
      "./assets/fonts/"
    ]
  }
}
soroushm picture soroushm on 25 Nov 2019

We need the latest code released to npm. The only way to use this with react-native 0.60 is to use the master branch for now.

a-koka picture a-koka on 6 Dec 2019

We need the latest code released to npm. The only way to use this with react-native 0.60 is to use the master branch for now.

I used in react-native 60 and its gonna be fixed with add jetifier

remove build folder and Gradle then install again

soroushm picture soroushm on 6 Dec 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

renanmav picture renanmav  路  4Comments
minuitagency picture minuitagency  路  5Comments
tbolt picture tbolt  路  3Comments
leonskim picture leonskim  路  5Comments
brumm picture brumm  路  7Comments