react-native-scaled-image v0.0.1

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:

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:

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:

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