[ANDROID] Unfortunately "App" has stopped

[Fantasim]

Hi,

i'm currently trying to implement react-native-blur on my android app but at start app crash.

I applied the steps of android installation in the README,

android/app/build.gradle

repositories {
    maven { url 'https://github.com/500px/500px-android-blur/raw/master/releases/' }
}

buildscript {
    repositories {
        maven { url 'https://github.com/500px/500px-android-blur/raw/master/releases/' }
    }
    dependencies {
        classpath 'com.fivehundredpx:blurringview:1.0.0'
    }
}

index.android.js

import {BlurView} from 'react-native-blur';

export default class TryBlur extends Component {
  constructor() {
    super()
    this.state = {
      viewRef: 0,
    }
  }

  imageLoaded() {
    this.setState({viewRef: findNodeHandle(this.refs.backgroundImage)})
  }

  render() {
    return (
      <Image
        source={require('./bgimage.jpeg')}
        style={styles.container}
        ref={'backgroundImage'}
        onLoadEnd={this.imageLoaded.bind(this)}>
        <BlurView
          blurRadius={15}
          downsampleFactor={5}
          overlayColor={'rgba(255, 255, 255, .25)'}
          style={styles.blurView}
          viewRef={this.state.viewRef}/>
        <Text style={styles.welcome}>{`Blur component`}</Text>
      </Image>
    );
  }
}

Could you help me to fix it ?

react-native version : 0.40 react-native-blur version : 2.0.0

[bakhansen]

I may have a similar problem, running "react-native": "^0.41.2" and "react-native-blur": "^2.0.0"

FATAL EXCEPTION: main
Process: com.x, PID: 5288
java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v8/renderscript/RenderScript;
    at com.fivehundredpx.android.blur.BlurringView.initializeRenderScript(BlurringView.java:98)
    at com.fivehundredpx.android.blur.BlurringView.<init>(BlurringView.java:37)
    at com.fivehundredpx.android.blur.BlurringView.<init>(BlurringView.java:26)
    at com.cmcewen.blurview.BlurViewManager.createViewInstance(BlurViewManager.java:24)
    at com.cmcewen.blurview.BlurViewManager.createViewInstance(BlurViewManager.java:11)
    at com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:46)
    at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:218)
    at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:148)
    at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:890)
    at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:863)
    at com.facebook.react.uimanager.GuardedChoreographerFrameCallback.doFrame(GuardedChoreographerFrameCallback.java:32)
    at com.facebook.react.uimanager.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:131)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:856)
    at android.view.Choreographer.doCallbacks(Choreographer.java:670)
    at android.view.Choreographer.doFrame(Choreographer.java:603)
    at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:844)
    at android.os.Handler.handleCallback(Handler.java:746)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:148)
    at android.app.ActivityThread.main(ActivityThread.java:5443)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:728)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:618)
Caused by: java.lang.ClassNotFoundException: Didn't find class "android.support.v8.renderscript.RenderScript" on path: DexPathList[[zip file "/data/app/com.x-2/base.apk"],nativeLibraryDirectories=[/data/app/com.x-2/lib/arm, /data/app/com.x-2/base.apk!/lib/armeabi-v7a, /vendor/lib, /system/lib]]
    at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:56)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:511)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:469)
    ... 23 more
    Suppressed: java.lang.ClassNotFoundException: android.support.v8.renderscript.RenderScript
        at java.lang.Class.classForName(Native Method)
        at java.lang.BootClassLoader.findClass(ClassLoader.java:781)
        at java.lang.BootClassLoader.loadClass(ClassLoader.java:841)
        at java.lang.ClassLoader.loadClass(ClassLoader.java:504)
        ... 24 more
    Caused by: java.lang.NoClassDefFoundError: Class not found using the boot class loader; no stack trace available

I'm able to get it to work in debug mode by adding:

android/app/build.gradle

android {
    ...

    defaultConfig {
        ...
        renderscriptTargetApi 21
        renderscriptSupportModeEnabled true
    }
...
}

