Tools

This section applies to Rebar only. The tools unit consists of scripts automating different aspects of working with Rebar.

Build App Images

Usage

The tool renders PNG images from SVG vector source for use within the React Native apps. By convention the SVG files are placed in the app/images sub-directory of the respective unit. The PNG files are rendered within the same directory:

./
  └── units
      ├── unit1
      │   .....
      ├── rb-payments
      │   ├── components
      │   │   └── MyCreditCardComponent.js
      │   └── images
      │       └── Icon_AmericanExpress.svg
      │   .....
      └── unitX

yarn build-app-images

./
  └── units
      ├── unit1
      │   .....
      ├── rb-payments
      │   ├── components
      │   │   └── MyCreditCardComponent.js
      │   └── images
      │       ├── Icon_AmericanExpress.png
      │       ├── Icon_AmericanExpress.svg
      │       ├── Icon_AmericanExpress@2x.png
      │       └── Icon_AmericanExpress@3x.png
      │   .....
      └── unitX

Once PNG images are rendered they can be included in code as explained in Static Image Resources by using a require statement. As an example, a component called MyCreditCardComponent that needs to display credit card images can load a static image from within the project with a JSX tag like this:

class MyCreditCardComponent extends React.Component
{
  render()
  {
    return <Image source={ require( '../images/Icon_AmericanExpress.png' ) } />
  }
}

Example

In the following example credit card images are present in the payments unit as SVG files. They are all in size 60x40:

$ pwd
/Projects/Rebar
$ ls -l ./units/rb-payments/app/images
total 64
-rw-r--r--@ 1 neil  staff  2914 Oct  5 01:42 Icon_AmericanExpress.svg
-rw-r--r--@ 1 neil  staff   767 Oct  4 19:29 Icon_CreditCardOutline.svg
-rw-r--r--@ 1 neil  staff  1687 Oct  5 01:25 Icon_DinersClub.svg
-rw-r--r--@ 1 neil  staff  4176 Oct  4 19:30 Icon_Discover.svg
-rw-r--r--@ 1 neil  staff  1400 Oct  4 19:31 Icon_JCB.svg
-rw-r--r--@ 1 neil  staff  1894 Oct  4 19:33 Icon_MasterCard.svg
-rw-r--r--@ 1 neil  staff  2734 Oct  5 01:28 Icon_Visa.svg

Running the tool the first time produces the following result:

$ yarn build-app-images

