react-native: [Android] Error: Duplicate resources

Environment

React Native Environment Info:

System:
  OS: macOS 10.14
  CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
  Memory: 103.10 MB / 8.00 GB
  Shell: 3.2.57 - /bin/bash
Binaries:
  Node: 8.12.0 - /usr/local/bin/node
  Yarn: 1.0.1 - /usr/local/bin/yarn
  npm: 6.4.1 - /usr/local/bin/npm
  Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
  iOS SDK:
    Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
  Android SDK:
    API Levels: 16, 17, 19, 21, 23, 24, 25, 26, 27, 28
    Build Tools: 19.1.0, 20.0.0, 23.0.1, 23.0.2, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.3, 28.0.0, 28.0.0, 28.0.2, 28.0.3
    System Images: android-16 | ARM EABI v7a, android-16 | MIPS, android-16 | Intel x86 Atom, android-16 | Google APIs Intel x86 Atom, android-19 | Google APIs Intel x86 Atom, android-24 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom_64, android-26 | Google Play Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-P | Google APIs Intel x86 Atom, android-P | Google Play Intel x86 Atom
IDEs:
  Android Studio: 3.2 AI-181.5540.7.32.5056338
  Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
  react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728 
  react-native: 0.57.4 => 0.57.4 
npmGlobalPackages:
  babel-preset-react-native: 4.0.0
  react-native-cli: 2.0.1
  react-native-create-library: 3.1.2
  react-native-git-upgrade: 0.2.7

Description

I’m not able to create a release apk with the PNG image in Android. But can able to create a release apk when there is no PNG image in it. Here is the error I’m getting while generating the release build

[drawable-mdpi-v4/assets_mario] /Users/jeffreyrajan/Tutorials/RN/errorCheck/android/app/src/main/res/drawable-mdpi/assets_mario.png	[drawable-mdpi-v4/assets_mario] /Users/jeffreyrajan/Tutorials/RN/errorCheck/android/app/build/generated/res/react/release/drawable-mdpi-v4/assets_mario.png: Error: Duplicate resources
:app:mergeReleaseResources FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeReleaseResources'.
> [drawable-mdpi-v4/assets_mario] /Users/jeffreyrajan/Tutorials/RN/errorCheck/android/app/src/main/res/drawable-mdpi/assets_mario.png	[drawable-mdpi-v4/assets_mario] /Users/jeffreyrajan/Tutorials/RN/errorCheck/android/app/build/generated/res/react/release/drawable-mdpi-v4/assets_mario.png: Error: Duplicate resources

* 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

Reproducible Demo

  1. Create a app - react-native init demo
  2. Create a assets folder in the project root folder.
  3. Add a PNG image inside the assets folder.
  4. Now implement a image component with the above PNG image.
  5. Now bundle it using the cmd react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
  6. Then generate release apk using Generate Signed APK

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 40
  • Comments: 129 (31 by maintainers)

Commits related to this issue

Most upvoted comments

Mapsy’s answer should help https://stackoverflow.com/a/52750886 So basically you edit the /node_modules/react-native/react.gradle file and add the doLast right after the doFirst block, manually.

doFirst { ... }
doLast {
    def moveFunc = { resSuffix ->
        File originalDir = file("$buildDir/generated/res/react/release/drawable-${resSuffix}");
        if (originalDir.exists()) {
            File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}");
            ant.move(file: originalDir, tofile: destDir);
        }
    }
    moveFunc.curry("ldpi").call()
    moveFunc.curry("mdpi").call()
    moveFunc.curry("hdpi").call()
    moveFunc.curry("xhdpi").call()
    moveFunc.curry("xxhdpi").call()
    moveFunc.curry("xxxhdpi").call()
}

Remove the files you might have on:

android/app/src/main/res/drawable-mdpi/ android/app/src/main/res/drawable-xhdpi/ android/app/src/main/res/drawable-xxhdpi/ Run Build again, This fixed the issue for me.

check this https://github.com/facebook/react-native/issues/19239#issuecomment-414564404

You need to remove drawable folder image if there is any?

In React Native 0.60.0 I’ve noticed that native base is also creating duplicate resources but the above workaround will not work because it’s targeting raw folder.

[raw/node_modules_nativebase_dist_src_basic_icon_nbicons] C:\Projects\some-app\CLIENT\android\app\src\main\res\raw\node_modules_nativebase_dist_src_basic_icon_nbicons.json
[raw/node_modules_nativebase_dist_src_basic_icon_nbicons] C:\Projects\some-app\CLIENT\android\app\build\generated\res\react\release\raw\node_modules_nativebase_dist_src_basic_icon_nbicons.json: Error: Duplicate resources

