React-native-web: Why use background for images?

[Frexuz]

Is your feature request related to a problem? Please describe.
I don't understand the reasoning for using background images for the <Image> component.

Describe a solution you'd like
With normal <img> tags, you can specify only one of either width or height, and then the imge will render correctly with preserved ratio.

This way is very common for images in top/menu bars for example, where you know the height of your menu, and want the image to be exact in relation to that, but fine to have variable width.

Like so

Describe alternatives you've considered
Setting both height and width, with backgroundSize contain, is NOT the same thing.

As you can clearly see, that there is whitespace inside the image (due to contain), rather than the image is touching the top and bottom edges.

Unless I've missed something obvious.. It doesn't seem like this is possible in react-native-web? :)

[RangerMauve]

I think this functionality mirrors how React Native treats images.

[necolas]

Yes the implementation is mirroring react native, and I don't really understand what's being asked

[Frexuz]

Hm, ok. I understand that you want to mirror the RN api, but shouldn't it also conform to what the WEB can do? I don't see a point of using react-native-web if it removes core features of the web platform :) Maybe I don't understand the point of react-native-web correctly? :)

The desired effect: https://codepen.io/frexuz/pen/QrXgKN
Keeping image ratio by only specifying height, without setting width, or needing to use Dimensions (which I guess you would need in react-native)

[RangerMauve]

If you code against web specific features, then you lose the ability to use that same code in React Native.

The point of this library is to enable you to write React Native code that _also_ works on the web.

If you really need web features, you can still use regular React components instead of React Native Web components, but know that this code will break if you ever try to use it in an actual React Native app.

If only want to target the web, then using this library will get in your way more than help you.

Check out this guide on how you can us regular DOM componets with the RNW API.

[necolas]

If only want to target the web, then using this library will get in your way more than help you.

Strongly disagree. Twitter Lite is built entirely with RNW and is web-only.

[RangerMauve]

@necolas For advanced devlopers that _really_ know what they're doing and why they're doing it, I definately see the benefits.

Fiddling with webpack configs and figuring out why certain RN, or certain Web things don't work, and how to incorporate other component libraries isn't too hard if you know what you're doing.

But for less advanced teams and use cases, plain React DOM will be a lot quicker to set up and will require less effort to get everything done.

Not to say that React Native Web is __hard__, it's just additional effort over more common web React practices.

[necolas]

Quite the opposite from what I've seen. Other than taking a moment to become familiar with different building blocks, it takes much less effort to get things done with the React Native API because it does much more out-of-the-box.

[RangerMauve]

That's a good point. Though, I beleive the OP's comments about not understanding why Image doesn't behave the way it would on the web are an example of how there are gotchas to using RNW for pure web that you wouldn't have otherwise.

I'll try to talk to more people to get a better perspective on the beginner experiece.

[necolas]

Yeah you can't always do new things in old ways.

[Frexuz]

@RangerMauve thx for explaining :)