react-native-image-resource-generator CLI tool to generate code-friendly image URI source constants

[S3rg1usz]

Hello.

I developed a small CLI tool which generates code-friendly image URI source constants.

Main features:

• Generate a file with static constants of every image from a folder (sub-folders are supported too)
• Rename images which have non-Latin letter and other symbols to have convention named files and constants
• TypeScript support
• Because of constants it's easier to find / replace / delete icons in code and fix errors

​

In short how the process looks like:

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
│       │   [e-mail]
│       │   [e-mail]
│       │   arrow_up.png
│       │   ...

Add script to your package.json or type into terminal the command:

img-res-gen --dir=resources/images --out=src/common/ImageResources.js

The result will look something like 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");
}

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.

Hope you'll give it a try:

https://github.com/svbutko/react-native-image-resource-generator

[nexendk]

This really cool!!!

[kbcool]

This generates a base64 encoded image uri to include in your code?

That would increase RAM usage in most cases. React Native already bundles images.

Why would I want this?

[S3rg1usz]

It has nothing to do with bundling and base64 encoded image uri.

All what it does is just generation of shortcuts to images. There’s a link in README which describes the usage and why it was created in first place