Android crashes on render due to issues in dependencies

[lucaswhitman]

Describe the bug
Hi all, we're trying to move to 3.0 and I'm working through getting all the dependent libraries set up and I'm stuck on one and I'm just looking to see if anyone has encountered and solved this issue. iOS is working fine, but when I try and open my screen on Android it just crashes. I pulled up adb logcat and found logs that pointed me towards these issues in one of the new dependencies.

Kureev/react-native-blur#368
Kureev/react-native-blur#380
Kureev/react-native-blur#396

I'm a little concerned about this lib as it doesn't seem very well maintained, and it makes us a little leery about moving to 3.0 for a bit. Anyone have a way around this? Please let me know if there's any more info I can provide, and if I missed something in the docs or another open PR I apologize in advance!

Dev environment info (please complete/provide the following information):

• Package version (stream-chat-react-native/stream-chat-expo)

    "stream-chat": "3.5.0",
    "stream-chat-react-native": "3.0.0",
    "@react-native-community/blur": "3.6.0",

• react-native or expo version

 "react-native": "0.63.3",

• Device/Emulator (android/ios) and OS version

To Reproduce
Steps to reproduce the behavior:

1. Build Android
2. Open screen where chat lives
3. App crashes

Expected behavior
Message channel renders.

Additional context
Log samples:

03-11 11:09:42.354  8461  8461 E AndroidRuntime: java.lang.IndexOutOfBoundsException: Index: 1, Size: 0
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at java.util.ArrayList.get(ArrayList.java:437)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at android.view.ViewGroup.getAndVerifyPreorderedView(ViewGroup.java:3659)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4147)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:703)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at android.view.View.draw(View.java:21293)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at android.view.ViewGroup.drawChild(ViewGroup.java:4388)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4149)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:703)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at android.view.View.draw(View.java:21293)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at android.view.ViewGroup.drawChild(ViewGroup.java:4388)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4149)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:703)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at android.view.View.draw(View.java:21293)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at android.view.ViewGroup.drawChild(ViewGroup.java:4388)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4149)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:703)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at android.view.View.draw(View.java:21293)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at android.view.ViewGroup.drawChild(ViewGroup.java:4388)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4149)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at com.facebook.react.views.view.ReactViewGroup.dispatchDraw(ReactViewGroup.java:703)
03-11 11:09:42.354  8461  8461 E AndroidRuntime: 	at android.view.View.draw(View.java:21293)

gz#10122

[shodgetts]

Agent comment from Stephen Hodgetts in Zendesk ticket #10122:

Thanks for getting in touch. We'll get an engineer to check up on this. In the meantime, do you mind please letting us know the Stream organization or app_id (they are public) that you are working with please?
-BS

[lucaswhitman]

@shodgetts our org name is ourfabriq, I'm also hunting through PRs and open issues on the other library so if I find a workaround I'll post it here.

[shodgetts]

Agent comment from Stephen Hodgetts in Zendesk ticket #10122:

Thank you very much. I've assigned an engineer who will be able to check in when they are available.

[lucaswhitman]

Actually, seems like this is solved in the underlying android lib. A patch-package seems to resolve it:

diff --git a/node_modules/@react-native-community/blur/android/build.gradle b/node_modules/@react-native-community/blur/android/build.gradle
index 8177235..b401cb8 100644
--- a/node_modules/@react-native-community/blur/android/build.gradle
+++ b/node_modules/@react-native-community/blur/android/build.gradle
@@ -43,5 +43,5 @@ repositories {
 dependencies {
     //noinspection GradleDynamicVersion
     implementation 'com.facebook.react:react-native:+'
-    implementation 'com.eightbitlab:blurview:1.6.3'
+    implementation 'com.eightbitlab:blurview:1.6.6'
 }

[vishalnarkhede]

Hey @lucaswhitman thanks for bringing this up. We have actually seen this issue, and we are going to include this patch in our docs. Currently the issues that we have seen, do get resolved from the patch you mentioned. But in future if we do see some issue which is not solvable, we will look for alternative for our usage of blurring effect.

[lucaswhitman]

Thanks @vishalnarkhede, looking forward to the first few patches. I've got another item but I'll raise it in another issue for clarity.

[lucaswhitman]

Actually, still seeing this issue locally. I'm cleaning and building a few times in a row and I'm still getting this when I close the messenger screen we've got set up. I thought it was a different error but when I went up a bit in the logs I saw the same error being thrown.

[vishalnarkhede]

@lucaswhitman To unblock you for now, can you try following solution? This basically overrides the BlurView

import { StyleSheet, View } from 'react-native';
import { registerNativeHandlers } from 'stream-chat-react-native-core';

registerNativeHandlers({
  BlurView: () => (
    <View
        style={[
            StyleSheet.absoluteFillObject,
            {
                backgroundColor: 'some_background_color'
            }
        ]}
    />
  )
})

[vishalnarkhede]

Please let me know if this gets rid of the error!!

[lucaswhitman]

@vishalnarkhede that worked! Adding some notes to our code, but this should allow us to move forward a bit. Thank you!