For other users having this issue:

        doLast {
            def moveFunc = { resSuffix ->
                File originalDir = file("$buildDir/generated/res/react/release/drawable-${resSuffix}");
                if (originalDir.exists()) {
                    File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}");
                    ant.move(file: originalDir, tofile: destDir);
                }
            }

            moveFunc.curry("ldpi").call()
            moveFunc.curry("mdpi").call()
            moveFunc.curry("hdpi").call()
            moveFunc.curry("xhdpi").call()
            moveFunc.curry("xxhdpi").call()
            moveFunc.curry("xxxhdpi").call()

            File originalDir = file("$buildDir/generated/res/react/release/raw");
                if (originalDir.exists()) {
                    File destDir = file("$buildDir/../src/main/res/raw");
                    ant.move(file: originalDir, tofile: destDir);
            }
        }

If you have extra resources added in custom folders, you might want to try something like this:

doLast {
    def moveFunc = { resSuffix ->
        File originalDir = file("$buildDir/generated/res/react/release/${resSuffix}");
        if (originalDir.exists()) {
            File destDir = file("$buildDir/../src/main/res/${resSuffix}");
            ant.move(file: originalDir, tofile: destDir);
        }
    }
    moveFunc.curry("drawable-ldpi").call()
    moveFunc.curry("drawable-mdpi").call()
    moveFunc.curry("drawable-hdpi").call()
    moveFunc.curry("drawable-xhdpi").call()
    moveFunc.curry("drawable-xxhdpi").call()
    moveFunc.curry("drawable-xxxhdpi").call()
    moveFunc.curry("raw").call()
}

<strike>But if you have dependencies that are packing their own assets, it’s not working, still getting this error (edited for clarity):

Execution failed for task ':app:mergeReleaseResources'.

> [drawable-xxxhdpi-v4/node_modules_reactnavigationstack_dist_views_assets_backicon] 
/[...]/android/app/src/main/res/drawable-xxxhdpi/node_modules_reactnavigationstack_dist_views_assets_backicon.png

[drawable-xxxhdpi-v4/node_modules_reactnavigationstack_dist_views_assets_backicon] 
/[...]/android/app/build/generated/res/react/release/drawable-xxxhdpi/node_modules_reactnavigationstack_dist_views_assets_backicon.png: 

Error: Duplicate resources

Is this actively assessed, or should we move forward with our own patches?</strike>

The problem for my setup was this line in app/build.gradle leftover from older react-native versions:

apply from: "../../node_modules/react-native/react.gradle"

removed it and build works now

I initially met this problem like 4 years ago. I can hardly believe that today with RN 0.70.0 the problem still exists…

What worked for me was a combination of two comments:

I’m pasting this here for anyone who else might need it.

def flavorPathSegment = ""
android.productFlavors.all { flavor ->
if (targetName.toLowerCase().contains(flavor.name)) {
                    flavorPathSegment = flavor.name
            }
            }

            doLast {
                def moveFunc = { resSuffix ->
                    File originalDir = file("$buildDir/generated/res/react/${flavorPathSegment}release/drawable-${resSuffix}")
                    if (originalDir.exists()) {
                        File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}")
                        ant.move(file: originalDir, tofile: destDir)
                    }
                }
                def moveRawFunc = { dir ->
                    File originalDir = file("$buildDir/generated/res/react/${flavorPathSegment}release/${dir}")
                    if (originalDir.exists()) {
                        File destDir = file("$buildDir/../src/main/res/${dir}")
                        ant.move(file: originalDir, tofile: destDir)
                    }
                }

                moveFunc.curry("ldpi").call()
                moveFunc.curry("mdpi").call()
                moveFunc.curry("hdpi").call()
                moveFunc.curry("xhdpi").call()
                moveFunc.curry("xxhdpi").call()
                moveFunc.curry("xxxhdpi").call()
                moveRawFunc.curry("raw").call()
            }

@ZeroCool00 wont that affect the images in Android?

My solution: Delete all files in /your_project/android/app/src/main/raw/res. It 's work for me !

@jeffreyrajanofficial Thanx for writing, the solution you have provided will help if we go and change react.gradle file. But I don’t want to make the release by changing the react.gradle file every time i do npm install everywhere.

I was still seeing this, using macOS 10.14.3 + RN 0.57.8 + Android Studio 3.3 + Gradle 4.10.3. Maybe I’m not the only one? Or maybe someone here can confirm it works so I’ll dig more and fix it for myself for real.

I’m currently working around it with the “patch-package” package in combination with the attached patch based on the above comment from @mkchx (with .txt suffix appended so github would accept the attachment) in order to automagically fix it on ‘npm install’ after adding postinstall: patch-package to my package.json scripts.

Maybe this is useful to someone… react-native+0.57.8.patch.txt

Hi all! Could someone make a PR for these changes? Editing node_modules is not ideal.

Copy node_ modules/react-native/react.gradle to android/app/react.gradle, then modify android/app/build.gradle and android/app/react.gradle:

