1

I am working on upgrading a React Native application that uses @react-navigation/drawer in package.json

As I got from the docs, it requires react-native-gesture-handler and react-native-reanimated to also be installed. I've done that and they look like this in my package.json:

"react-native": "0.70.7",
"@react-navigation/drawer": "^6.6.2",
"react-native-gesture-handler": "^2.9.0",
"react-native-reanimated": "^3.0.0",

The app compiles perfectly in debug mode and loads up fine in the emulator. However, when I'm trying to create an APK and run the commands ./gradlew clean && ./gradlew assembleStagingRelease, I'm getting the following error:

* What went wrong:
Execution failed for task ':app:mergeDexStagingRelease'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.DexMergingTaskDelegate
   > There was a failure while executing work items
      > A failure occurred while executing com.android.build.gradle.internal.tasks.DexMergingWorkAction
         > com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives:
           Learn how to resolve the issue at https://developer.android.com/studio/build/dependencies#duplicate_classes.
           Type com.swmansion.common.GestureHandlerStateManager is defined multiple times: /projects/rn/node_modules/react-native-reanimated/android/build/.transforms/dc7ef865db1cba58c97e7dd5333dfa60/transformed/release/com/swmansion/common/GestureHandlerStateManager.dex, /projects/rn/android/app/build/intermediates/external_libs_dex/stagingRelease/mergeExtDexStagingRelease/classes3.dex

I've been stuck on this for a while and not sure of the fix. Upon searching into node_modules, I see the interface GestureHandlerStateManager is defined twice: one in reanimated package and one in gesture-handler package. It appears both packages are needed by the drawer package, so I can't delete any of them.

Vaibhav Rathore
  • 301
  • 2
  • 10

1 Answers1

0

I have been able to fix this at my end.

Apparently, my project needed this package react-native-jitsi-meet which seem to have been importing a lot of other packages as part of it's dependency. While I also needed those dependency packages separately, the independent mentions of them in package.json along with Jitsi package was the reason for these duplicate classes.

I had to add the following snippet and kept updating it with more packages as I continued to see conflicts with more classes/packages.

implementation(project(':react-native-jitsi-meet')) {
      exclude group: 'com.facebook.react' ,module: 'react-native-locale-detector'
      exclude group: 'com.facebook.react', module: 'react-native-vector-icons'
      exclude group: 'com.facebook', module: 'hermes'
      // Un-comment any packages below that you have added to your project to prevent `duplicate_classes` errors
      exclude group: 'com.facebook.react', module: 'react-native-community-async-storage'
      exclude group: 'com.facebook.react', module: 'react-native-community_netinfo'
      exclude group: 'com.facebook.react', module: 'react-native-svg'
      exclude group: 'com.facebook.react', module: 'react-native-fetch-blob'
      exclude group: 'com.facebook.react', module: 'react-native-webview'
      exclude group: 'com.facebook.react', module: 'react-native-linear-gradient'
      exclude group: 'com.facebook.react', module: 'react-native-sound'
      exclude group: 'com.facebook.react', module: 'react-native-reanimated'
      exclude group: 'com.facebook.react', module: 'react-native-device-info'
      exclude group: 'com.facebook.react', module: 'react-native-pager-view'
      exclude group: 'com.facebook.react', module: 'react-native-gesture-handler'
      exclude group: 'com.facebook.react', module: 'react-native-screens'
      exclude group: 'com.facebook.react', module: 'react-native-safe-area-context'
      exclude group: 'com.facebook.react', module: 'react-native-masked-view_masked-view'
    }

This snippet was also present in Jitsi's documentation where I could figure the root cause of my issue.

Based on several days I spent on this issue, my understanding about this is:

  1. This issue is always when there are conflicts with multiple packages.
  2. First step is to identify which packages are conflicting. I spent my time commenting out packages from package.json and also the app code where they were being imported/used. Once the app build happened without issues, I started commenting one by one.
  3. Once I figured the app build failed after uncommenting a particular package, I had to add it as the exclude group like above. This step is only possible if I know exactly which two packages are conflicting, so I put the package under the correct implementation block
  4. Slowly and gradually, you'll be able to build the whole app without compromising on any of the package.
Vaibhav Rathore
  • 301
  • 2
  • 10