rn-auto-height-img
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

react-native-auto-height-image

NPM Version NPM Downloads MIT License Conventional Commits Financial Contributors on Open Collective

This component provides you a simple way to load a remote image and automatically set Image height to the image dimension which fits the provided width.

React Native Image component needs users to set both width and height props.

React Native version requirements: >=0.46.

Installation

yarn add rn-auto-height-img

npm install rn-auto-height-img

Usage

Use local or remote files:

import React, { Component } from 'react';
import AutoHeightImage from 'react-native-auto-height-image';

import image from 'gallifrey-falls.png';

export default class Demo extends Component {
  render() {
    return (
      <View>

        <AutoHeightImage
          width={100}
          source={image}
        />

        <AutoHeightImage
          width={100}
          source={{uri: 'http://placehold.it/350x150'}}
        />

      </View>
    );
  }
}

You can even specify fallback images for when the source fails to load:

import React, { Component } from 'react';
import AutoHeightImage from 'react-native-auto-height-image';

import image from 'gallifrey-falls.png';

export default class Demo extends Component {
  render() {
    return (
      <AutoHeightImage
        width={100}
        source={{uri: 'https://aelroba.github.io/404'}}
        fallbackSource={image}
      />
    );
  }
}

Props

name type isRequired default description
width number N/A image width to fit
maxHeight number Infinity image max height
source number or object N/A local (i.e. require/import) or remote image ({uri: '...'})
fallbackSource number or object N/A local (i.e. require/import) or remote image ({uri: '...'})
onHeightChange func (height) => {} called when updating image height, the argument height might be 0
animated bool false Use Animated.Image instead of Image

Other image props except resizeMode are accepted.

Change Log

Change log

Contributing

Contributing

Licence

MIT

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Related Projects

Package Sidebar

Install

npm i rn-auto-height-img

Weekly Downloads

0

Version

1.0.5

License

MIT

Unpacked Size

24.4 kB

Total Files

16

Last publish

Collaborators

  • a.elroba