React-native, how to resize the image based on the original size of image?

Question

I have list of images to be displayed, wherein size of the image is unknown, how can I display the image fully without any transparent spaces in top and bottom of the image? (I tried getting image size from getSize method, which is eventually giving lot of spaces in top and bottom) I wanted image to resized and fit in like this,

But I'm getting white spaces if I put resize mode to contain, and if I put resize mode to stretch the size of small image is loosing its quality

how can I resize the image so that the white spaces are removed, and fit itself

Try using this package https://github.com/bamlab/react-native-image-resizer — Ayush Bansal, Dec 04 '17 at 07:02
no, actually, imageSizer has will set any image to specified image, but I wanted maintain image aspect ratio. — senthil balaji, Dec 04 '17 at 07:13
you can find exif of image to find width and height and then can set values accordingly — Paras Watts, Dec 04 '17 at 07:25
I suppose by `exif` @SenthilBalaji means the `meta-data` of image . You can get width and height of image from `https://stackoverflow.com/questions/41735846/how-to-get-image-height-and-width-from-uri-on-react-native` and then avoid white spaces accordingly. Do post the solution if you get it . — Ayush Bansal, Dec 04 '17 at 07:52
@AyushBansal I have done that, but there are lot transparent spaces in top and bottom. — senthil balaji, Dec 04 '17 at 08:08
@SenthilBalaji can you share the code and example images too? — Ayush Bansal, Dec 04 '17 at 08:22
https://github.com/francisco-sanchez-molina/react-native-exif you can use this library — Paras Watts, Dec 04 '17 at 08:57
finally, solved it, to get the exact image height and width and set it to them, you can use this piece of code, `Image.getSize( this.props.source.uri, (srcWidth, srcHeight) => { const ratio = Math.min(width / srcWidth, height / srcHeight); this.setState({ width: srcWidth * ratio, height: srcHeight * ratio }); }, error => console.log(error) );` — senthil balaji, Dec 04 '17 at 10:08

score 0 · Accepted Answer · answered Dec 05 '17 at 17:54

    import React, { Component } from "react";
    import { Dimensions, Image } from "react-native";

    const { width, height } = Dimensions.get("window");

    export default class ResizedImage extends Component {
      constructor(props) {
        super(props);
        this.state = {
          height: 0
        };
      }

      componentDidMount() {
        Image.getSize(
          this.props.source.uri,
          (srcWidth, srcHeight) => {
            const ratio = Math.min(width / srcWidth, height / srcHeight);
            this.setState({ height: srcHeight * ratio });
          },
          error => console.log(error)
        );
      }
      componentWillUnmount() {
        this.setState({ height: 0 });
      }

      render() {
        const { source} = this.props;
        return (
          <Image
            source={{ uri: source.uri }}
            style={{
              width: width * 0.9,
              height: this.state.height
            }}
            resizeMode={"cover"}
          />
        );
      }
    }

You can use this as component and pass the URI as props and everything is done.

score 0 · Answer 2 · answered Jul 29 '18 at 14:36

This is the image component I wrote to solve that issue. It works with both Image and ImageBackground (with children).

import React, {Component} from 'react';
import resolveAssetSource from 'resolveAssetSource';
import {
    Image,
    ImageBackground,
    View,
} from 'react-native';

export default class ScalableImageComponent extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const source = resolveAssetSource(this.props.source);
        if (source == null) {
            return null;
        }
        const aspectRatio = source.width / source.height;
        const fixedWidth = this.props.width;
        const fixedHeight = this.props.height;

        const widthCalculated = fixedWidth != null ? fixedWidth : fixedHeight * aspectRatio;
        const heightCalculated = fixedHeight != null ? fixedHeight : fixedWidth / aspectRatio;

        if (this.props.isBackgroundImage) {
            return (
                <ImageBackground
                    source={this.props.source}
                    style={[
                        this.props.style,
                        {
                            width: widthCalculated,
                            height: heightCalculated,
                        }
                    ]}
                >
                    {this.props.children}
                </ImageBackground>
            );
        } else {
            return (
                <Image
                    source={this.props.source}
                    style={[
                        this.props.style,
                        {
                            width: widthCalculated,
                            height: heightCalculated,
                        }
                    ]}
                />
            );
        }
    }
}

Use it just like you would use a regular image. If you want it to be an image background just pass a prop isBackgroundImage={true} eg:

<ScalableImageComponent
    isBackgroundImage={true}
    source={require('./static.png')}
>
<Text>text over image</Text>
</ScalableImageComponent>

React-native, how to resize the image based on the original size of image?

2 Answers2