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 |