react-native-image-resource-generator

Generate code-friendly image URI source constants. To learn about use cases and what issues it solves check this blog post.

Quick start

Installation

yarn

yarn add -D react-native-image-resource-generator

npm

npm install --save-dev react-native-image-resource-generator

Usage

1. Create a folder and put all of your images there (sub-folders are supported too). Example:

project
│   package.json
│   src  
│
└───resources
│   │   fonts
│   │   settings
│   │
│   └───images
│       │   arrow_down.png
│       │   [email protected]
│       │   [email protected]
│       │   arrow_up.png
│       │   ...

2. Add script to your package.json scripts or type into terminal:
   • JavaScript: img-res-gen --dir=resources/images --out=src/common/ImageResources.js
   • TypeScript img-res-gen --dir=resources/images --out=src/common/ImageResources.g.ts --ts
3. The result of the previous command will create a file with static image URI sources, which will look something similar to this:

/* eslint:disable */
/* tslint:disable */
import {ImageURISource} from "react-native";

export class ImageResources {
    static readonly account: ImageURISource = require("../../resources/images/account.png");
    static readonly arrow_down: ImageURISource = require("../../resources/images/arrow_down.png");
    static readonly arrow_up: ImageURISource = require("../../resources/images/arrow_up.png");
    static readonly avatar: ImageURISource = require("../../resources/images/avatar.png");
    static readonly back: ImageURISource = require("../../resources/images/back.png");
    static readonly bank: ImageURISource = require("../../resources/images/bank.png");
    static readonly bell: ImageURISource = require("../../resources/images/bell.png");
}

4. After this use it anywhere you need:

<Image source={ImageResources.account} style={styles.icon} />

If you added or removed images, simply re-run the script to regenerate the file.

Options

| Option | Description | Required | Example |---------------|-----------------------------------------------------------------------------|----------|--------------------------------------- | dir | Relative directory path with images | True | img-res-gen --dir=resources/images | out | Output file path | True | img-res-gen --out=src/common/ImageResources.g.ts | read | Read directory path, adds additional path to a file's output required path | False | img-res-gen --read=build/src | ts | Should the output file be generated as a TypeScript file | False | img-res-gen --ts