https://github.com/mrgaogang/react-native-file-hash-plugin
create file hash in react-native
https://github.com/mrgaogang/react-native-file-hash-plugin
file file-hash hash react-native react-native-hash
Last synced: 10 months ago
JSON representation
create file hash in react-native
- Host: GitHub
- URL: https://github.com/mrgaogang/react-native-file-hash-plugin
- Owner: MrGaoGang
- License: mit
- Created: 2020-10-14T01:51:41.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-12-11T09:32:43.000Z (about 5 years ago)
- Last Synced: 2024-11-08T09:50:48.147Z (over 1 year ago)
- Topics: file, file-hash, hash, react-native, react-native-hash
- Language: TypeScript
- Homepage:
- Size: 79.1 KB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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,
+hash: string,
+name: string,
+type: string,
...
};
```