Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/svbutko/react-native-image-resource-generator
CLI tool to generate code-friendly image URI source constants for React Native
https://github.com/svbutko/react-native-image-resource-generator
generator hacktoberfest icons images javascript productivity react-native resources typescript
Last synced: 2 months ago
JSON representation
CLI tool to generate code-friendly image URI source constants for React Native
- Host: GitHub
- URL: https://github.com/svbutko/react-native-image-resource-generator
- Owner: svbutko
- License: mit
- Created: 2021-07-26T10:44:23.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-31T17:43:08.000Z (over 2 years ago)
- Last Synced: 2024-10-14T09:35:25.440Z (3 months ago)
- Topics: generator, hacktoberfest, icons, images, javascript, productivity, react-native, resources, typescript
- Language: JavaScript
- Homepage:
- Size: 97.7 KB
- Stars: 22
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-image-resource-generator
[](https://www.npmjs.com/package/react-native-image-resource-generator)
[](https://www.npmjs.com/package/react-native-image-resource-generator)
[](https://github.com/svbutko)
[](https://twitter.com/svbutko)
Generate code-friendly image URI source constants.
To learn about use cases and what issues it solves check [this blog post](https://dev.to/svbutko/react-native-image-resource-generator-m14).
## Quick start
### Installation
#### yarn
```sh
yarn add -D react-native-image-resource-generator
```
#### npm
```sh
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:
```typescript
/* 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:
```typescript jsx
```
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`