react-native-auto-dimensions-image
Version:
This component can adjust the dimensions according to the given height or width. Both dimensions can be set for any local or server image
71 lines (54 loc) • 3.96 kB
Markdown
# react-native-auto-dimensions-image
This component can adjust the dimensions according to the given height or width. Both dimensions can be set for any local or server image
## Installation
`npm i react-native-auto-dimensions-image`
## Usage
```
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import AutoDimensionImage from 'react-native-auto-dimensions-image';
export default class Test extends Component {
render() {
return (
<View>
{/* Remote image URL */}
<AutoDimensionImage
source={{
uri: 'https://images.unsplash.com/photo-1616455579100-2ceaa4eb2d37?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Ym13JTIwY2FyfGVufDB8fDB8fA%3D%3D&w=1000&q=80'
}}
dimensionType="height"
dimensionValue={350}
otherDimensionMaxValue={200}
style={styles.image}
defaultImageProps={{blurRadius: 10}}
/>
{/* Local image URL */}
<AutoDimensionImage
source={require('./X5ModelImage.jpeg')}
dimensionType="height"
dimensionValue={200}
/>
</View>
);
}
}
const styles = StyleSheet.create({
image: {
alignSelf: 'center',
},
});
```
### Dimension change according to the input params (width & height)
### Adding `otherDimensionMaxValue`
By adding this, we can add maximum limit to the dynamic dimension which gets changed according to the constant dynamic value (`dimensionValue`)
## Props
| name | type | isRequired | default | description |
| ---------------------- | :-----------------------: | :--------: | :-----: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| dimensionType | `enum('width', 'height')` | YES | - | Mention the constant dimension. (width/height) |
| dimensionValue | `number` | YES | - | Constant dimension value |
| source | `ImageSource` | YES | - | The image source (either a remote URL or a local file resource) |
| otherDimensionMaxValue | `number` | NO | - | Can set the maximum value for the other dimension. If that value exceeds when setting the value for constant dimension, the image will fit to the given `otherDimensionMaxValue` value |
| style | `Image Style Props` | NO | {} | Image styling |
| defaultImageProps | `Object` | NO | {} | The default props available in `Image` |