fix(jpeg): android jpeg drawable resources

Author: CristiCeban

.changeset/sharp-jpegs-draw.md

@@ -0,0 +1,7 @@
+---
+"@callstack/repack": patch
+---
+
+Fix `.jpeg` images not showing in Android release builds. They were emitted to `raw` instead of `drawable-*`, where React Native looks for them.
+
+If you have a `.jpeg` and a `.png`/`.jpg`/`.gif`/`.webp` image with the same name in the same directory (e.g. `logo.png` and `logo.jpeg`), rename one of them. Both now resolve to the same Android drawable resource name, and the build fails with a duplicate resources error.

packages/repack/src/loaders/assetsLoader/assetsLoader.ts

@@ -15,7 +15,7 @@ export const raw = true;
 
 const testXml = /\.(xml)$/;
 const testMP4 = /\.(mp4)$/;
-const testImages = /\.(png|jpg|gif|webp)$/;
+const testImages = /\.(png|jpg|jpeg|gif|webp)$/;
 const testFonts = /\.(ttf|otf|ttc)$/;
 
 export default async function repackAssetsLoader(

tests/integration/src/loaders/__fixtures__/assets/TestPhoto@1x.jpeg

@@ -176,6 +176,43 @@ describe('assetLoader', () => {
       }
     );
 
+    it('should emit scaled .jpeg images to matching drawable-* folders', async () => {
+      const { code, volume } = await compileBundle(
+        'android',
+        {
+          ...getReactNativeVirtualModules(),
+          './index.js':
+            "export { default } from './__fixtures__/assets/TestPhoto.jpeg';",
+        },
+        false,
+        undefined,
+        undefined,
+        { extensions: ['jpeg'] }
+      );
+
+      const context: { Export?: { default: Record<string, unknown> } } = {};
+      vm.runInNewContext(code, context);
+
+      expect(context.Export?.default).toMatchObject({
+        name: 'TestPhoto',
+        type: 'jpeg',
+        scales: [1, 2, 3],
+      });
+      for (const [scale, destination] of [
+        [1, 'drawable-mdpi'],
+        [2, 'drawable-xhdpi'],
+        [3, 'drawable-xxhdpi'],
+      ]) {
+        expect(
+          volume.readFileSync(
+            `/out/${destination}/__fixtures___assets_testphoto.jpeg`,
+            'utf8'
+          )
+        ).toBe(`image fixture jpeg @${scale}x\n`);
+      }
+      expect(volume.existsSync('/out/raw')).toBe(false);
+    });
+
     describe.each([
       { mode: 'iOS', platform: 'ios', devServer: false, remote: false },
       {

tests/integration/src/loaders/__fixtures__/assets/TestPhoto@2x.jpeg

@@ -10,13 +10,13 @@ By default, extracted asset files are copied to `assets/` directory for iOS and
 
 When bundling for Android without the development server, extracted assets are placed in the following resource directories:
 
-| Asset                                                                                    | Output directory                                               |
-| ---------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
-| Images (`png`, `jpg`, `gif`, `webp`)                                                     | `drawable-*` (e.g. `drawable-mdpi`, `drawable-hdpi`) per scale |
-| Font binaries (`ttf`, `otf`, `ttc`)                                                      | `font` **and** `raw`                                           |
-| XML font families (`<font-family>`)                                                      | `font`                                                         |
-| Other XML files                                                                          | `drawable-*`                                                   |
-| Everything else (other image formats such as `jpeg` or `svg`, video, audio, other files) | `raw`                                                          |
+| Asset                                                                                   | Output directory                                               |
+| --------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| Images (`png`, `jpg`, `jpeg`, `gif`, `webp`)                                            | `drawable-*` (e.g. `drawable-mdpi`, `drawable-hdpi`) per scale |
+| Font binaries (`ttf`, `otf`, `ttc`)                                                     | `font` **and** `raw`                                           |
+| XML font families (`<font-family>`)                                                     | `font`                                                         |
+| Other XML files                                                                         | `drawable-*`                                                   |
+| Everything else (other image formats such as `bmp` or `svg`, video, audio, other files) | `raw`                                                          |
 
 `xml` and `ttc` are not included in the default [asset extensions](/api/utils/constants#asset_extensions), so `getAssetTransformRules()` doesn't process them. To bundle them, add a rule that uses the Assets loader for these extensions.