android/app/build.gradle

- apply from: "../../node_modules/react-native/react.gradle"
+ apply from: "./react.gradle"

android/app/react.gradle

           doFirst {
                jsBundleDir.deleteDir()
                jsBundleDir.mkdirs()
                resourcesDir.deleteDir()
                resourcesDir.mkdirs()
                jsIntermediateSourceMapsDir.deleteDir()
                jsIntermediateSourceMapsDir.mkdirs()
                jsSourceMapsDir.deleteDir()
                jsSourceMapsDir.mkdirs()
            }
+
+           doLast {
+               def moveFunc = { resSuffix ->
+                   File originalDir = file("${resourcesDir}/drawable-${resSuffix}")
+                   if (originalDir.exists()) {
+                      File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}")
+                       ant.move(file: originalDir, tofile: destDir)
+                   }
+               }
+               def moveRawFunc = { dir ->
+                  File originalDir = file("${resourcesDir}/${dir}")
+                  if (originalDir.exists()) {
+                      File destDir = file("$buildDir/../src/main/res/${dir}")
+                      ant.move(file: originalDir, tofile: destDir)
+                  }
+              }
+
+              moveFunc.curry("ldpi").call()
+              moveFunc.curry("mdpi").call()
+              moveFunc.curry("hdpi").call()
+              moveFunc.curry("xhdpi").call()
+              moveFunc.curry("xxhdpi").call()
+              moveFunc.curry("xxxhdpi").call()
+              moveRawFunc.curry("raw").call()
+          }

This works for me in react-native 0.63.2

            doLast {
                def flavorPathSegment = ""
                println targetName.toLowerCase();
                android.productFlavors.all { flavor ->
                    if (targetName.toLowerCase().contains(flavor.name.toLowerCase())) {
                        flavorPathSegment = flavor.name
                    }
                }
                def moveFunc = { resFolder ->
                    File originalDir = file("${buildDir}/generated/res/react/${flavorPathSegment}/release/${resFolder}");
                    if (originalDir.exists()) {
                        File destDir = file("${buildDir}/../src/main/res/${resFolder}");
                        ant.move(file: originalDir, tofile: destDir);
                    }
                }

                moveFunc.curry("drawable").call()
                moveFunc.curry("drawable-ldpi").call()
                moveFunc.curry("drawable-mdpi").call()
                moveFunc.curry("drawable-hdpi").call()
                moveFunc.curry("drawable-xhdpi").call()
                moveFunc.curry("drawable-xxhdpi").call()
                moveFunc.curry("drawable-xxxhdpi").call()
                moveFunc.curry("raw").call()
            }


Here the patch file react-native+0.63.2.patch

diff --git a/node_modules/react-native/react.gradle b/node_modules/react-native/react.gradle
index 6441d93..1eb4645 100644
--- a/node_modules/react-native/react.gradle
+++ b/node_modules/react-native/react.gradle
@@ -147,6 +147,33 @@ afterEvaluate {
                 jsSourceMapsDir.mkdirs()
             }
 
+            doLast {
+                def flavorPathSegment = ""
+                println targetName.toLowerCase();
+                android.productFlavors.all { flavor ->
+                    if (targetName.toLowerCase().contains(flavor.name.toLowerCase())) {
+                        flavorPathSegment = flavor.name
+                    }
+                }
+                def moveFunc = { resFolder ->
+                    File originalDir = file("${buildDir}/generated/res/react/${flavorPathSegment}/release/${resFolder}");
+                    if (originalDir.exists()) {
+                        File destDir = file("${buildDir}/../src/main/res/${resFolder}");
+                        ant.move(file: originalDir, tofile: destDir);
+                    }
+                }
+
+                moveFunc.curry("drawable").call()
+                moveFunc.curry("drawable-ldpi").call()
+                moveFunc.curry("drawable-mdpi").call()
+                moveFunc.curry("drawable-hdpi").call()
+                moveFunc.curry("drawable-xhdpi").call()
+                moveFunc.curry("drawable-xxhdpi").call()
+                moveFunc.curry("drawable-xxxhdpi").call()
+                moveFunc.curry("raw").call()
+            }
+
+
             // Set up inputs and outputs so gradle can cache the result
             inputs.files fileTree(dir: reactRoot, excludes: inputExcludes)
             outputs.dir(jsBundleDir)
diff --git a/node_modules/react-native/scripts/.packager.env b/node_modules/react-native/scripts/.packager.env
new file mode 100644
index 0000000..21a13cf
--- /dev/null
+++ b/node_modules/react-native/scripts/.packager.env
@@ -0,0 +1 @@
+export RCT_METRO_PORT=8081
\ No newline at end of file

We are on react-native 0.60.5.

We’re using product flavors just like @mikehardy mentioned and we had problems with the ‘raw’ folder just like @Dbroqua experienced.

