React Native Image Resource Generator

Nearly every single react-native application uses images and icons to make them look more appealing to the end user or help them use it by providing additional information.

Since react-native became publicly available the process of adding these images to apps didn't change much and while working with different people and apps there've been issues, problems and mild inconveniences about which I'd like to present here and most importantly give a solution to them.

Issues, problems and motivation

File existence

In order to use images and icons in code they first have to be imported. The most common way is:

<Image source={require("./my-icon.png")} />

By using require we are manually setting the path to our file with little IDE support. And without any 3rd party plugins IDE can't guarantee whether the file exists or not, there won't be any error or at least warning to indicate that file doesn't exist. Like the file can be deleted, or you accidentally added some symbol into the require path. You will never know about it until you launch the app and open the screen where this icon is used.

Manual typing

As mentioned before:

By using require we are manually setting the path to our file...

If it's 1-5 icons it might be fine but if there are more than 10 or 50 or even 100 (there are lots of different cases). And always manually typing paths is tedious and takes your valuable time.

Icon replacement/removal

Possibly a single icon can be used in different components/screens and for some reasons we have to remove it and replace it with a new one. In this case we have to search for every usage of this icon in our application and replace it with a new one, although with search-and-replacement it's a bit easier but still takes time.

Icon names

Not everybody create icons and UI itself, most of the time a designer does this job and while drawing and finishing icons they receive names and sometimes a person can write things like:

bell icon.png
$.png
icon,t.png
icon's.png
icon".png

or there might be even non-Latin alphabet letters:

звонок.png
zurück.png
鐘.png

Not everybody do things like this but it's still possible and after seeing this one can only introduce coding/naming conventions to a designer and politely ask him to change this or in case if it's impossible to manually change it by yourself.

Solution

react-native-image-resource-generator was developed to overcome all of these problems, add structure, save time and nerves.

It's a simple CLI tool which generates code-friendly image URI source constants to use in projects.

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

project
│   package.json
│   src  
│
└───resources
│   │   fonts
│   │   settings
│   │
│   └───images
│       │   arrow_down.png
│       │   arrow_down@2x.png
│       │   arrow_down@3x.png
│       │   arrow_up.png
│       │   ...

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

The result of the 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");
}

After this use it anywhere you need:

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

You don't need to manually write requires anymore and stop worrying about file existence and path names.

If you added or removed images, simply re-run the script to regenerate the file. IDE will give you a list of errors of used constants which don't exist anymore and you can simply replace them.

As mentioned before it works with JavaScript and with TypeScript.

To handle non-Latin letters and other symbols and follow naming conventions, the tool uses transliteration under the hood and transliterates file names.

Hope you will use it in your projects and it will serve you well. And if you see any issues or would like to propose changes, feel free to create PRs!