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