#getAssetTransformRules

A helper function that generates module.rules configuration for handling assets in React Native applications.

#Parameters

interface GetAssetTransformRulesOptions {
  inline?: boolean;
  maxInlineSize?: number;
  remote?: {
    publicPath: string;
    assetPath?: (args: {
      resourcePath: string;
      resourceFilename: string;
      resourceDirname: string;
      resourceExtensionType: string;
    }) => string;
  };
  svg?: "svgr" | "xml" | "uri" | { type: "svgr", options: Record<string, any> };
}

#options

Configuration options for asset transformations.

#options.inline

• Type: boolean

Whether to inline assets as base64 URIs.

#options.maxInlineSize

• Type: number

File size threshold in bytes used together with inline: true. Assets whose largest scale variant is smaller than or equal to this value will be inlined; larger assets will be extracted as separate files. Has no effect when inline is not true.

#options.remote

• Type: object

Configuration for remote asset loading.

#options.remote.publicPath

• Type: string
• Required: true

Public path for loading remote assets.

See assetsLoader documentation for reference.

#options.remote.assetPath

• Type: (args: { resourcePath: string; resourceFilename: string; resourceDirname: string; resourceExtensionType: string; }) => string

A function to customize how the asset path is generated for remote assets.

See assetsLoader documentation for reference.

#options.svg

• Type: 'svgr' | 'xml' | 'uri' | { type: "svgr", options: Record<string, any>}

Determines how SVG files should be processed:

• 'svgr': Uses @svgr/webpack to transform SVGs into React Native components
  • type: "svgr": Uses @svgr/webpack to transform SVGs into React Native components and allows to configure additional options to @svgr/webpack.
• 'xml': Loads SVGs as raw XML source to be used with SvgXml from react-native-svg
• 'uri': Loads SVGs as inline URIs to be used with SvgUri from react-native-svg

#options.svg.options

• Type: Record<string, any>

Allows to configure additional options to @svgr/webpack. The full list of available options can be found in the svgr doc.

#Example

const Repack = require("@callstack/repack");

module.exports = {
  module: {
    rules: [
      ...Repack.getAssetTransformRules({
        svg: "svgr",
      }),
    ],
  },
};