React-native-web: Image not rendering with react-native-web 0.0.55

[kapilgp]

accessibilityLabel={'Hi profile picture'}
resizeMode='cover'
source={{
uri: '../fimages/home/slider-4.png'
}}
style={[
styles.logo
]}
/>
What is the current behavior?

Not rendering <img> tag. Just adding div with background image.

What is the expected behaviour?

As per me it should render <img> tag, so we don't need to mention width and height of it.

While it is working in react-native 0.0.49

Environment (include versions)

React Native for Web (version): 0.0.55
React (version): 15.3.2

[MoOx]

This is how react-native Image works from what I know. width/height needs to be explicit.

[kapilgp]

So if we fixed height and width how we can handle responsive case of image?

[MoOx]

I on the web you can "fix" those value with percentage and/or depending on react-native Dimensions API.

[kapilgp]

I have tried percentage width and height both 100% but didn't work. As it renders div so we have to give height in px.
Hopefully Dimension API can help on that.

MoOx, one more thing in that I have confusion with react-native-web, that how to use navigation in it?

Can we use react-native Navigator API for that, And please let me know if there is any tutorial for react-native-web. So I can go through that.

And if there is any forum etc... please let me know so I can post such kind of things there.

Thanks.

[MoOx]

I personally use react-router (and react-router-native for my native experimentation - but I am very new to native navigation problems ^^)

[necolas]

This is as designed in React Native. If you want a "responsive" image you'll need to place it within an aspect ratio component (this is what we do on mobile.twitter.com at the moment)

[annelorraineuy]

@necolas what is an "aspect ratio component"?

[necolas]

It's a component that's implemented like this: https://github.com/suitcss/components-flex-embed