Support <img loading="lazy" /> attribute

[MoOx]

Is your feature request related to a problem? Please describe.

Recently Chrome added a native way to lazy load images, it would be nice to be able to leverage it.

Describe a solution you'd like

We could simply add support for this attributes that accepts 3 values "auto" (default), "lazy", "eager". We don't have to implement anything beside passing this to the dom <img.

That said, I am not sure what is the best way to implement this for img only as Image rely on View+propsToAriaRole.

Would you be open for a PR to add this as escape hatch into filterSupportedProps?

Describe alternatives you've considered

I think it's best to not really think about that since it's a recent feature, which make sense the way it is imo.

Additional context

It's especially interesting for SSR to get good perf notes for a good SEO :D

[MoOx]

One thing I didn't think about is that Image actually render img tag just for convenience & the actual rendering is using css background-image... I guess in it's current state it's not possible to resolve this issue then...

[necolas]

RN's Image is probably the API with the biggest differences from web images. Ultimately I suspect it will need to be redesigned significantly to better support web targets, e.g., Image shouldn't support any resizeMode types that cannot be implemented with object-fit and the ability to load images with HTTP headers also probably needs to be moved into a separate API from the rendering of images.

[MoOx]

Yeah I will probably try to make another API with more restriction to handle images via img on the web & Image in RN for the moment.
Should we close this issue then or keep it open as a reminder for futur improvements? Not sure what is best move here

[Sharcoux]

Well... I'd say that this PR could help handle this case easily.

The purpose is the same: easily integrate web specificities in a react-native codebase.

[Sharcoux]

To solve this issue, I think that I'm able to propose a PR that would make img the new underlying component for Image, but for that, it would be quite helpful to rely on createRNElement PR as it would do half of the job. The second half would be to map resizeMode to object-fit, source to src and source.uri to src. We could then pass by the other props to the img element.

Without the createRNElement PR, we have to copy paste the View code to have an underlying element instead of a div.

Another interesting point is that createRNElement could help solving the issue temporary by creating an img element more easily.

So @necolas , why is this off topic, please?

[necolas]

Closing as this feature is being tracked in #1786