{"id":16800922,"url":"https://github.com/svbutko/react-native-image-resource-generator","last_synced_at":"2025-10-30T20:48:06.093Z","repository":{"id":39582306,"uuid":"389598313","full_name":"svbutko/react-native-image-resource-generator","owner":"svbutko","description":"CLI tool to generate code-friendly image URI source constants for React Native","archived":false,"fork":false,"pushed_at":"2025-02-03T16:26:37.000Z","size":35,"stargazers_count":23,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-15T07:39:23.739Z","etag":null,"topics":["generator","hacktoberfest","icons","images","javascript","productivity","react-native","resources","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/svbutko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-26T10:44:23.000Z","updated_at":"2025-02-03T16:26:40.000Z","dependencies_parsed_at":"2022-08-29T21:10:31.223Z","dependency_job_id":null,"html_url":"https://github.com/svbutko/react-native-image-resource-generator","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svbutko%2Freact-native-image-resource-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svbutko%2Freact-native-image-resource-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svbutko%2Freact-native-image-resource-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svbutko%2Freact-native-image-resource-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svbutko","download_url":"https://codeload.github.com/svbutko/react-native-image-resource-generator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244897893,"owners_count":20528308,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["generator","hacktoberfest","icons","images","javascript","productivity","react-native","resources","typescript"],"created_at":"2024-10-13T09:35:27.937Z","updated_at":"2025-10-30T20:48:06.084Z","avatar_url":"https://github.com/svbutko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-image-resource-generator\n\n[![npm-version](https://img.shields.io/npm/v/react-native-image-resource-generator)](https://www.npmjs.com/package/react-native-image-resource-generator)\n[![npm-downloads](https://img.shields.io/npm/dt/react-native-image-resource-generator)](https://www.npmjs.com/package/react-native-image-resource-generator)\n\n[![GitHub Followers](https://img.shields.io/github/followers/svbutko?label=Follow%20%40svbutko\u0026style=social)](https://github.com/svbutko)\n\nGenerate code-friendly image URI source constants.\nTo learn about use cases and what issues it solves check [this blog post](https://dev.to/svbutko/react-native-image-resource-generator-m14).\n\n## Quick start\n\n### Installation\n\n#### yarn\n\n```sh\nyarn add -D react-native-image-resource-generator\n```\n\n#### npm\n\n```sh\nnpm install --save-dev react-native-image-resource-generator\n```\n\n### Usage\n\n1. Create a folder and put all of your images there (_sub-folders are supported too_). Example:\n   ```\n   project\n   │   package.json\n   │   src  \n   │\n   └───resources\n   │   │   fonts\n   │   │   settings\n   │   │\n   │   └───images\n   │       │   arrow_down.png\n   │       │   arrow_down@2x.png\n   │       │   arrow_down@3x.png\n   │       │   arrow_up.png\n   │       │   ...\n   ```\n2. Add script to your `package.json` scripts or type into terminal:\n   * JavaScript: ```img-res-gen --dir=resources/images --out=src/common/ImageResources.js```\n   * TypeScript ```img-res-gen --dir=resources/images --out=src/common/ImageResources.g.ts --ts```\n3. The result of the previous command will create a file with static image URI sources, which will look something similar to this:\n   ```typescript\n   /* eslint:disable */\n   /* tslint:disable */\n   import {ImageURISource} from \"react-native\";\n   \n   export class ImageResources {\n       static readonly account: ImageURISource = require(\"../../resources/images/account.png\");\n       static readonly arrow_down: ImageURISource = require(\"../../resources/images/arrow_down.png\");\n       static readonly arrow_up: ImageURISource = require(\"../../resources/images/arrow_up.png\");\n       static readonly avatar: ImageURISource = require(\"../../resources/images/avatar.png\");\n       static readonly back: ImageURISource = require(\"../../resources/images/back.png\");\n       static readonly bank: ImageURISource = require(\"../../resources/images/bank.png\");\n       static readonly bell: ImageURISource = require(\"../../resources/images/bell.png\");\n   }\n   ```\n4. After this use it anywhere you need:\n   ```typescript jsx\n   \u003cImage source={ImageResources.account} style={styles.icon} /\u003e\n   ```\n\nIf you added or removed images, simply re-run the script to regenerate the file.\n\n### Options\n\n| Option | Description                                                                | Required | Example                                            |\n|--------|----------------------------------------------------------------------------|----------|----------------------------------------------------|\n| dir    | Relative directory path with images                                        | `True`   | `img-res-gen --dir=resources/images`               |\n| out    | Output file path                                                           | `True`   | `img-res-gen --out=src/common/ImageResources.g.ts` |\n| read   | Read directory path, adds additional path to a file's output required path | `False`  | `img-res-gen --read=build/src`                     |\n| ts     | Should the output file be generated as a TypeScript file                   | `False`  | `img-res-gen --ts`                                 |\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvbutko%2Freact-native-image-resource-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvbutko%2Freact-native-image-resource-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvbutko%2Freact-native-image-resource-generator/lists"}