and changing in android/build.gradle from: classpath 'com.android.tools.build:gradle:1.3.1' to classpath 'com.android.tools.build:gradle:1.5.0'

but then when assembling release I get:

Successfully started process 'command '/.../Android/Sdk/build-tools/23.0.1/aapt''
Unknown source file : /.../android/app/build/intermediates/res/merged/release/drawable-xxhdpi/node_modules_reactnative_libraries_customcomponents_navigationexperimental_assets_backicon.png: error: Duplicate file.

Unknown source file : /.../android/app/build/intermediates/res/merged/release/drawable-xxhdpi-v4/node_modules_reactnative_libraries_customcomponents_navigationexperimental_assets_backicon.png: Original is here. The version qualifier may be implied.

[Kureev]

I also experience the same problem. Quite recently I tried to re-assemble examples using version 2.*, but got stuck with exactly this stack trace. Waiting for input from @satya164 (as far as he knows more about Android than me). Maybe @cmcewen can help as well.

[FullstackJack]

Was getting the same unexpected quit for components using react-native-blur. It seems a critical step was removed from the Android Getting Started section. RenderScript is still used by BlurringView and needs to be included in android/app/build.gradle.

Here is the error message in logcat:

02-15 11:58:10.368 19219 19219 E AndroidRuntime: FATAL EXCEPTION: main
02-15 11:58:10.368 19219 19219 E AndroidRuntime: Process: com.starterkit, PID: 19219
02-15 11:58:10.368 19219 19219 E AndroidRuntime: java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v8/renderscript/RenderSc
ript;
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at com.fivehundredpx.android.blur.BlurringView.initializeRenderScript(BlurringView.java:
98)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at com.fivehundredpx.android.blur.BlurringView.<init>(BlurringView.java:37)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at com.fivehundredpx.android.blur.BlurringView.<init>(BlurringView.java:26)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at com.cmcewen.blurview.BlurViewManager.createViewInstance(BlurViewManager.java:24)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at com.cmcewen.blurview.BlurViewManager.createViewInstance(BlurViewManager.java:11)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:46)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarch
yManager.java:218)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewO
perationQueue.java:148)

02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPen
dingNonBatchedOperations(UIViewOperationQueue.java:890)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuar
ded(UIViewOperationQueue.java:863)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at com.facebook.react.uimanager.GuardedChoreographerFrameCallback.doFrame(GuardedChoreog
rapherFrameCallback.java:32)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at com.facebook.react.uimanager.ReactChoreographer$ReactChoreographerDispatcher.doFrame(
ReactChoreographer.java:131)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:918)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at android.view.Choreographer.doCallbacks(Choreographer.java:695)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at android.view.Choreographer.doFrame(Choreographer.java:628)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:906)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at android.os.Handler.handleCallback(Handler.java:739)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at android.os.Handler.dispatchMessage(Handler.java:95)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at android.os.Looper.loop(Looper.java:158)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at android.app.ActivityThread.main(ActivityThread.java:7224)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at java.lang.reflect.Method.invoke(Native Method)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1230)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1120)
02-15 11:58:10.368 19219 19219 E AndroidRuntime: Caused by: java.lang.ClassNotFoundException: Didn't find class "android.support.v8.renderscript
.RenderScript" on path: DexPathList[[zip file "/data/app/com.starterkit-1/base.apk"],nativeLibraryDirectories=[/data/app/com.starterkit-1/lib/ar
m, /data/app/com.starterkit-1/base.apk!/lib/armeabi-v7a, /vendor/lib, /system/lib]]
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:56)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at java.lang.ClassLoader.loadClass(ClassLoader.java:511)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        at java.lang.ClassLoader.loadClass(ClassLoader.java:469)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        ... 23 more
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        Suppressed: java.lang.ClassNotFoundException: android.support.v8.renderscript.RenderScri
pt
02-15 11:58:10.368 19219 19219 E AndroidRuntime:                at java.lang.Class.classForName(Native Method)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:                at java.lang.BootClassLoader.findClass(ClassLoader.java:781)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:                at java.lang.BootClassLoader.loadClass(ClassLoader.java:841)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:                at java.lang.ClassLoader.loadClass(ClassLoader.java:504)
02-15 11:58:10.368 19219 19219 E AndroidRuntime:                ... 24 more
02-15 11:58:10.368 19219 19219 E AndroidRuntime:        Caused by: java.lang.NoClassDefFoundError: Class not found using the boot class loader;

