taskrabbit / react-native-zendesk-chat

React Native Wrapper around Zendesk Chat v2
MIT License
130 stars 126 forks source link

Android crash with java.lang.UnsupportedOperationException error #125

Closed AskaHD closed 2 years ago

AskaHD commented 2 years ago

Hello, i'm currently trying to add this lib in my React Native project.

The behavior :

Caused by: java.lang.UnsupportedOperationException: Failed to resolve attribute at index 4: TypedValue{t=0x2/d=0x7f040003 a=-1}

FATAL EXCEPTION: main Process: com.groupebdl.monespace.dev, PID: 9163 java.lang.RuntimeException: Unable to start activity ComponentInfo{com.groupebdl.monespace.dev/zendesk.messaging.MessagingActivity}: android.view.InflateException: Binary XML file line #5 in com.groupebdl.monespace.dev:layout/zui_activity_messaging: Binary XML file line #5 in com.groupebdl.monespace.dev:layout/zui_activity_messaging: Error inflating class zendesk.messaging.ui.MessagingView at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3449) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3601) at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:85) at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135) at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2066) at android.os.Handler.dispatchMessage(Handler.java:106) at android.os.Looper.loop(Looper.java:223) at android.app.ActivityThread.main(ActivityThread.java:7656) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947) Caused by: android.view.InflateException: Binary XML file line #5 in com.groupebdl.monespace.dev:layout/zui_activity_messaging: Binary XML file line #5 in com.groupebdl.monespace.dev:layout/zui_activity_messaging: Error inflating class zendesk.messaging.ui.MessagingView Caused by: android.view.InflateException: Binary XML file line #5 in com.groupebdl.monespace.dev:layout/zui_activity_messaging: Error inflating class zendesk.messaging.ui.MessagingView Caused by: java.lang.reflect.InvocationTargetException at java.lang.reflect.Constructor.newInstance0(Native Method) at java.lang.reflect.Constructor.newInstance(Constructor.java:343) at android.view.LayoutInflater.createView(LayoutInflater.java:852) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:1004) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:959) at android.view.LayoutInflater.inflate(LayoutInflater.java:657) at android.view.LayoutInflater.inflate(LayoutInflater.java:532) at android.view.LayoutInflater.inflate(LayoutInflater.java:479) at androidx.appcompat.app.AppCompatDelegateImpl.setContentView(AppCompatDelegateImpl.java:699) at androidx.appcompat.app.AppCompatActivity.setContentView(AppCompatActivity.java:195) at zendesk.messaging.MessagingActivity.onCreate(MessagingActivity.java:121) at android.app.Activity.performCreate(Activity.java:8000) at android.app.Activity.performCreate(Activity.java:7984) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1309) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3422) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3601) at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:85) at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135) at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2066) at android.os.Handler.dispatchMessage(Handler.java:106) at android.os.Looper.loop(Looper.java:223) at android.app.ActivityThread.main(ActivityThread.java:7656) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947) Caused by: android.view.InflateException: Binary XML file line #25 in com.groupebdl.monespace.dev:layout/zui_view_messaging: Failed to resolve attribute at index 4: TypedValue{t=0x2/d=0x7f040003 a=-1} Caused by: java.lang.UnsupportedOperationException: Failed to resolve attribute at index 4: TypedValue{t=0x2/d=0x7f040003 a=-1} at android.content.res.TypedArray.getDimensionPixelSize(TypedArray.java:782) at android.view.ViewGroup$MarginLayoutParams.(ViewGroup.java:8477) at android.widget.FrameLayout$LayoutParams.(FrameLayout.java:452) at android.widget.FrameLayout.generateLayoutParams(FrameLayout.java:380) at android.widget.FrameLayout.generateLayoutParams(FrameLayout.java:58) at android.view.LayoutInflater.rInflate(LayoutInflater.java:1123) at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1082) at android.view.LayoutInflater.rInflate(LayoutInflater.java:1124) at android.view.LayoutInflater.inflate(LayoutInflater.java:654) at android.view.LayoutInflater.inflate(LayoutInflater.java:532) at zendesk.messaging.ui.MessagingView.(MessagingView.java:49) at zendesk.messaging.ui.MessagingView.(MessagingView.java:41) at java.lang.reflect.Constructor.newInstance0(Native Method) at java.lang.reflect.Constructor.newInstance(Constructor.java:343) at android.view.LayoutInflater.createView(LayoutInflater.java:852) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:1004) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:959) at android.view.LayoutInflater.inflate(LayoutInflater.java:657) at android.view.LayoutInflater.inflate(LayoutInflater.java:532) at android.view.LayoutInflater.inflate(LayoutInflater.java:479) at androidx.appcompat.app.AppCompatDelegateImpl.setContentView(AppCompatDelegateImpl.java:699) at androidx.appcompat.app.AppCompatActivity.setContentView(AppCompatActivity.java:195) at zendesk.messaging.MessagingActivity.onCreate(MessagingActivity.java:121) at android.app.Activity.performCreate(Activity.java:8000) at android.app.Activity.performCreate(Activity.java:7984) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1309) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3422) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3601) at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:85) at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135) at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2066) at android.os.Handler.dispatchMessage(Handler.java:106) at android.os.Looper.loop(Looper.java:223) at android.app.ActivityThread.main(ActivityThread.java:7656) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)


