RNW doesn't display image; same code works in RN

[samuelneff]

The problem

A simple RN app with only a View and an Image using a uri as the source works in RN but fails in RNW. RNW does not display the image.

The image does exist, but the container is zero pixels in height so the image is not displayed.

How to reproduce

Just three tags...

Simplified test case: https://codesandbox.io/s/zen-browser-5c8k4?file=/src/App.js

<View style={styles.container}>
  <Image
    source={{
      uri:
        "https://cdn4.iconfinder.com/data/icons/logos-3/600/React.js_logo-512.png"
    }}
    style={styles.image}
  />
</View>

Steps to reproduce:

1. Create a View with styles
   flexDirection: 'row'
justifyContent: 'center'
width: '100%'
height: 256
2. Add an Image with the following uri and styles
   uri: 'https://cdn4.iconfinder.com/data/icons/logos-3/600/React.js_logo-512.png'
flex: 0
height: 256
width: 256

Expected behavior
Image should show.

Image shows both in local emulator and on snack.expo.io:

https://snack.expo.io/@samuelrn/simple-image

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.11.x
• React (version): 16.12.0
• Browser: Chrome 83.0.4103.97

[vipulrawat]

I think default value of flex-basis in react-native is auto while in web its 0%
You can try making flex-basis explicit here by using flex: 0 0 auto

[samuelneff]

Thank you. That resolved it.

Would it be good to have RNW to set flex-basis directly when it's not otherwise present to make the defaults the same?

[necolas]

React Native doesn't implement flexbox correctly, so the platforms will never be consistent until yoga is patched. I'll eventually remove the 0% flex basis default, but you should only set flex basis property and not use the flex shorthand with a string of multiple values

[samuelneff]

Thanks!!

[necolas]

I'll still leave this open as part of switching to auto by default

[necolas]

This should be fixed in the @canary version. Let me know