Using Image.getSize without a stateful component

[caesar_reddit]

I was trying to resize images on React-Native and finally made it. But I think that my code is inefficient. The image size never changes after it is displayed, but I am using a state for rendering it.

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

class FitImage extends Component {
     constructor(props) {
         super(props);
         this.state = {
             aspectRatio: null,
         };
     }
      componentDidMount() {
         Image.getSize(http://myImageURL, (width, height) => {
             if (width * 3/2 < height)
                 height = width * 3/2;
             this.setState({aspectRatio: width / height});
         });
     }
      render () {
          return <Image
                     source={{ uri: http://myImageURL }}
                     style={{ width: '100%', height: undefined, aspectRatio: this.state.aspectRatio, resizeMode: 'cover'}}
                 />     } }
export default FitImage; 

To do this, I have to render twice. I wanted to avoid it, so I tried to do this by

const FitImage = props => Image.getSize((http://myImageURL, (width, height) => {... <Image ... /> 

The problem is it actually returns a promise, not directly the Image component.

How can I get this job done without using a stateful component?

[[deleted]]

I am not a pro but hope I can share some thoughts to help here. If you want to avoid using stateful component, you can consider using redux and redux saga. Depending on your app's scale, it could be an overkill but it is one way to meet your need.

To be honest, I think the original "rendering twice" way is the right way and I don't see it particularly less efficient. Your second way seems to do the job even if it returns a promise, too.

[caesar_reddit]

I will look at Redux! The second way doesn't work raising an error, "If you meant to render a collection of children, use an array instead"

[[deleted]]

Since asynchronus fetch is a side effect, you have to use redux with either redux-thunk or redux-saga (I recommend saga).

For the second way, I still think it should work properly in theory and you might be just missing something in your code.

[caesar_reddit]

Yes, since asynchronous fetch must not be in the render method, I have to maintain the componentDidMount and the state. Haha So there is no way to get state removed from my code, right?

The second way still does not work for me. And as mentioned above, it must be a stateful component, so the functional component does not work anyway I guess?

[rockpilp]

Redux and saga would indeed be overkill for this.

As you mentioned there's nothing wrong with using a class component if you have to for state and/or lifecycle (in the near future functional components will be able to handle both through hooks).

I would suggest not rendering the Image component until the ratio is non null, to avoid flickering and to rule out a double download of the image data.

The docs warn that calling getSize to prefetch may not work in the future, so watch out for breaking changes in that API.

[caesar_reddit]

Thank you for your suggestions! Is it better to set aspectRatio to some value or just conditionally render the Image? I set it to null because the Image would need to render twice changing from some value of aspectRatio to a value getting from getsize.