I ended up mixing both solutions and we use this code:

doLast {
    def moveFunc = { resSuffix ->
        File originalDir = file("$buildDir/generated/res/react/${flavorPathSegment}release/drawable-${resSuffix}")
        if (originalDir.exists()) {
            File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}")
            ant.move(file: originalDir, tofile: destDir)
        }
    }
    def moveRawFunc = { dir ->
        File originalDir = file("$buildDir/generated/res/react/${flavorPathSegment}release/${dir}")
        if (originalDir.exists()) {
            File destDir = file("$buildDir/../src/main/res/${dir}")
            ant.move(file: originalDir, tofile: destDir)
        }
    }

    moveFunc.curry("ldpi").call()
    moveFunc.curry("mdpi").call()
    moveFunc.curry("hdpi").call()
    moveFunc.curry("xhdpi").call()
    moveFunc.curry("xxhdpi").call()
    moveFunc.curry("xxxhdpi").call()
    moveRawFunc.curry("raw").call()
}

This thread has been really helpful, thanks to everyone for contributing. 😄

how can we solve this if we are using CI?

I’m closing this issue as it’s a 2018 issue and essentially unactionable from us. The original issue is from React Native 0.57.x

If you’re still having this failures on the latest version of the framework, please open a new issue.

in my case first: I placed the following code in node_modules/react-native/react.gradle after ‘doFirst’

doLast {
    def moveFunc = { resSuffix ->
        File originalDir = file("$buildDir/generated/res/react/release/drawable-${resSuffix}");
        if (originalDir.exists()) {
            File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}");
            ant.move(file: originalDir, tofile: destDir);
        }
    }
    moveFunc.curry("ldpi").call()
    moveFunc.curry("mdpi").call()
    moveFunc.curry("hdpi").call()
    moveFunc.curry("xhdpi").call()
    moveFunc.curry("xxhdpi").call()
    moveFunc.curry("xxxhdpi").call()
}

second: I deleted all contents of the folder android/app/src/main/res/raw may be useful for someone

rm -rf ./android/app/src/main/res/drawable-* rm -rf ./android/app/src/main/res/raw

So this does work, but then your images are missing, so if you rebundle your app then try to build you get the same error. Anyone have a legit fix for this yet?

In my case problem persists with raw directory.

Version: react-native 0.59.5

My solution:

doLast {                                                                                            
  def moveFunc = { resSuffix ->                                                                   
    File originalDir = file("$buildDir/generated/res/react/release/drawable-${resSuffix}");     
    if (originalDir.exists()) {                                                                 
      File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}");                 
      ant.move(file: originalDir, tofile: destDir);                                           
    }
  } 
  def moveRawFunc = { dir ->                                                                   
    File originalDir = file("$buildDir/generated/res/react/release/${dir}");     
    if (originalDir.exists()) {                                                                 
      File destDir = file("$buildDir/../src/main/res/${dir}");                 
      ant.move(file: originalDir, tofile: destDir);                                           
    }
  }  
  moveFunc.curry("ldpi").call()
  moveFunc.curry("mdpi").call()
  moveFunc.curry("hdpi").call()
  moveFunc.curry("xhdpi").call()
  moveFunc.curry("xxhdpi").call()
  moveFunc.curry("xxxhdpi").call()
  moveRawFunc.curry("raw").call()
}

Regards

This works!

I was still seeing this in RN0.58.x and it continues in RN0.59.x - are we doing something wrong here or is this really a bug?

I continue to have success with the workaround from @mkchx encoded in patch form in the patches directory for use with the patch-package module and this patch (updated for RN0.59.1)

react-native+0.59.1.patch.txt

For anyone having the issue on non-image raw resources; I solved it by renaming the files with the same name but different extension.

My case

I had object.obj and object.mtl files. Even if the extensions are different, it threw duplicate resources error. Because android picks them up by file name. So, renaming object.mtl to object_material.mtl had finally resolved it for me.

It may be the same case for image resources too, try renaming them if you have images with identical names.

I usually make a python scripts for patching node_modules. Add this as postinstall.py and add it to your postinstall script or run it with ./postinstall.py

#!/usr/bin/env python3

import os
import textwrap

def file_dir():
  return os.path.dirname(os.path.realpath(__file__))

def read_file(filename):
    '''
    Reads the specified file.

    :param filename: The file to read
    :return: The content of the specified file
    '''
    if os.path.exists(filename):
        with open(filename, "r") as file:
            return file.read()
    else:
        raise IOError("file {} not found.".format(filename))

def write_file(filename, text):
    '''
    Writes the specified text to the specified file.

    :param filename: The file to write to
    :param text: The text to write
    '''
    with open(filename, "w") as file:
        file.write(text)