Mix the following into your build.gradle:

android
    ...
    defaultConfig {
        renderscriptTargetApi 19
        renderscriptSupportModeEnabled true
        ...

Albeit, the view does not blur, but that is my issue of not implementing a custom component.android.js. At least the view does not cause the app to crash.

[FullstackJack]

I also upgraded my Android Gradle Plugin to 1.5.0 in android/build.gradle:

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.5.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

[Fantasim]

any solution ?

[FullstackJack]

Yes, solution is to add RenderScript config to Gradle. It needs to be compiled in.

[Kureev]

@FullstackJack can you elaborate, please? I'd like to close this bug asap, but my Android skills sucks.

[bakhansen]

@FullstackJack does your setup also work for assembleRelease?

in android/app/build.gradle- android.defaultConfig, respectively

renderscriptTargetApi 19
renderscriptSupportModeEnabled true

and

renderscriptTargetApi 21
renderscriptSupportModeEnabled true

and android/build.gradle - buildscript.dependencies: classpath 'com.android.tools.build:gradle:1.5.0'

I still get this error:

(...)

Successfully started process 'command '/(...)/Android/Sdk/build-tools/23.0.1/aapt''
Unknown source file : /(...)/(...)/android/app/build/intermediates/res/merged/release/drawable-xxhdpi/node_modules_reactnative_libraries_customcomponents_navigationexperimental_assets_backicon.png: error: Duplicate file.

Unknown source file : /(...)/(...)/android/app/build/intermediates/res/merged/release/drawable-xxhdpi-v4/node_modules_reactnative_libraries_customcomponents_navigationexperimental_assets_backicon.png: Original is here. The version qualifier may be implied.

:app:processReleaseResources FAILED
:app:processReleaseResources (Thread[main,5,main]) completed. Took 0.168 secs.

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processReleaseResources'.
> com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command '/(...)/Android/Sdk/build-tools/23.0.1/aapt'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --debug option to get more log output.

BUILD FAILED

[neel132-zz]

Any estimation to fix this bug ?

[Kureev]

I'll merge a PR as soon as it'll be there :)

[junioramilson]

+1

[tuvshinbatgeru]

+1

[Kureev]

Guys, +1 doesn't really help the situation. We need someone with solid Android skills to take a look on the problem. It's not about me being lazy to implement a fix.

[Kureev]

maybe @cmcewen have a time to take a look?

[thekevinbrown]

We're experiencing this in the ReactConf2017 companion app which is open source, so here's a fairly clean reproduction case if that helps with the fix at all.

https://github.com/Thinkmill/react-conf-app/blob/64645ffe4195048c3f43cd6583678b77b79d31e0/app/components/Modal/index.js

Just toggle the comments to re-enable BlurView on android and you'll experience the issue.

[cmcewen]

@blargity android BlurView doesn't accept any children, which is causing your issue

[cmcewen]

@bhses why don't you change the target api to be the same for both?

also it looks like the error is due to duplicating a png file?

Unknown source file : /(...)/(...)/android/app/build/intermediates/res/merged/release/drawable-xxhdpi/node_modules_reactnative_libraries_customcomponents_navigationexperimental_assets_backicon.png: error: Duplicate file.

Unknown source file : /(...)/(...)/android/app/build/intermediates/res/merged/release/drawable-xxhdpi-v4/node_modules_reactnative_libraries_customcomponents_navigationexperimental_assets_backicon.png: Original is here. The version qualifier may be implied.

[FullstackJack]

Is everyone adding the RenderScript configuration to their Gradle and changing Gradle version to the one I used? RenderScript support is not enabled by default, you have to specify it. Not sure what is not clear about that, if you dig into the dependencies, you can clearly see the Android library that actually handles blurring requires it to be enabled.

