search

Kureev / react-native-blur

React Native Blur component
MIT License
3.74k stars 554 forks source link

androidx support #310

Open jgreen210 opened 5 years ago

jgreen210 commented 5 years ago

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.

jgreen210 commented 5 years ago

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 commented 5 years ago

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

wkmcyz commented 5 years ago

+1

atopilskii commented 5 years ago

+1

iagormoraes commented 5 years ago

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.

Nirony commented 5 years ago

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

Nirony commented 5 years ago

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

phips28 commented 5 years ago

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

Davidjin0418 commented 5 years ago

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,

Nirony commented 5 years ago

@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.

Davidjin0418 commented 5 years ago

@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.

Nirony commented 5 years ago

@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

Davidjin0418 commented 5 years ago

@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.

praveens96 commented 5 years ago

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.)

Nirony commented 5 years ago

@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

iagormoraes commented 4 years ago

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

soroushm commented 4 years ago

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/"
    ]
  }
}
anshul-kai commented 4 years ago

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.

soroushm commented 4 years ago

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