def fix_android_assets():
  print("Fixing android error with duplicate assets: https://github.com/facebook/react-native/issues/22234")

  gradle_file_path = "{}/node_modules/react-native/react.gradle".format(file_dir())

  code_snippet = textwrap.indent("""\
            // Added by post_install
            // Fix for: https://github.com/facebook/react-native/issues/22234
            doLast {
                def moveFunc = { resSuffix ->
                    File originalDir = file("$buildDir/generated/res/react/release/drawable-${resSuffix}");
                    if (originalDir.exists()) {
                        File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}");
                        ant.move(file: originalDir, tofile: destDir);
                    }
                }
                moveFunc.curry("ldpi").call()
                moveFunc.curry("mdpi").call()
                moveFunc.curry("hdpi").call()
                moveFunc.curry("xhdpi").call()
                moveFunc.curry("xxhdpi").call()
                moveFunc.curry("xxxhdpi").call()
            }
  """, "")

  text = read_file(gradle_file_path)

  start = text.find("doFirst", 0)
  end = text.find("}", start)
  end = text.find("\n", end) + 1
  
  text = text[:end] + code_snippet + text[end:]

  write_file(gradle_file_path, text)

def main():
    fix_android_assets()

if __name__ == "__main__":
    main()

Here you are able to add your own scripts if required

Sorry for my english.

This works for me.

Add new scripts in package.json

  1. Generate the new bundle with generate:bundle
  2. Clean up resources in drawable with clean:drawable
  3. To generate an apk in release mode run yarn android:release
{
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "clean:drawable": "rm -rf ./android/app/src/main/res/drawable-* && rm -rf ./android/app/src/main/res/raw",
    "generate:bundle": "npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && yarn clean:drawable",
    "android:release": "yarn generate:bundle && npx react-native run-android --variant=release"
  }
}

For react native 0.59.1 or greater you need to add below code in react.gradle in node_modules/react-native. #for flavoured use below code.

        def flavorPathSegment = ""
        android.productFlavors.all { flavor ->
            if (targetName.toLowerCase().contains(flavor.name)) {
                flavorPathSegment = flavor.name
           }
        }
        doLast {
            def moveFunc = { resSuffix ->
                File originalDir = file("$buildDir/generated/res/react/${flavorPathSegment}/release/drawable-${resSuffix}");
                if (originalDir.exists()) {
                    File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}");
                    ant.move(file: originalDir, tofile: destDir);
                }
            }
            moveFunc.curry("ldpi").call()
            moveFunc.curry("mdpi").call()
            moveFunc.curry("hdpi").call()
            moveFunc.curry("xhdpi").call()
            moveFunc.curry("xxhdpi").call()
            moveFunc.curry("xxxhdpi").call()
        }

Okay, the related PR here is going to have a “revert PR” - it causes a regression, and the underlying issue that caused this problem was bad documentation really.

Here’s the thing: you should never copy things into the src directory during a build really. You need to copy things into intermediates and generated etc. If you have already copied things into src (from previous builds using this patch, or from a react-native bundle command): you need to clear those out so your src/main/res directory is clean - only real assets from your project

Now, to build an APK with an offline bundle - even in dev so you can run it on API < 17 you should do things differently than everyone on the web recommends (or you’ll have this problem).

What you want is this in your android/app/build.gradle:

project.ext.react = [

        // This is what most people will need
        bundleInDebug: project.hasProperty("bundleInDebug") ? project.getProperty("bundleInDebug") : false,

        // If you use build variants it has to be like this - put your own names in there
        bundleInDevDebug: project.hasProperty("bundleInDevDebug") ? project.getProperty("bundleInDevDebug") : false,
        bundleInQaDebug: project.hasProperty("bundleInQaDebug") ? project.getProperty("bundleInQaDebug") : false,
        bundleInStagingDebug: project.hasProperty("bundleInStagingDebug") ? project.getProperty("bundleInStagingDebug") : false,
        bundleInProdDebug: project.hasProperty("bundleInProdDebug") ? project.getProperty("bundleInProdDebug") : false
]

Then you call react-native something like this - sending a gradle project property through via an environment variable: ORG_GRADLE_PROJECT_bundleInDebug=true npx react-native run-android

(or for variants something like this ORG_GRADLE_PROJECT_bundleInDevDebug=true npx react-native run-android --variant devDebug)

Removing the drawable folders would not work for me since I had drawable resources that I needed to keep. My problem was with duplicate resources for everything in the android/app/src/main/res/raw folder and files that started with nodemodules... in the android/app/src/main/res/drawable folder. This solved the problem for me:

Adding to android/app/build.gradle:

...
project.ext.react = [
    ...
    bundleInRelease        : true,
    resourcesDirRelease   : "src/release/res",
    ...
]
...

Removing everything that started with node from android/app/src/main/drawable*:

rm android/app/src/main/drawable*/node*
rm -rf android/app/src/main/raw