> @10.10.2 build-app-images /Projects/Rebar
> babel-node ./units/rb-tools/scripts/build-app-images.js

Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress.svg, last modified: 2016/10/5 8:42:51
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress.png, width: 60, height: 40
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress@2x.png, width: 120, height: 80
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress@3x.png, width: 180, height: 120
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline.svg, last modified: 2016/10/5 2:29:28
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline.png, width: 60, height: 40
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline@2x.png, width: 120, height: 80
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline@3x.png, width: 180, height: 120
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub.svg, last modified: 2016/10/5 8:25:8
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub.png, width: 60, height: 40
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub@2x.png, width: 120, height: 80
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub@3x.png, width: 180, height: 120
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover.svg, last modified: 2016/10/5 2:30:48
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover.png, width: 60, height: 40
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover@2x.png, width: 120, height: 80
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover@3x.png, width: 180, height: 120
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB.svg, last modified: 2016/10/5 2:31:17
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB.png, width: 60, height: 40
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB@2x.png, width: 120, height: 80
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB@3x.png, width: 180, height: 120
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard.svg, last modified: 2016/10/5 2:33:49
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard.png, width: 60, height: 40
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard@2x.png, width: 120, height: 80
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard@3x.png, width: 180, height: 120
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa.svg, last modified: 2016/10/5 8:28:45
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa.png, width: 60, height: 40
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa@2x.png, width: 120, height: 80
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa@3x.png, width: 180, height: 120
$ ls -l ./units/rb-payments/app/images
total 272
-rw-r--r--  1 neil  staff  1426 Oct  5 17:02 Icon_AmericanExpress.png
-rw-r--r--@ 1 neil  staff  2914 Oct  5 01:42 Icon_AmericanExpress.svg
-rw-r--r--  1 neil  staff  2860 Oct  5 17:03 Icon_AmericanExpress@2x.png
-rw-r--r--  1 neil  staff  4301 Oct  5 17:03 Icon_AmericanExpress@3x.png
-rw-r--r--  1 neil  staff   397 Oct  5 17:03 Icon_CreditCardOutline.png
-rw-r--r--@ 1 neil  staff   767 Oct  4 19:29 Icon_CreditCardOutline.svg
-rw-r--r--  1 neil  staff   879 Oct  5 17:03 Icon_CreditCardOutline@2x.png
-rw-r--r--  1 neil  staff  1400 Oct  5 17:03 Icon_CreditCardOutline@3x.png
-rw-r--r--  1 neil  staff  1333 Oct  5 17:03 Icon_DinersClub.png
-rw-r--r--@ 1 neil  staff  1687 Oct  5 01:25 Icon_DinersClub.svg
-rw-r--r--  1 neil  staff  2854 Oct  5 17:03 Icon_DinersClub@2x.png
-rw-r--r--  1 neil  staff  4498 Oct  5 17:03 Icon_DinersClub@3x.png
-rw-r--r--  1 neil  staff  1545 Oct  5 17:03 Icon_Discover.png
-rw-r--r--@ 1 neil  staff  4176 Oct  4 19:30 Icon_Discover.svg
-rw-r--r--  1 neil  staff  3381 Oct  5 17:03 Icon_Discover@2x.png
-rw-r--r--  1 neil  staff  5057 Oct  5 17:03 Icon_Discover@3x.png
-rw-r--r--  1 neil  staff   945 Oct  5 17:03 Icon_JCB.png
-rw-r--r--@ 1 neil  staff  1400 Oct  4 19:31 Icon_JCB.svg
-rw-r--r--  1 neil  staff  1858 Oct  5 17:03 Icon_JCB@2x.png
-rw-r--r--  1 neil  staff  2843 Oct  5 17:03 Icon_JCB@3x.png
-rw-r--r--  1 neil  staff  1335 Oct  5 17:03 Icon_MasterCard.png
-rw-r--r--@ 1 neil  staff  1894 Oct  4 19:33 Icon_MasterCard.svg
-rw-r--r--  1 neil  staff  2690 Oct  5 17:03 Icon_MasterCard@2x.png
-rw-r--r--  1 neil  staff  4427 Oct  5 17:03 Icon_MasterCard@3x.png
-rw-r--r--  1 neil  staff  1492 Oct  5 17:03 Icon_Visa.png
-rw-r--r--@ 1 neil  staff  2734 Oct  5 01:28 Icon_Visa.svg
-rw-r--r--  1 neil  staff  3073 Oct  5 17:03 Icon_Visa@2x.png
-rw-r--r--  1 neil  staff  4682 Oct  5 17:03 Icon_Visa@3x.png

Running the tool again is much faster, since it detects that the PNG images are up to date:

$ yarn build-app-images

> @10.10.2 build-app-images /Projects/Rebar
> babel-node ./units/rb-tools/scripts/build-app-images.js

Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress.svg, last modified: 2016/10/5 8:42:51
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress.png, last modified: 2016/10/6 0:2:59
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress@2x.png, last modified: 2016/10/6 0:3:0
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress@3x.png, last modified: 2016/10/6 0:3:0
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline.svg, last modified: 2016/10/5 2:29:28
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline.png, last modified: 2016/10/6 0:3:1
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline@2x.png, last modified: 2016/10/6 0:3:2
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline@3x.png, last modified: 2016/10/6 0:3:3
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub.svg, last modified: 2016/10/5 8:25:8
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub.png, last modified: 2016/10/6 0:3:3
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub@2x.png, last modified: 2016/10/6 0:3:4
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub@3x.png, last modified: 2016/10/6 0:3:5
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover.svg, last modified: 2016/10/5 2:30:48
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover.png, last modified: 2016/10/6 0:3:6
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover@2x.png, last modified: 2016/10/6 0:3:10
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover@3x.png, last modified: 2016/10/6 0:3:11
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB.svg, last modified: 2016/10/5 2:31:17
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB.png, last modified: 2016/10/6 0:3:11
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB@2x.png, last modified: 2016/10/6 0:3:12
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB@3x.png, last modified: 2016/10/6 0:3:13
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard.svg, last modified: 2016/10/5 2:33:49
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard.png, last modified: 2016/10/6 0:3:13
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard@2x.png, last modified: 2016/10/6 0:3:14
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard@3x.png, last modified: 2016/10/6 0:3:15
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa.svg, last modified: 2016/10/5 8:28:45
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa.png, last modified: 2016/10/6 0:3:16
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa@2x.png, last modified: 2016/10/6 0:3:17
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa@3x.png, last modified: 2016/10/6 0:3:19

