React-native-auto-image NPM

react-native-auto-crossAxisSize-image

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-auto-crossAxisSize-image

npm install react-native-auto-crossAxisSize-image

Usage

Use local or remote files:

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

import image from 'gallifrey-falls.png';

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

        <AutoImage
          mainAxisSize={100}
          source={image}
        />

        <AutoImage
          mainAxisSize={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 AutoImage from 'react-native-auto-crossAxisSize-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
`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`