Clean project, DO NOT RUN THE REACT NATIVE BUNDLE COMMAND, then re-build.

Hope this helps someone!

The above solution helped me find a decent answer:

Step 1:

Adding to android/app/build.gradle:

...
project.ext.react = [
    ...
    bundleInRelease        : true,
    resourcesDirRelease   : "src/release/res",
    ...
]
...

Step 2:

Run the following command to delete all node_module files.

rm -rf drawable*/node*

Step 3:

Run this command to build and APK.

./gradlew assembleRelease

Step 4:

I made the following script to use in my package.json

"release-apk": "cd android && yarn remove-duplicate-files  && ./gradlew assembleRelease"

Hope this helps! And thank you everyone who pitched in with their solutions

Removing android/app/build folder and building again worked for me.

I solved the problem by adding code here “node_modules/react-native/react.gradle” in react-native 0.63.4

截屏2021-04-24 上午10 30 03
        doLast {
            def moveFolderFunc = { folderName ->
                File originalDir = file("$buildDir/generated/res/react/release/${folderName}");
                if (originalDir.exists()) {
                    File destDir = file("$buildDir/../src/main/res/${folderName}");
                    ant.move(file: originalDir, tofile: destDir);
                }
            }

            moveFolderFunc.curry("drawable-ldpi").call()
            moveFolderFunc.curry("drawable-mdpi").call()
            moveFolderFunc.curry("drawable-hdpi").call()
            moveFolderFunc.curry("drawable-xhdpi").call()
            moveFolderFunc.curry("drawable-xxhdpi").call()
            moveFolderFunc.curry("drawable-xxxhdpi").call()
            moveFolderFunc.curry("raw").call()                
        }

Oh, boy. Maybe an official fix is on the way?

Removing the drawable folders would not work for me since I had drawable resources that I needed to keep. My problem was with duplicate resources for everything in the android/app/src/main/res/raw folder and files that started with nodemodules... in the android/app/src/main/res/drawable folder. This solved the problem for me:

Adding to android/app/build.gradle:

...
project.ext.react = [
    ...
    bundleInRelease        : true,
    resourcesDirRelease   : "src/release/res",
    ...
]
...

Removing everything that started with node from android/app/src/main/drawable*:

rm android/app/src/main/drawable*/node*
rm -rf android/app/src/main/raw

Clean project, DO NOT RUN THE REACT NATIVE BUNDLE COMMAND, then re-build.

Hope this helps someone!

@gudbrand3 I eventually implemented the fix noted above to the “node_modules/react-native/react.gradle,” file just so I could get a new build to the appstore, but this is absurd to have to do, not sure why this hasn’t been fixed yet…

Using 55.4 react native version here is my sample project gist for build.gradle package.json with fixes.

https://gist.github.com/Abhishekgarg727/daf031fb9f94fdfd985e84db57dedbe1

Why solving this still using workaround? why there is no fixing approach? I agree with what @safaiyeh says, editing node_modules everytime after npm install is not ideal, because your changes in node_modules are not stored in git

I’ve created this patch for the React Native 0.63.2. If you have ‘drawable-*’ folders, rename it for ‘mipmap-*’, you can change the reference for it in the android/app/src/main/AndroidManifest.xml

Run this in the project’s root to create the patch file

cat <<EOT >> react-native-0.63.2-react.gradle.patch 
@@ -147,6 +147,23 @@
                 jsSourceMapsDir.mkdirs()
             }

+            doLast {
+                def moveFunc = { resFolder ->
+                    File originalDir = file("\${buildDir}/generated/res/react/release/\${resFolder}");
+                    if (originalDir.exists()) {
+                        File destDir = file("\${buildDir}/../src/main/res/\${resFolder}");
+                        ant.move(file: originalDir, tofile: destDir);
+                    }
+                }
+                moveFunc.curry("drawable-ldpi").call()
+                moveFunc.curry("drawable-mdpi").call()
+                moveFunc.curry("drawable-hdpi").call()
+                moveFunc.curry("drawable-xhdpi").call()
+                moveFunc.curry("drawable-xxhdpi").call()
+                moveFunc.curry("drawable-xxxhdpi").call()
+                moveFunc.curry("raw").call()
+            }
+
             // Set up inputs and outputs so gradle can cache the result
             inputs.files fileTree(dir: reactRoot, excludes: inputExcludes)
             outputs.dir(jsBundleDir)
EOT

then apply the patch with

patch node_modules/react-native/react.gradle < react-native-0.63.2-react.gradle.patch

Also recommend to do

rm -Rf android/.gradle
cd android && gradlew clean

In my case problem persists with raw directory.

Version: react-native 0.59.5

My solution:

