Include image in React Native module

Viewed 77

I'm creating a React Native module along-side a React Native application. Everything with the module works as expected until I introduce images that should exist in the package and not in the application.

Any image from the package does not display in the consuming application.

(Option 1): Including image asset

const image = require('./assets/background.jpg');

const config = {
  styleConfig: {
    background: {
      images: {
        primary: image
      },
  ...
}

export config;

If I include config in the consuming application, everything else works as expected (strings, components, etc) until I try to include <Image source={config.styleConfig.background.images.primary} /> (normally would get this info in a nicer format but for the sake of explanation showing the full path and not any of the abstractions). This does not throw an error but displays a blank image.

(Option 2): Including image component

Once it seemed like including the asset was not working, I created an Image component that used the required image directly and exported this. This also displayed a block the size of the image but did not show the asset. If I do this same operation but create the component and load the asset from the consuming application all is well.

0 Answers
Related