react-native-auto-height-image

Initialized by vivaxy/gt-npm-package

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 react-native-auto-height-image

npm install react-native-auto-height-image

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://vivaxy.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`