doLast {                                                                                            
  def moveFunc = { resSuffix ->                                                                   
    File originalDir = file("$buildDir/generated/res/react/release/drawable-${resSuffix}");     
    if (originalDir.exists()) {                                                                 
      File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}");                 
      ant.move(file: originalDir, tofile: destDir);                                           
    }
  } 
  def moveRawFunc = { dir ->                                                                   
    File originalDir = file("$buildDir/generated/res/react/release/${dir}");     
    if (originalDir.exists()) {                                                                 
      File destDir = file("$buildDir/../src/main/res/${dir}");                 
      ant.move(file: originalDir, tofile: destDir);                                           
    }
  }  
  moveFunc.curry("ldpi").call()
  moveFunc.curry("mdpi").call()
  moveFunc.curry("hdpi").call()
  moveFunc.curry("xhdpi").call()
  moveFunc.curry("xxhdpi").call()
  moveFunc.curry("xxxhdpi").call()
  moveRawFunc.curry("raw").call()
}

Regards

For anyone still following along, I recently integrated an external system and needed to separate my testing from production external data, which leads to using “flavors” in gradle so you can have qaDebug, stagingRelease, etc etc pointing to different external system. The patch here did not support that though, so I added flavor support, and my patch looks like this now. It lives in patches/react-native+0.59.5.patch where it is applied during npm i runs after npm install patch-package

diff --git a/node_modules/react-native/react.gradle b/node_modules/react-native/react.gradle
index 4ead2b6..e0f92b7 100644
--- a/node_modules/react-native/react.gradle
+++ b/node_modules/react-native/react.gradle
@@ -48,6 +48,33 @@ afterEvaluate {
                 resourcesDir.mkdirs()
             }
 
+            // From https://stackoverflow.com/questions/53239705/react-native-error-duplicate-resources-android
+            // Currently has no solution?
+
+            // IF you are using flavors, add flavor name to the path you move from
+            def flavorPathSegment = ""
+            android.productFlavors.all { flavor ->
+                if (targetName.toLowerCase().contains(flavor.name)) {
+                    flavorPathSegment = flavor.name + "/"
+                }
+            }
+
+            doLast {
+                def moveFunc = { resSuffix ->
+                    File originalDir = file("$buildDir/generated/res/react/${flavorPathSegment}release/drawable-${resSuffix}")
+                    if (originalDir.exists()) {
+                        File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}")
+                        ant.move(file: originalDir, tofile: destDir);
+                    }
+                }
+                moveFunc.curry("ldpi").call()
+                moveFunc.curry("mdpi").call()
+                moveFunc.curry("hdpi").call()
+                moveFunc.curry("xhdpi").call()
+                moveFunc.curry("xxhdpi").call()
+                moveFunc.curry("xxxhdpi").call()
+            }
+
             // Set up inputs and outputs so gradle can cache the result
             inputs.files fileTree(dir: reactRoot, excludes: inputExcludes)
             outputs.dir(jsBundleDir)

Hi all how will we able to get this done with jenkins job. As it will do npm install always which override this change in react.gradle file. We can create build on android studio for android but not possible on jenkins.

Oh, boy. Maybe an official fix is on the way?

I hope so, I’m using RN 0.62.1 and ran into this issue as well.

Adding the doLast code or deleting the drawables folders solves this issue.

I’m wondering to know what’s the official recommendation?

Thank you

@juliancorrea @scgough just be careful with that, I followed that solution style to its full end with a PR accepted even, but after follow-on problems we needed to revert it. It’s a dead-end solution. I posted full details of the currently recommended solution a couple comments above and can only recommend the new style. If you use my old attached patch based on @mkchx answer it will work for you, for now, but only under certain conditions - it fails in other common scenarios that your project may need in the future

In my case there were files in the drawables res/drawable-* directories that were lingering from some other dev on my teams commit - I was getting a “Error: Duplicate resources” pointing at those file names - I deleted the files from drawables and everything works fine 👍

Ok,

I will do the necessary ASAP.

Regards, Damien

Looks like a re-implementation of what you get with npm install patch-package but if python is your thing and you want to maintain more code yourself it does seem viable. I’m still using patch-package for what it’s worth, with 0.59.3 like so react-native+0.59.3.patch.txt

@hramos - #19239 was similar (I think) and this is long-standing but appears to have a fix. Does this just need a PR for an ultimate fix or am I missing a reason why the patch used here is not viable? (I might be). If we just need a PR I could send one in…

@dragosroua I see a missing hyphen in your xxxhdpi curry. Coincidentally the same leading paths with problems for you?

I don’t have react.gradle file in RN v0.72.6, what do I have to do for this?

The problem for my setup was this line in app/build.gradle leftover from older react-native versions:

apply from: "../../node_modules/react-native/react.gradle"

removed it and build works now

Thank you, this is working for me.

Thank you @andreiciceu. This worked for me too.

Change your wrong .png or .jpg file. It is solved… 😇

