# react-native-responsive-image

> Image component, that resizes itself appropriately on various screensizes.

Latest version **2.3.1** (published 2018-03-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-responsive-image
pnpm add react-native-responsive-image
yarn add react-native-responsive-image
bun add react-native-responsive-image
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.1 |
| Published | 2018-03-16 |
| First published | 2015-06-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | separate (@types/react-native-responsive-image) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 234.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 397 |
| Author | Ladislav Maxa |
| Maintainers | ladislavmaxa01 |
| Keywords | React, Native |

## Links

- npm: https://www.npmjs.com/package/react-native-responsive-image
- Repository: https://github.com/Dharmoslap/react-native-responsive-images
- Homepage: https://github.com/Dharmoslap/react-native-responsive-images#readme
- Issues: https://github.com/Dharmoslap/react-native-responsive-images/issues
- npm.io page: https://npm.io/package/react-native-responsive-image

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.3.1 (latest) — 2018-03-16
- 2.3.0 — 2018-03-15
- 2.2.1 — 2018-02-06
- 2.2.0 — 2017-12-07
- 2.1.1 — 2017-12-04
- 2.1.0 — 2017-04-23
- 2.0.2 — 2017-02-07
- 2.0.1 — 2017-01-13
- 2.0.0 — 2017-01-12
- 1.3.0 — 2016-05-22
- 1.2.0 — 2016-04-05
- 1.1.4 — 2016-02-21
- 1.1.2 — 2016-01-31
- 1.1.1 — 2016-01-03
- 1.1.0 — 2016-01-03
- … 4 more at https://npm.io/package/react-native-responsive-image/versions

## README

# React Native Responsive Image

[![David](https://david-dm.org/dharmoslap/react-native-responsive-image.svg)](https://david-dm.org/dharmoslap/react-native-responsive-image)
[![npm](https://img.shields.io/npm/v/react-native-responsive-image.svg)](https://www.npmjs.com/package/react-native-responsive-image)
[![GitHub commits](https://img.shields.io/github/commits-since/dharmoslap/react-native-responsive-image/2.1.0.svg?maxAge=2592000)]()
[![npm](https://img.shields.io/npm/dt/react-native-responsive-image.svg?maxAge=2592000)](https://www.npmjs.com/package/react-native-responsive-image)

## Why?

React Native's Image size is rendered the same regardless of device screen size and screen resolution.
This component scales itself seemlesly on all iOS and Android devices.

## Installation

`npm install react-native-responsive-image --save`


## Usage


`<ResponsiveImage>` is expecting `initWidth` and `initHeight` props.


These values are used to set image size on any device that has screen size iPhone Plus, or larger.
Image is then scaled down for any smaller device.

Optional prop `component` is used to pass down either an `Image` or `ImageBackground` imported react-native (defaults to `Image` if not provided)



## Example

```javascript
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, View } from 'react-native';
import ResponsiveImage from 'react-native-responsive-image';

class App extends Component {
  render() {
    return (
      <View style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
          <ResponsiveImage source={{uri: 'https://reactjs.org/logo-og.png'}} initWidth="138" initHeight="138"/>
          <ResponsiveImage source={{uri: 'https://reactjs.org/logo-og.png'}} initWidth="138" initHeight="138"/>
          <ResponsiveImage source={{uri: 'https://reactjs.org/logo-og.png'}} initWidth="138" initHeight="138"/>
      </View>
    );
  }
}

AppRegistry.registerComponent('ResponsiveImageExample', () => App);
```


For `initWidth=138` it looks like this:

| Device               | Screen width | Scale | `<Image>` width |
|----------------------|--------------|-------|---------------|
| iPhone SE            | 320          | 0.77  | 106           |
| iPhone X             | 375          | 0.902 | 117           |
| iPhone8 Plus         | 414          | 1     | 138           |
| Nokia 5              | 360          | 0.87  | 120           |
| iPad (or any tablet) | -            | 1     | 138           |


## Just one image?

It sounds like you could save some loading by delivering low resolution images to screens with lower resolution. The best way is to serve just one high-resolution (retina) well compressed image. It’s surprising how well they can be compressed, and the result looks the same.

![Retina Compression](https://raw.githubusercontent.com/Dharmoslap/react-native-responsive-image/master/retina.png)


## Example project

### Create project

`create-react-native-app ResponsiveImageExample`

`cp ./example/App.js ./ResponsiveImageExample/App.js`

`cp -R ./src ./ResponsiveImageExample`

`cd ResponsiveImageExample`

`yarn start`

## Development

1. Modify any files in ./src directory

2. Propagate changes by `cp -R ./src ./ResponsiveImageExample/src`

---
_Source: https://npm.io/package/react-native-responsive-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._