Skip to main content

Images

Before adding images​

There are SF Symbols and Material Vector Icons included in this project, maybe will suit your needs better rather than adding more resources.

Adding images​

To add images, simply put your images into /resources/images folder (you can add sub-folders inside there)

And thanks to react-native-image-resource-generator, run the following script from your package.json:

npm run generate-image-resources

It will generate src/common/ImageResources.g.ts, and also will fix some of your unacceptable names.

File content will look similar to this:

/* eslint-disable */
/* tslint:disable */
import {ImageURISource} from "react-native";

/**
 * This file is auto-generated by react-native-image-resource-generator
 * !!! DO NOT EDIT !!!
 * For more information check the documentation:
 * https://github.com/svbutko/react-native-image-resource-generator
*/

export class ImageResources {
  static readonly camera: ImageURISource = require("../../resources/images/camera.png");
}

Accessing images​

To access the images which you added, simply call them the next way:

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