All of that dolast stuff was added in PRs #24518 and #24778, then removed again in #25363. Does anyone know why it was removed? This has been a LONG standing problem, and I thought they had it fixed.

Never mind, answers here: https://github.com/facebook/react-native/issues/22234#issuecomment-504721069 and here: https://github.com/facebook/react-native/issues/25325

What worked for me was a combination of two comments:

I’m pasting this here for anyone who else might need it.

def flavorPathSegment = ""
android.productFlavors.all { flavor ->
if (targetName.toLowerCase().contains(flavor.name)) {
                    flavorPathSegment = flavor.name
            }
            }

            doLast {
                def moveFunc = { resSuffix ->
                    File originalDir = file("$buildDir/generated/res/react/${flavorPathSegment}release/drawable-${resSuffix}")
                    if (originalDir.exists()) {
                        File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}")
                        ant.move(file: originalDir, tofile: destDir)
                    }
                }
                def moveRawFunc = { dir ->
                    File originalDir = file("$buildDir/generated/res/react/${flavorPathSegment}release/${dir}")
                    if (originalDir.exists()) {
                        File destDir = file("$buildDir/../src/main/res/${dir}")
                        ant.move(file: originalDir, tofile: destDir)
                    }
                }

                moveFunc.curry("ldpi").call()
                moveFunc.curry("mdpi").call()
                moveFunc.curry("hdpi").call()
                moveFunc.curry("xhdpi").call()
                moveFunc.curry("xxhdpi").call()
                moveFunc.curry("xxxhdpi").call()
                moveRawFunc.curry("raw").call()
            }

targetName.toLowerCase().contains(flavor.name.toLowerCase()) work for me. my flavor.name look like xxXX.

@wincod75 hear hear! I ended up with the same… blah. I dont either get why it is not just included in the package until a better approach is found since people end up doing it anyway manually. Now it must be re-done for every deletion of node_modules and re npm install. #frustrating

What worked for me was a combination of two comments:

I’m pasting this here for anyone who else might need it.

def flavorPathSegment = ""
android.productFlavors.all { flavor ->
if (targetName.toLowerCase().contains(flavor.name)) {
                    flavorPathSegment = flavor.name
            }
            }

            doLast {
                def moveFunc = { resSuffix ->
                    File originalDir = file("$buildDir/generated/res/react/${flavorPathSegment}release/drawable-${resSuffix}")
                    if (originalDir.exists()) {
                        File destDir = file("$buildDir/../src/main/res/drawable-${resSuffix}")
                        ant.move(file: originalDir, tofile: destDir)
                    }
                }
                def moveRawFunc = { dir ->
                    File originalDir = file("$buildDir/generated/res/react/${flavorPathSegment}release/${dir}")
                    if (originalDir.exists()) {
                        File destDir = file("$buildDir/../src/main/res/${dir}")
                        ant.move(file: originalDir, tofile: destDir)
                    }
                }

                moveFunc.curry("ldpi").call()
                moveFunc.curry("mdpi").call()
                moveFunc.curry("hdpi").call()
                moveFunc.curry("xhdpi").call()
                moveFunc.curry("xxhdpi").call()
                moveFunc.curry("xxxhdpi").call()
                moveRawFunc.curry("raw").call()
            }

thanks @AbhishekNairOfficial. it saved alot of time for me.

Note that even for fonts they should be in the right directory - an example: https://github.com/oblador/react-native-vector-icons#android which directs you to call this file which carefully copies into a non-src directory https://github.com/oblador/react-native-vector-icons/blob/master/fonts.gradle#L16 - everyone’s project is different of course, but I thought it was worth mentioning

Thanks @mikehardy for your help . I found it was fine to leave in the fonts etc in the assets directory but did need to delete the other bits and pieces hanging around. Namely everything in \android\app\src\main\res\drawable-hdpi\

This solution worked for me. So basically you edit the /node_modules/react-native/react.gradle file and add the doLast right after the doFirst block, manually.

doFirst { … } doLast { def moveFunc = { resSuffix -> File originalDir = file(“$buildDir/generated/res/react/release/drawable-${resSuffix}”); if (originalDir.exists()) { File destDir = file(“$buildDir/…/src/main/res/drawable-${resSuffix}”); ant.move(file: originalDir, tofile: destDir); } } moveFunc.curry(“ldpi”).call() moveFunc.curry(“mdpi”).call() moveFunc.curry(“hdpi”).call() moveFunc.curry(“xhdpi”).call() moveFunc.curry(“xxhdpi”).call() moveFunc.curry(“xxxhdpi”).call() }

Fixed!

@Dbroqua just a heads up, my patch was merged but your mention of raw directories being very closely related but not included in my patch is also reflected in the merge. Now that my patch is in, you may want to see what change is required for the raw directory and propose a PR with a continuation of the fix, extending it for your case?

In my case the raw directory contains some mp3 used in my application.