#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> };
  enableRawJson?: boolean;
}

#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.

#options.enableRawJson

• Type: boolean
• Default: true

Whether to load .json files as raw text instead of parsing them at build time.

When enabled (the default), a rule with type: "json" and generator: { JSONParse: false } is added, so the bundled JSON is emitted as a string and parsed at runtime with JSON.parse('...'). This keeps the bundle smaller for large JSON files, since the parsed object is not inlined into the bundle.

Set it to false to disable the rule and let the bundler parse .json files at build time.

#Example

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

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