OTA update issues with minified bundle: Images & Lottie animations not displaying

[hson0512]

I'm encountering issues with OTA updates in our application, specifically related to bundle minification and asset loading. I would really appreciate any guidance on this.

Current Setup:
React Native bundle generation command:
react-native bundle --platform android --dev false --minify=false --entry-file index.js

How we're importing assets:
Images:
<Image source={require('@/assets/images/logo.png')} />
Lottie animations:
<LottieView source={require('@/assets/animation.json')} />

Issues:
Images not displaying with minified bundle:
Images only display correctly after OTA when bundle is generated with --minify=false
With minified bundle (--minify=true), images fail to load after OTA update

Lottie animations not working after OTA:
.lottie files fail to display after hot update
This occurs regardless of minification settings (--minify=true/false)

Steps to Reproduce:
Generate bundle with minification:
react-native bundle --platform android --dev false --minify=true
Deploy OTA update

Observe:
Images fail to load in the app
Lottie animations don't display

Current Workaround:
We're currently forced to use --minify=false to get images working
No current workaround for Lottie animations

Is this a known issue with minified bundles?
Are there specific configurations needed for Lottie animations to work with OTA updates?
Is there a different way I should be importing/requiring these assets?

Environment:
React Native version: 0.75.2
Lottie version: "lottie-react-native": "^7.0.0"

I would really appreciate that could help.

[vantuan88291]

let me take a look

[vantuan88291]

Hi @hson0512 , for the lottie, may I know when you update via OTA, you just update json file from assets, like: require('@/assets/animations/loading.json')?
I believe with OTA update, all assets file can be update, even font, so I think no need to specific config for lottie.

And for image, I have tried with --minify=true and still working, may I know all image even old image cannot show in the app, or just image update via OTA cannot display?

[vantuan88291]

and btw, as I see the document of bundle, if want to enable minify should be: --minify true, not --minify=true.
And one more thing, minify default is true because --dev false, no need to set --minify true in script:

refer: https://fig.io/manual/react-native/bundle

[hson0512]

For better clarity, I'll provide the export-android command I'm currently using on Windows:
"export-android": "if not exist android\output mkdir android\output && react-native bundle --platform android --dev false --minify=false --entry-file index.js --bundle-output android/output/index.android.bundle --assets-dest android/output --sourcemap-output android/sourcemap.js && cd android && powershell Compress-Archive -Path output/* -DestinationPath index.android.bundle.zip -Force && powershell Compress-Archive -Path sourcemap.js -DestinationPath sourcemap.zip -Force && cd .. && del android\sourcemap.js"
If we don't explicitly set --minify=false, then yes, minify defaults to true and after updating via OTA, all images will not display.
For example:
"export-android": "if not exist android\output mkdir android\output && react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/output/index.android.bundle --assets-dest android/output --sourcemap-output android/sourcemap.js && cd android && powershell Compress-Archive -Path output/* -DestinationPath index.android.bundle.zip -Force && powershell Compress-Archive -Path sourcemap.js -DestinationPath sourcemap.zip -Force && cd .. && del android\sourcemap.js"
=> all images will not display.

Regarding the Lottie issue:
I actually use .lottie files instead of JSON. When running export-android, these files are placed in the raw folder, and after updating via OTA, they don't display.
I tried switching to using Lottie files in .json format, and they get bundled into index.android.bundle => display normally.

[vantuan88291]

it weird, are there any specific configs of your babel or metro server? as you can see in example project I already used with minify and works as normal, I also used with react native 0.75, under 0.70 and still fine

[hson0512]

My metro.config.js

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const MetroConfig = require('@ui-kitten/metro-config');

const evaConfig = {
  evaPackage: '@eva-design/eva',
  customMappingPath: './mapping.json',
};

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  resolver: {
    assetExts: getDefaultConfig(__dirname).resolver.assetExts.concat(['lottie', 'ttf']),
  },
};

module.exports = mergeConfig(
  getDefaultConfig(__dirname),
  MetroConfig.create(evaConfig),
  config
);

babel.config.js

module.exports = {
  presets: [
    'module:@react-native/babel-preset',
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],    
    ['react-native-reanimated/plugin'],
    [
      'module-resolver',
      {
        root: ['./src'],        
        alias: {
          '@': './src',
          '@core': './src/core',
          '@features': './src/features',
          '@roles': './src/roles',
          '@shared': './src/shared'
        },
      },
    ],
  ]
};

Personally, I haven't seen any abnormalities in the 2 files that could cause errors.

[vantuan88291]

Hi @hson0512 , for Lottie issue I have found it related to this library, can refer here and try: lottie-react-native/lottie-react-native#1098

And about the image not show with minify, let debug together, you can try with example project first, and compare with your project and see any different things.

[rayusoes]

Hi,
I had the same problem. In my case, it happened because I was compressing the folder using PowerShell.
Using the command line zip in Linux worked for me.

Thank you for your project!