react-native-auto-height-image

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.

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

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
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

Other image props except resizeMode are accepted.

GitHub