# react-native-scaled-image

> Image component to add images without defining both both height and width that scales them automatically.

Latest version **0.0.1** (published 2018-03-15) · ISC license · 0 weekly downloads

## Install

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

## Health

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

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

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2018-03-15 |
| First published | 2018-03-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | separate (@types/react-native-scaled-image) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | German Stuarts |
| Maintainers | nanlabs |

## Links

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

## Recent versions

- 0.0.1 (latest) — 2018-03-15

## README

React Native Scaled Image
=========================

React Native Scaled Image is a wrapper of Image. With it, you can add images without the need to define both height or width. The dimensions are calculated automatically using the height or width provided to keep the aspect ratio of the image.

## Installation

`npm install react-native-scaled-image`

## How to use

### Local images, passing only height:
```jsx
import { Component } from 'react';
import ScaledImage from 'react-native-scaled-image';

const localImage = require('images/local-image.png');

class CustomView extends Component {

  render() {
    return (
      <ScaledImage source={localImage} height={100} />
    );
  }
}
```

### Local images, passing only width:
```jsx
import { Component } from 'react';
import ScaledImage from 'react-native-scaled-image';

const localImage = require('images/local-image.png');

class CustomView extends Component {

  render() {
    return (
      <ScaledImage source={localImage} width={200} />
    );
  }
}
```

### Remote images:
```jsx
import { Component } from 'react';
import ScaledImage from 'react-native-scaled-image';

const remoteImage = {uri: 'http://facebook.github.io/react-native/img/header_logo.png'};

class CustomView extends Component {

  render() {
    return (
      <ScaledImage source={remoteImage} width={200} />
    );
  }
}
```

## Attributes

Name | Type | Required | Description
----|---|----|------
**source** | ```ImageSourcePropType/object``` | true | This is the actual image that will be shown
**height** | ```number``` | false | The wanted height for the image
**width** | ```number``` | false | The wanted width for the image
**style** | ```object``` | false | The styles used to modify the image, the accepted attributes are the same as [Image](https://facebook.github.io/react-native/docs/image.html#style)

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