I keep following closely the logic used on the web version, so (hopefully) anybody can later on check it out and understand it easily.

Do you think there is way to make one single ImageSize component, or make common some of the image resizing logic in a utils.js file used by both web and native implementation of ImageSize? (I think we can do that in another PR if you prefer).

I thought about it:

The math part could easily be shared. But since this is client related code, and clients are different (mobile-web), it might be a good idea to let those calculations be updated separately. So, for example, if the way these sizes are calculated had to change on the web side for any reason, it doesn't affect mobile.

If that's true, we are not repeating code, but the fact that they look like the same is a temporal coincidence.

Anyway, we can decide to share the code if we are sure it will be always the same for all the platforms.

If that's the case, I'd agree on doing it on a future PR. 👍

Can we extract the computation code to its own function and in a dedicated module? The idea here is to then have a .native.js counterpart to nativize stuff. For example, I'm looking at the componentDidMount() method and I think that could be identical between the platforms and the difference could be inside the fetchImageSize method if it makes sense.

Thanks @hypest !

I made the change we talked about:
Now the ImageSize component is shared between web and mobile, and the platform specific parts were extracted into utils.js and utils.native.js.

The mobile version is working as before, and the web tests are all passing (locally at least).
I'm still not 100% confident that the web version is working as it was before.

@hypest - Maybe implementing that in the way @daniloercoli suggested would be less invasive?
We still will be sharing most of the non-platform specific code.

Maybe implementing that in the way @daniloercoli suggested would be less invasive?

Hmm, not sure what exactly is different right now, compared to Danilo's sugegstion. Perhaps I didn't understand Danilo's suggestion.

In any case, the code doesn't seem to be too invasive. It's OK to refactor web-side code to help group the platform agnostic code from the platform specific so, as far as I can tell, we're good so far. I still think that we could use an eye from a web side colleague so, let's wait. @gziolo , maybe you can have a look here?

There's a chance my "... is the right direction but still feels kinda awkward" comment needs some explaining. I was looking at the code and noticed this pattern:

onLayout( event ) {
	onLayout( event, ( container ) => {
		this.container = container;
		this.calculateSize();
	} );
}

Now, it seems that in ImageSize we have a onLayout method that calls onLayout from utils, passing a "callback" to actually continue the original onLayout call. This is what feels awkward. Can't we just call utils.onLayout(), returning the container directly? Similar with fetchImageSize. Chances are I'm missing some point/detail here so, please feel free to elaborate. Thanks!

@hypest - @daniloercoli idea was (and please correct me if I'm wrong) actually the opposite:

We would keep the image-size.js and image-size.native.js, extracting all the shared maths into a common utils.js.

I believe that, in this way, the implementation of the shared code would be simpler and less invasive on the web part, but reduced to just a couple of functions.

You are right, I believe that, in the case of utils.onLayout() we can return the container directly, but that's not the case with utils.fetchImageSize() where something similar happens.

I'll push an update with this change.

This PR was replaced by #13096