react-native image width auto width or height computation
npm install react-native-autosize-imageInspired by vivaxy/react-native-auto-height-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.
yarn add react-native-autosize-image
npm install react-native-autosize-image
Use local or remote files:
``js
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 (
mainAxis='horizontal'
source={image}
/>
mainAxis='vertical'
source={{uri: 'http://placehold.it/350x150'}}
/>
);
}
}
`
You can even specify fallback images for when the source fails to load:
`js
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 (
source={{uri: 'https://vivaxy.github.io/404'}}
fallbackSource={image}
/>
);
}
}
`
| name | type | isRequired | default | description |
| --- | --- | --- | --- | --- |
| mainAxisSize | number | ✔ | N/A | image mainAxisSize to fit |mainAxis
| | 'horizontal'|'vertical' | ✔ | N/A | main axis |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.