If a certain PNG image is missing, this is detected, and the PNG file is created. In the example below, this is Icon_AmericanExpress@2x.png:

$ rm ./units/rb-payments/app/images/Icon_AmericanExpress@2x.png
$ yarn build-app-images

> @10.10.2 build-app-images /Projects/Rebar
> babel-node ./units/rb-tools/scripts/build-app-images.js

Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress.svg, last modified: 2016/10/5 8:42:51
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress.png, last modified: 2016/10/6 0:2:59
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress@2x.png, width: 120, height: 80
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress@3x.png, last modified: 2016/10/6 0:3:0
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline.svg, last modified: 2016/10/5 2:29:28
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline.png, last modified: 2016/10/6 0:3:1
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline@2x.png, last modified: 2016/10/6 0:3:2
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline@3x.png, last modified: 2016/10/6 0:3:3
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub.svg, last modified: 2016/10/5 8:25:8
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub.png, last modified: 2016/10/6 0:3:3
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub@2x.png, last modified: 2016/10/6 0:3:4
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub@3x.png, last modified: 2016/10/6 0:3:5
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover.svg, last modified: 2016/10/5 2:30:48
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover.png, last modified: 2016/10/6 0:3:6
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover@2x.png, last modified: 2016/10/6 0:3:10
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover@3x.png, last modified: 2016/10/6 0:3:11
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB.svg, last modified: 2016/10/5 2:31:17
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB.png, last modified: 2016/10/6 0:3:11
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB@2x.png, last modified: 2016/10/6 0:3:12
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB@3x.png, last modified: 2016/10/6 0:3:13
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard.svg, last modified: 2016/10/5 2:33:49
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard.png, last modified: 2016/10/6 0:3:13
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard@2x.png, last modified: 2016/10/6 0:3:14
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard@3x.png, last modified: 2016/10/6 0:3:15
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa.svg, last modified: 2016/10/5 8:28:45
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa.png, last modified: 2016/10/6 0:3:16
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa@2x.png, last modified: 2016/10/6 0:3:17
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa@3x.png, last modified: 2016/10/6 0:3:19

If an SVG file is modified (detected by last modified date), all PNG images are re-rendered. In the example below this is Icon_AmericanExpress.svg:

$ touch ./units/rb-payments/app/images/Icon_AmericanExpress.svg
$ yarn build-app-images

> @10.10.2 build-app-images /Projects/Rebar
> babel-node ./units/rb-tools/scripts/build-app-images.js

Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress.svg, last modified: 2016/10/6 0:9:13
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress.png, width: 60, height: 40
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress@2x.png, width: 120, height: 80
Rendering PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_AmericanExpress@3x.png, width: 180, height: 120
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline.svg, last modified: 2016/10/5 2:29:28
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline.png, last modified: 2016/10/6 0:3:1
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline@2x.png, last modified: 2016/10/6 0:3:2
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_CreditCardOutline@3x.png, last modified: 2016/10/6 0:3:3
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub.svg, last modified: 2016/10/5 8:25:8
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub.png, last modified: 2016/10/6 0:3:3
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub@2x.png, last modified: 2016/10/6 0:3:4
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_DinersClub@3x.png, last modified: 2016/10/6 0:3:5
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover.svg, last modified: 2016/10/5 2:30:48
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover.png, last modified: 2016/10/6 0:3:6
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover@2x.png, last modified: 2016/10/6 0:3:10
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Discover@3x.png, last modified: 2016/10/6 0:3:11
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB.svg, last modified: 2016/10/5 2:31:17
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB.png, last modified: 2016/10/6 0:3:11
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB@2x.png, last modified: 2016/10/6 0:3:12
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_JCB@3x.png, last modified: 2016/10/6 0:3:13
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard.svg, last modified: 2016/10/5 2:33:49
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard.png, last modified: 2016/10/6 0:3:13
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard@2x.png, last modified: 2016/10/6 0:3:14
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_MasterCard@3x.png, last modified: 2016/10/6 0:3:15
Processing SVG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa.svg, last modified: 2016/10/5 8:28:45
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa.png, last modified: 2016/10/6 0:3:16
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa@2x.png, last modified: 2016/10/6 0:3:17
Skipping PNG: /Projects/Rebar/units/rb-payments/app/images/Icon_Visa@3x.png, last modified: 2016/10/6 0:3:19

For details on the inner workings of the scrips review Converting SVG to PNG in multiple resolutions for React Native.

codefoundries

Copyright 2013-2018 Code Foundries