React-native-fast-image: Get size on fast image?

[edmundito]

Is it possible to get the size of a fast image the same way to get size via React Native's Image.getSize()?

[DylanVann]

There are now width and height properties on the onLoad callback.

[bemaverick]

@DylanVann
Why i get undefined on the onLoad callback?

[nica0012]

How can these values be used as the actual width and height of the image? I am able to get the width and height logged but I cant seem to use them?

[NoMaxLand]

@bemaverick it work from version 4.0.8 for me, maybe you need an update ?

@nica0012
You should use state to reload component who display your FastImage :

e.g :

import React, { Component } from "react";
import { Dimensions } from "react-native";
import FastImage from "react-native-fast-image";

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

export default class YourFastImage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      calcImgHeight: 0,
    };
  }
  render() {
    const { calcImgHeight } = this.state;
    return (
      <FastImage
        style={{ width: width, height: calcImgHeight }}
        source={{
          uri: "https://unsplash.it/400/400?image=1",
        }}
        resizeMode={FastImage.resizeMode.contain}
        onLoad={evt =>
          this.setState({
            calcImgHeight:
              evt.nativeEvent.height / evt.nativeEvent.width * width, // By this, you keep the image ratio
          })}
      />
    );
  }
}

[nica0012]

@NoMaxLand Thanks for the snippet! This is the first thing I tried but calling setState is giving me an infinate loop and nothing returns. Check out the issue I posted so you can have a better idea what's going on:

https://github.com/DylanVann/react-native-fast-image/issues/198

Cheers,

[DylanVann]

It's best to not depend on the width and height of the image, and to instead know the size or aspect ratio beforehand and use an appropriate resize mode. This will help you avoid UI jank on loading the image.

@bemaverick Not sure why you would get undefined. Are you using the latest version of this package?

[woodpav]

@DylanVann I think an API involving a static FastImage.getSize or a callback on FastImage.preload would be useful.

My usecase is using FastImage inside of react-native-image-zoom. To use the onLoad callback I would have to use a wrapping component that doesnt render the ImageZoom component until the onLoad callback fires. This means I have to rerender the FastImage component after I get the image size. Here's my current solution using Image.getSize.

https://gist.github.com/woodpav/1707e59feff35502ab9801bf84447c16

[blackbing]

@woodpav I agree with you. If I can getSize before render, it will be very useful.

your workaround is good, but I'm wondering Image.getSize won't do the cache like fast-image does, is it?

[arispati]

I really need this function because I don't want to load 2 times (from the Image and FastImage components) just to display 1 image, it means that the download size is doubled, what if there are 100 or more images?

in my case to display some images with dynamic height in the FlatList component the image becomes blurry if adjusting the height using onLoad, so I have to get the height of the image before rendering.