## About my project : 
1. React Native version : `0.66.0`
2. My gradle settings are the following :

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript { ext { buildToolsVersion = "30.0.2" minSdkVersion = 21 compileSdkVersion = 31 targetSdkVersion = 31 supportLibVersion = "28.0.0" kotlinVersion = "1.5.+" playServicesVersion = "17.0.0" // or find latest version ndkVersion = "21.4.7075529" } repositories { google() mavenCentral() } dependencies { classpath('com.android.tools.build:gradle:4.2.2') classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${kotlinVersion}" classpath "org.jetbrains.kotlin:kotlin-android-extensions:${kotlinVersion}"

    // NOTE: Do not place your application dependencies here; they belong
    // in the individual module build.gradle files
    classpath 'com.google.gms:google-services:4.3.3'
}

}

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

    google()
    maven { url 'https://www.jitpack.io' }
    maven { url 'https://zendesk.jfrog.io/zendesk/repo' } // can't install app without this
    jcenter()
}

}


3. Error happens even if i follow the manual setup instructions entirely.

Is anyone able to reproduce the issue with my project's config (RN 0.66 / Android SDK 31) ?
Would apprecite some help to figure this out :)
Thank you, have a nice day !
AskaHD commented 2 years ago

Any advice ?

slavengoose commented 2 years ago

@AskaHD Did you end up solving this?

AskaHD commented 2 years ago

@slavengoose No, we postponed our zendesk integration. Still having the issue.

AskaHD commented 2 years ago

Hello, i have resolved my issue. The documentation is missing a point for android : you NEED to style the zendesk chat.

This is how you can achieve this :

Add these lines to project/android/app/src/main/AndroidManifest.xml

<activity android:name="zendesk.support.guide.HelpCenterActivity" android:theme="@style/ZendeskActivityTheme" />
<activity android:name="zendesk.support.guide.ViewArticleActivity" android:theme="@style/ZendeskActivityTheme" />
<activity android:name="zendesk.support.request.RequestActivity" android:theme="@style/ZendeskActivityTheme" />
<activity android:name="zendesk.support.requestlist.RequestListActivity" android:theme="@style/ZendeskActivityTheme" />
<activity android:name="zendesk.messaging.MessagingActivity" android:theme="@style/ZendeskActivityTheme" />

Then, these lines to project/android/app/src/main/res/values/styles.xml

<style name="ZendeskActivityTheme" parent="ZendeskSdkTheme.Light">
    <item name="android:windowBackground">@color/zendeskWindowBackground</item>
    <item name="android:textColor">@color/textdark</item>
    <item name="android:textColorPrimary">@color/primary</item>
    <item name="android:statusBarColor">@color/accent</item>
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/secondaryDark</item>
    <item name="colorAccent">@color/accent</item>
</style>

And finally, create a file colors.xml in the same directory as styles.xml (project/android/app/src/main/res/values) and use your own color scheme. Mine is the following :

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="primary">#2E749E</color>
  <color name="primaryLight">#4194C8</color>
  <color name="primaryLighter">#D0E4F1</color>
  <color name="accent">#7F68AC</color>
  <color name="secondary">#7F68AC</color>
  <color name="secondaryDark">#473172</color>
  <color name="secondaryLight">#DDD8E9</color>
  <color name="textwhite">#FFFFFF</color>
  <color name="textdark">#000000</color>
  <color name="lightGray">#C4C4C4</color>
  <color name="mediumGray">#7F7F7F</color>
  <color name="zendeskWindowBackground">#FFFFFF</color>
</resources>

Hope this will help.