I would make an attempt to fix it in the library, but I want to be able to test it in the example app. Unfortunately, I couldn't get the example working with the latest version of React which is the only version that matters to me. The example needs a rewrite in latest React with latest of the library too.

On Mar 10, 2017 6:44 AM, "Connor McEwen" notifications@github.com wrote:

@bhses https://github.com/bhses why don't you change the target api to be the same for both?

also it looks like the error is due to duplicating a png file?

Unknown source file : /(...)/(...)/android/app/build/intermediates/res/merged/release/drawable-xxhdpi-v4/node_modules_reactnative_libraries_customcomponents_navigationexperimental_assets_backicon.png: Original is here. The version qualifier may be implied.```

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/react-native-community/react-native-blur/issues/156#issuecomment-285686225, or mute the thread https://github.com/notifications/unsubscribe-auth/AC7PUc6NCyNca6Tg5PnSKrAXurcH1fNyks5rkWHGgaJpZM4L-Lvi .

[bakhansen]

@FullstackJack I tried to use the same configuration as you wrote in your solution, with the result that it works in my debug build, but not in my release build; in the release build I get the error which I couldn't resolve at the time, which you quoted. Therefore I wondered if it worked for you, if you assemble a release build.

@cmcewen Regarding target API I meant that I tried to assemble a release build for both renderscriptTargetApi set to 19 and 21, respectively.

[bakhansen]

@cmcewen release build successful by applying what this guy wrote: https://github.com/facebook/react-native/issues/5787#issuecomment-236408669

[perrosnk]

I am also experiencing this problem

[robertftw]

Any progress on this issue?

[Naoto-Ida]

Any progress? I'm really interested in using this for Android too. I've added renderscriptTargetApi 19 renderscriptSupportModeEnabled true to my build.gradle file, but now getting this error:

com.fivehundredpx.android.blur.BlurringView canot be cast to android.ViewGroup

I'm not really an Android dev(more iOS), but is this referring to what the guys were referring to in regards to Android's BlurView not accepting any children?

[FullstackJack]

@Naoto-Ida Correct, on Android, BlurView should not contain children. You can put the BlurView inside the Image or View you want to blur. You need to pass around the refs to get it to work and the view you want to blur must have finished rendering before applying the effect (after image load or after component mount). I was worried about style flash, but it happens very quickly. See the example https://github.com/react-native-community/react-native-blur/blob/master/examples/Basic/index.android.js

[anhtuank7c]

None of them working to me. 👎 @Naoto-Ida I got same problem.

[Fantasim]

got the same problem too

[anhtuank7c]

@Fantasim In my case "Use this package to blur login screen image", i decided to blur image in gimp, then i just simple set image as background as normal :D This issue will need someone have solid android skill to resolve.

[Fantasim]

@anhtuank7c i need to blur dynamic image :/

[tslearn]

This is because renderscript mode is disabled .

Add below configs in android/buld.gradle to enable it

defaultConfig { ....... renderscriptTargetApi 20 renderscriptSupportModeEnabled true }

[ndbroadbent]

@tslearn I don't think it's that simple.

• I've put the renderScript lines in android/app/build.gradle
• I updated the com.android.tools.build:gradle version (I updated to 2.2.3)
• I'm using the android-specific props (blurRadius, downsampleFactor, overlayColor)
• I'm using findNodeHandle to get the handle of my parent view, and I'm passing that in the viewRef prop
• I set this style on the BlurView, for testing:
  • style={{position: 'absolute', top: 50, left: 50, width: 200, height: 200 }}

But it's still not working for me. I guess some Java code just needs to be updated to get it working with the latest React Native.

[ndbroadbent]

I've pushed a fix for Android: #173

You can try it out now by adding this to your package.json:

"react-native-blur": "ndbroadbent/react-native-blur#android-fix",

Then make sure you update your Gradle version (at least 1.5.0, but you may as well use 2.2.3), and then add those "renderscript" lines. I've added these instructions to the README.