react-native-file-hash-plugin

create file hash and transform asset in react-native bundle! when you use react-native run-ios/run-android it will not work, it is just use in react-native bundle ...

Installation

npm

npm install --save-dev react-native-file-hash-plugin

metro

Add react-native-file-hash-plugin to the list of assetPlugins in your metro.config.js file under the transformer section.

for example :

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
    assetPlugins: ["react-native-file-hash-plugin"],
  },
};

Configuration

You can configure the plugin behaviour through the optional fileHashPlugin field in your metro.config.js file under the transformer section.

For example:

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
    assetPlugins: ["react-native-file-hash-plugin"],
  },
  fileHashPlugin: {
    // optional
    // the file type to hash,default is png,jpeg,jpg,gif
    types: ["png", "jpeg", "jpg", "gif"],
    // optional
    // the input params is file name and file path; the output is hash string ,default is react-native hash
    hashFunction: (fileName, path) => {
      return "your hash";
    },
    // optional
    // the  ignore file path regex
    ignoreRegex: null,
    // optional
    // add external options to asset, resturn must be object
    externalOptions: (fileName, path) => {
      return {
        key: "mrgaogang",
      };
    },
  },
};

Output

example:

react-native bundle --entry-file index.js --bundle-output ./bundle/ios.bundle --platform ios --reset-cache --assets-dest ./bundle --dev false

suggest to add --reset-cache params.

will output like this, and the file will add hash string.

├─assets
│ ├─app.json
│ ├─img
│ │ └─success-c64ef9278d09de068787ded3a56ed560.png
│ └─node_modules
│   └─react-native
│     └─Libraries
└─ios.bundle

Others

if you want to transform Images, also you can use Image.resolveAssetSource.setCustomSourceTransformer,

Image.resolveAssetSource.setCustomSourceTransformer((resolver) => {
  // do any thing you want
  if (Platform.OS === 'android') {
      return this.isLoadedFromFileSystem()
        ? this.drawableFolderInBundle()
        : this.resourceIdentifierWithoutScale();
    } else {
      return this.scaledAssetURLNearBundle();
    }
});

the resolver is:

 // node_modules/react-native/Libraries/Image/AssetSourceResolver.js
  serverUrl: ?string;
  // where the jsbundle is being run from
  jsbundleUrl: ?string;
  // the asset to resolve
  asset: PackagerAsset;
  
 // PackagerAsset is 
 export type PackagerAsset = {
  +__packager_asset: boolean,
  +fileSystemLocation: string,
  +httpServerLocation: string,
  +width: ?number,
  +height: ?number,
  +scales: Array<number>,
  +hash: string,
  +name: string,
  +type: string,
  ...
};