React Native Web Image Loader

Using this loader will automatically bundle scaled counterparts too. Since Image component of react-native-web accepts objects as value of its source property it is possible to display scaled images based on device pixel ratio.

This loader will inject an AdaptiveImage class into your bundle. Everywhere you require an image an instance of AdaptiveImage will be returned.

This is my first node.js package so every recommendation is welcome. :smile:

Installation

Install it via npm:

1$ npm install --save-dev react-native-web-image-loader

Usage

In your webpack config use it as a loader for images:

1{
2  ...,
3  module: {
4    rules: [
5      {
6        test: /\.(png|jpe?g|gif)$/,
7        options: {
8          name: 'static/media/[name].[hash:8].[ext]',
9          // publicPath: 'https://cdn.example.com/', // uncomment to override webpack public path
10          // esModule: true
11          scalings: { '@2x': 2, '@3x': 3 },
12        },
13        loader: 'react-native-web-image-loader',
14      },
15    ]
16  }
17}

You're done.

Configuration

The following configuration variables can be defined in the options object:

• name The name template of the output files. (default: [hash].[ext]) You can use the following placeholders:
  • [ext] the extension of the resource
  • [name] the basename of the resource
  • [path] the path of the resource relative to the context query parameter or option.
  • [hash] the hash of the content, hex-encoded md5 by default
• scalings is an object where the keys are the possible filename suffixes and values are the amount of scale. (Default is {"@2x": 2, "@3x": 3}, which means filenames ending with "@2x" will be used on devices where the pixel-ratio is 2)
• imageClassPath the path of image class that should be used instead of AdaptiveImage. This gives you the possibility to use your own image class representation.
• publicPath Specifies a custom public path for the target file(s). Default: __webpack_public_path__ + outputPath. You dynamically set custom public path by passing a function.
• outputPath Specify a filesystem path where the target file(s) will be placed.
• esModule By default, react-native-web-image-loader generates JS modules that use the ES modules syntax. You can disable it by setting its value to false.

Examples

We have the following files:

|--assets/
   |-- pic1.png
   |-- pic1@2x.png
   |-- pic1-3x.png
|--index.js

webpack.config.js

1module.exports = {
2    ...,
3    module: {
4      rules: [
5        {
6          test: /\.(png|jpe?g|gif)$/,
7          options: {
8            name: 'static/media/[name].[hash:8].[ext]',
9            scalings: { '@2x': 2, '@3x': 3 },
10          },
11          loader: 'react-native-web-image-loader',
12        },
13      ]
14    }
15}

index.js

1import React from 'react'
2import { Image } from 'react-native-web'
3
4export default class Picture extends React.Component {
5  render() {
6    return <Image source={require('./assets/pic1.png')} />
7  }
8}

Value of source property looks like this:

1AdaptiveImage {
2    "data": {
3        "uri": "static/media/pic1.abcd1234.png",
4        "uri@2x": "static/media/pic1@2x.4321dcba.png",
5        "uri@3x": "static/media/pic1-3x.efgh5678.png",
6        "width": 128,
7        "height": 64
8    },
9    get uri(),       // returns uri based on pixel ratio
10    get width(),     // returns this.data.width
11    get height(),    // returns this.data.height
12}

So when Image component resolves source it will treat it as a normal object. But value of uri is dynamically returned according to current device pixel ratio.