repack

repack copied to clipboard

Environment

"@callstack/repack": "^2.5.2" "react-native": "0.68.1"

Description

I'm using Callstacks repack to build a bunch of widget apps which will be exposed as components and a rendered on the host app. The whole setup seems to be working well except that the images used in a widget are not rendered correctly on the host app; Instead it renders fallback images ( not sure where these are coming from ). I am using React Native's Image component to display the image. Here's what I mean:

Widgets app:

import {Text, View, StyleSheet, Image} from 'react-native';

<View style={[styles.container, styles.shadow]}>
      <Image source={require('./icons/leaf.png')} />
</View>

and so it renders:

Note: Used images as pngs of all sizes : 1x, 2x, 3x, 4x

But when The widget is loaded in the host app through webpack, it displays a completely different image:

Reproducible Demo

Webpack config is the same that comes out of the box. Adding the asset specific config here:

webpack.config.ts

 {
        test: ReactNative.getAssetExtensionsRegExp(
          ReactNative.ASSET_EXTENSIONS,
        ),
        use: {
          loader: '@callstack/repack/assets-loader',
          options: {
            platform,
            devServerEnabled: devServer.enabled,
            /**
             * Defines which assets are scalable - which assets can have
             * scale suffixes: `@1x`, `@2x` and so on.
             * By default all images are scalable.
             */
            scalableAssetExtensions: ReactNative.SCALABLE_ASSETS,
          },
        },
},

Any suggestions or ideas on this? Thanks

Using any kind of static assets from remote chunks is a known limitation of repack, please see this comment for more context and possible workarounds.

@syed-mustaqhim Any luck with what I've suggested in the comment above?

@syed-mustaqhim – Good news, thanks to @jbroma great work (#331) we have first-class support for remote assets. Please check it out :)