Skip to content

egorshulga/react-native-autosize-image

 
 

Repository files navigation

react-native-autosize-image

Inspired by vivaxy/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 crossAxisSize to the image dimension which fits the provided mainAxisSize.

ReactNative Image component needs users to set both mainAxisSize and crossAxisSize props.

Installation

yarn add react-native-autosize-image

npm install react-native-autosize-image

Usage

Use local or remote files:

import React, { Component } from 'react';
import AutoImage from 'react-native-autosize-image';

import image from 'gallifrey-falls.png';

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

        <AutoImage
          mainAxisSize={100}
          mainAxis='horizontal'
          source={image}
        />

        <AutoImage
          mainAxisSize={100}
          mainAxis='vertical'
          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 AutoImage from 'react-native-autosize-image';

import image from 'gallifrey-falls.png';

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

Props

name type isRequired default description
mainAxisSize number N/A image mainAxisSize to fit
mainAxis 'horizontal' 'vertical' N/A
maxCrossAxisSize number Infinity image max crossAxisSize
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: '...'})
onCrossAxisSizeChange func (crossAxisSize) => {} called when updating image crossAxisSize, the argument crossAxisSize 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

Packages

No packages published

Languages

  • JavaScript 100.0%