react-native-file-hash-plugin

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

react-native-file-hash-plugin

★ 9 Open GitHub ↗

create file hash in react-native

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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

```bash
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 :

```js
/**
 * 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:

```js
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:

```bash
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.

```js
├─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`,

```js
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:

```js
 // 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,
  ...
};
  
```

react-native-file-hash-plugin

Today's picks

Was this content helpful?

Recent Feedback

react-native-file-hash-plugin

Today's picks

Was this content helpful?

Recent Feedback

Download README