react-native-blur
react-native-blur copied to clipboard
Kureev
androidx support
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.
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
We're being forced to use androidx by some other library that we use that dropped support for the support lib (androidx's predecessor).
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.
facing the same issue. are there any plans to update this lib to import androidX? RN 0.60 + comes with "android.useAndroidX=true"
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 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 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 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?
@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.
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.)
@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
Any dependency that uses androidX can be reversed to support library by using jetifier package, vice versa works too.
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/"
]
}
}
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.
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