Handling assets in the JSS React Native sample app

A JSS React Native application can have two types of assets:

When developing in disconnected mode, we suggest you treat future network assets as static assets. For instance, if you are following a code-first approach, you will likely have assets in your codebase that you will eventually import into Sitecore. At that point, the asset becomes a network asset. However, you might want to test your app with all assets handled as static assets before that.

In React Native, static assets must be referenced in your code with a require() statement so that the React Native packager can resolve references to assets at build time and include them in your app bundle. The asset path must be static, meaning you can not use dynamic values for paths passed to the require() function.

For example, the disconnected data provided in the /data/routes/en.json file contains an image field referencing the /data/media/img/sc_logo.png image file. When the React Native Image component needs to reference that image statically, it must be required with require('/data/media/img/sc_logo.png'), a statement that cannot execute at runtime.

To work around this limitation, you must map static assets in disconnected mode and then swap out references to those assets at runtime.

You can map static asset paths to  require() statements in the /assets/images.disconnected.js file. The file exports an object with keys corresponding to image locations and the corresponding static require() statement.

When retrieving disconnected route data, the application processes the data and replaces any static image paths it encounters with the corresponding value from the map mentioned previously. You can refer to the /src/dataService/dataService.disconnected.js file for implementation details.

When working in connected or connected tunnel mode, you can use the /assets/images.connected.js map, removing references to images retrieved through HTTP requests.